LearningJS888 LearningJS888 - 4 months ago 40
HTML Question

Troubles with date/time - Moment.js

I'm new to JS and have been working on this activity that, based on user input, creates a table for train times (time of arrival/frequency/time to next train) etc. I'm having troubles with getting the time to show up correctly, when I input the arrival time (HH:mm - military time), it doesn't format correctly, and the time is not the same as the inputted time.

My

JS
code:

var trainCounter = 0;
$(document).on("click", '#addTrain', function() {

var nameGiven = $('#trainName').val().trim();
var placeGiven = $('#place').val().trim();
var timeGiven = $('#trainTime').val().trim();
var freqGiven = $('#freq').val().trim();
freqGiven = parseInt(freqGiven);

console.log("Name/Place/Time/Frequency: " + nameGiven + "|" + placeGiven + "|" + timeGiven + "|" + freqGiven);

var firstTimeConverted = moment(timeGiven, "HH:mm").subtract(1, "years");
console.log("TIME CONVERTED: " + firstTimeConverted);

var diffTime = moment().diff(moment(firstTimeConverted), "minutes");
console.log("DIFFERENCE IN TIME: " + diffTime);

var timeRemaining = diffTime % freqGiven;
console.log(timeRemaining);

var minTilTrain = freqGiven - timeRemaining;
console.log("MINUTES TILL TRAIN: " + minTilTrain);

var nextTrain = moment().add(minTilTrain, "minutes");
console.log("ARRIVAL TIME: " + moment(nextTrain).format("HH:mm"));

var row = $('<tr>');

var trainName = $('<td>');
trainName.text(nameGiven);
row.append(trainName);

var trainPlace = $('<td>');
trainPlace.text(placeGiven);
row.append(trainPlace);

var trainTime = $('<td>');
moment(nextTrain).format("HH:mm");
trainTime.text(nextTrain);
row.append(trainTime);

var trainFreq = $('<td>');
trainFreq.text(freqGiven);
row.append(trainFreq);

var minutesUntilNext = $('<td>');
minutesUntilNext.text(minTilTrain);
row.append(minutesUntilNext);

var trainLocalStorage = row.prop('outerHTML');
console.log(trainLocalStorage);
localStorage.setItem("data-train-" + trainCounter, trainLocalStorage);

nameGiven = $('#trainName').val("");
placeGiven = $('#place').val("");
timeGiven = $('#trainTime').val("");
freqGiven = $('#freq').val("");

$('#trainTable').append(trainLocalStorage);
trainCounter++;

return false;

});

$(document).ready(function() {

for(var i = 0; i < localStorage.length; i++)
{
$('#trainTable').append(localStorage.getItem("data-train-" + trainCounter));
trainCounter++;
}
});


And my
HTML
:

<!DOCTYPE html>
<html>
<head>
<title>Train Schedule</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 jumbotron">
<h1 class="text-center">TRAIN TIME</h1>
<h2 class="text-center">Chooooo Chooooo</h3>
<h5 class="text-center">Sheldon Cooper goes wild.</h5>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
Current Train Schedule
</div>
<div class="panel-body" id="trainTableContainer">
<table class="table table-striped" id="trainTable">
<thead>
<tr>
<th>Train Name</th>
<th>Destination</th>
<th>Next Arrival</th>
<th>Frequency (min)</th>
<th>Minutes Away</th>
</tr>
<tr id="addToThis">
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
Add Train
</div>
<div class="panel-body">
<form id="userForm">
<label for="userInput" class="changeText">Train Name</label><br>
<input type="text" class="userInput" id="trainName"><br>
<label for="userInput" class="changeText">Destination</label><br>
<input type="text" class="userInput" id="place"><br>
<label for="userInput" class="changeText">First Train Time (HH:mm - military time)</label><br>
<input type="text" class="userInput" id="trainTime"><br>
<label for="userInput" class="changeText">Frequency (min)</label><br>
<input type="text" class="userInput" id="freq"><br>
<br>
<input id="addTrain" type="submit" class="btn-primary" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/javascript/app.js"></script>
</body>
</html>


If anyone could take a quick look and let me know what I've missed (I've looked at this for some time, and might've over-looked something small), that would be greatly appreciated! Also, if it helps, I created a
JSFiddle
for it: Fiddle

Thanks!!

Answer

Issue is that you are not displaying the formated time. Change

moment(nextTrain).format("HH:mm");
trainTime.text(nextTrain);

to:

trainTime.text(moment(nextTrain).format("HH:mm"));

and the calculation for the nextTrain is off.

Comments