index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Train Schedule</title>
    <link rel="stylesheet" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

    
</head>
<body>
<section id="addTransit" class="form-style-8">
    <form>
        <div>
            <label for="name">Vehicle ID:</label>
            <input type="text" id="name" name="vehicle_name">
        </div>
        <div>
            <label for="dest">Destination:</label>
            <input type="text" id="dest" name="destination">
        </div>
        <div>
            <label for="startTime">First Departure:</label>
            <input type="time" id="startTime" name="startTime">
        </div>
        <div>
            <label for="frequency">Frequency:</label>
            <input type="text" id="frequency" name="frequency">
        </div>

        <input type="button" value="Submit Data" id="submitButton">
    </form>
</section>

<section id="VehicleDisplay">
    <table class="table-fill" id="vehicles">
        <thead>
        <tr>
            <th>Train ID</th>
            <th>Destination</th>
            <th>First Departure</th>
            <th>Frequency (min)</th>
            <th>Next Train (min)</th>
            <th>Time of Arrival</th>
        </tr>
        </thead>
        <tbody class="table-hover" id="tableBody">

        </tbody>
    </table>
</section>


</body>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script
        src="https://code.jquery.com/jquery-3.2.1.js"
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
        crossorigin="anonymous"></script>
<script src="logic.js"></script>
</html>