CodePen Embed - TrainAktivity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
  
  <link rel="stylesheet" type="text/css" href="assets/css/reset.css" />
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="https://www.gstatic.com/firebasejs/5.1.0/firebase.js"></script>
 
  <script src="assets/javascript/app.js"></script>

  <script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>

  <link rel="stylesheet" type="text/css" href="./assets/css/style.css">
 
    <title>Train Activity</title>
    
</head>

<body>

  <div class="container">

    <br>

    <!-- Jumbotron Title -->
    <div class="jumbotron">
      <h1 class="text-center">Train Schedule Tracker!</h1>
      <h5 class="text-center">Check for Train times below</h5>
    </div>

    <!-- Table -->
    <table class="table">
      <thead>
        <tr>
          <th>Train Name</th>
          <th>Destination</th>
          <th>Frequency (min)</th>
          <th>Next Arrival</th>
          <th>Minutes Away</th>
        </tr>
      </thead>
      <tbody id="all-display">
      </tbody>
    </table>

    <!-- Add Train Form -->
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Add Train</h3>
          </div>
          <div class="panel-body">
            <form>
              <div class="form-group">
                <label for="train-name">Train Name</label>
                <input class="form-control" id="trainName" type="text">
              </div>
              <div class="form-group">
                <label for="destination">Destination</label>
                <input class="form-control" id="destination" type="text">
              </div>
              <div class="form-group">
                <label for="first-train-time">First Train Time (HH:mm - military time)</label>
                <input class="form-control" id="firstTrain" type="text">
              </div>
              <div class="form-group">
                <label for="train-frequency">Frequency (min)</label>
                <input class="form-control" id="interval" type="number">
              </div>
              <button class="btn btn-primary" id="addTrain" type="submit">Submit</button>
            </form>
          </div>
        </div>
      </div>

    </div>

  </div>

  <script src="https://www.gstatic.com/firebasejs/5.1.0/firebase.js"></script>
 
  <script src="./assets/javascript/app.js"></script>

  <script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
    
</body>

</html>

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
  background-color: skyblue;
}

var config = {
      apiKey: "AIzaSyBA3CuckV5_T_x9OGbRlKONilv3wfeQYA4",
      authDomain: "train-activity-a6a19.firebaseapp.com",
      databaseURL: "https://train-activity-a6a19.firebaseio.com",
      projectId: "train-activity-a6a19",
      storageBucket: "train-activity-a6a19.appspot.com",
      messagingSenderId: "635425682675"
    };
      firebase.initializeApp(config);


   database = firebase.database();

  $("#addTrain").on("click", function (event) {
    event.preventDefault();

    var trainName = $("#trainName").val().trim();
    var destination = $("#destination").val().trim();
    var firstTrain = $("#firstTrain").val().trim();
    var freq = $("#interval").val().trim();

    database.ref().push({
      trainName: trainName,
      destination: destination,
      firstTrain: firstTrain,
      frequency: freq
    });
  });


  database.ref().on("child_added", function (childSnapshot) {

    var newTrain = childSnapshot.val().trainName;
    var newLocation = childSnapshot.val().destination;
    var newFirstTrain = childSnapshot.val().firstTrain;
    var newFreq = childSnapshot.val().frequency;

    var startTimeConverted = moment(newFirstTrain, "hh:mm").subtract(1, "years");

    var currentTime = moment();

    var diffTime = moment().diff(moment(startTimeConverted), "minutes");

    var tRemainder = diffTime % newFreq;

    var tMinutesTillTrain = newFreq - tRemainder;

    var nextTrain = moment().add(tMinutesTillTrain, "minutes");
    var catchTrain = moment(nextTrain).format("HH:mm");

    $("#all-display").append(
      ' <tr><td>' + newTrain +
      ' </td><td>' + newLocation +
      ' </td><td>' + newFreq +
      ' </td><td>' + catchTrain +
      ' </td><td>' + tMinutesTillTrain + ' </td></tr>');

    $("#trainName, #destination, #firstTrain, #interval").val("");
    return false;
  },
    function (errorObject) {
      console.log("Errors handled: " + errorObject.code);
    });

Run Pen

This Pen is owned by Samuelpasaribu on CodePen.

See more by @Samuelpasaribu on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.