TRAIN TIME TABLE USING JAVASCRIPT

Demo👀

How Do You Make A Train Time Table Using JavaScript!

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, CSS, Javascript.

2nd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

  <style type="text/css">
      body{
    margin: 40px;
    margin-bottom: 300px;
    font-size: 15px;;
}

#heading{
    font-family: 'Russo One', sans-serif;
    font-size: 35px;
}

#form-panel{
    height: 550px;

}

.form-panel-body{
    height: 580px;
    border: 5px solid black; 
    background-color:#f9563a ;
}

.form-panel-update{
    height: 580px;
    border: 5px  solid red; 
    background-color:rgb(208, 219, 223) ;

}

#form-field{
    margin-top: 100px;
}
#table-panel{
    height: 550px;
    border: 5px solid black; 
    text-align: center;
    background-color:#f9563a ;

}
#table-display{
    overflow: auto;
    height: 400px;
    /* border: 1px solid black; */
}

#table-header td{
    border: 1px solid black;
    background-color: darkslategray;
    border: 2px solid black;
    color:white;
    font-size: 15px;
    }
#table{
    /* border: 1px solid black; */
    /* margin-top: -10px; */
    height: 120px;
    line-height: 100px;
}

#table-body{
    border: 2px solid white;
}

#table-body td {
    border: 2px solid black;
}

    </style>

3rd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

 
 <div class="col-lg-3" id="form-div">
            <div class="panel panel-body form-panel-body" id="form-panel">
                <form id="form-field">
                    <label>Train Name:</label>
                    <input type= "text" placeholder= "Train Name" id="train-name" class="form-control"><br>
                    <label>Destination:</label>
                    <input type="text" placeholder="destination" id="train-destination" class="form-control"><br>
                    <label>First train (24 hrs format):</label>
                    <input type="text" placeholder="HH:MM" id="train-time" class="form-control"><br>
                    <lablel>Interval (mm)</lablel>
                    <input type="number" placeholder="MM" id="train-frequency" class="form-control"><br>
                    <div id="submit-button">
                        <button id="train-submit" class="btn btn-success">Submit</button>
                    </div>
<div id="update-button" hidden>
                        <button id="train-update" class="btn btn-danger">Update</button>
                    </div>
</form>
</div>
</div>
<div class="col-lg-9" id="table-div" >
            <div class="panel panel-body" id="table-panel">
                <p id="heading" class="text-danger bg-info p-2">
Train Time Table</p>
<table class="table table-bordered" id="table-header">
<tr>
                                <td style="width: 24.66%">Train Name</td>
                                <td style="width: 21.66%">Destination</td>
                                <td style="width: 14.66%">Frequency</td>
                                <td style="width: 14.66%">Next arrival</td>
                                <td style="width: 12.66%">Arriving in </td>
                                <td style="width: 13.22%" id="actions">Actions</td>
                            </tr>
</table>
<div id="table-display">
                        <table class="table table-bordered" id="table">
                               <tbody id="table-body2"></tbody> 

                                <tbody id="table-body"></tbody>
                        </table>
</div>
</div>
</div>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

        <!-- CDN for firebase -->
        <script src="https://www.gstatic.com/firebasejs/5.1.0/firebase.js"></script>
        
        <!-- moment.js cdn -->
        <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
       
        <script>
        $(document).ready( function (){

        });
        $(document).ready( function(){
config();
var databse;
function config(){
    var config = {
      apiKey: "AIzaSyA8BWQbLE--KpLgmpJM3bmDJG_IkIPqWJA",
      authDomain: "train-schedular-c7a4a.firebaseapp.com",
      databaseURL: "https://train-schedular-c7a4a.firebaseio.com",
      projectId: "train-schedular-c7a4a",
      storageBucket: "train-schedular-c7a4a.appspot.com",
      messagingSenderId: "764385867751"
    };
    firebase.initializeApp(config);
  
  database = firebase.database();
}

  $("#train-submit").click(function (){
    event.preventDefault();
    checkInputFieldsForNotNull();
  });
  
  trial();
  setInterval( function(){
    $('#table-body').remove();
    var newTable = $('<tbody id="table-body"></tbody');
    $("#table").append(newTable);
    trial();
  }, 100);

function trial(){
    var trainName;
    var trainDestination;
    var trainTimeFirst;
    var trainFrequency;

  database.ref("trains").on("child_added", function (snapshot) {
    var childKey = snapshot.key;
    var childData = snapshot.val();

    var trainName = snapshot.val().trainName;
    var trainDestination = snapshot.val().trainDestination;
    var trainFrequency = snapshot.val().trainFrequency;
    var trainTimeFirst = snapshot.val().trainTime;


    //Current time in minutes ........................ good
    var currentTimeInMins = currentTimeInMins();
    function currentTimeInMins(){
        var currentHour = moment().get("hour");
        var currentMinutes = moment().get("minutes");
        var currentTimeString = currentHour + ":" + currentMinutes;
        var currentTime = moment(currentTimeString, "HH:mm").format("HH:mm");
        var currentTimeInMins = moment.duration(currentTime).asMinutes(); ////........
        return currentTimeInMins;
    }

    //First train time converted in minutes .................... good
    var firstTrainTimeInMins = firstTrainTimeInMins();
    function firstTrainTimeInMins(){
        var firstTrainTimeInMins = moment(trainTimeFirst, "HH:mm").format("HH:mm");
        firstTrainTimeInMins = moment.duration(firstTrainTimeInMins).asMinutes();
        return firstTrainTimeInMins;
    }

    //Time left or mins away from train arrival 
    var minsAway = minsAway();
  
    function minsAway(){
        if (firstTrainTimeInMins > currentTimeInMins ){
            var timeUntilMidnight = (1440-firstTrainTimeInMins);
            var firstTrainAndCurrentTimeDuration = timeUntilMidnight + currentTimeInMins;
            var minsLeftAfterMaxTrips = firstTrainAndCurrentTimeDuration % trainFrequency;
            var minsAway = trainFrequency - minsLeftAfterMaxTrips;
            return minsAway;
        }else{
            var differenceCurrentTimeAndFirstTrain = currentTimeInMins - firstTrainTimeInMins;
            var minsPastAfterMaxTrips = differenceCurrentTimeAndFirstTrain % trainFrequency;
            var minsAway = trainFrequency - minsPastAfterMaxTrips;
            return minsAway;
        }
    }

    //Next arrival train arrival time
    var nextArrival = nextArrival();
    function nextArrival(){
        var nextArrivalInMins = currentTimeInMins + minsAway;
        var nextArrivalFormatted = moment.duration(nextArrivalInMins, 'minutes');
        var nextArrivalInHrsAndMins = nextArrivalFormatted.format("hh:mm");
        var nextArrivalStandard = moment(nextArrivalInHrsAndMins, 'HH:mm').format('hh:mm a')

            return nextArrivalStandard;
    }
    var deleteButton = $('<td><span class="btn glyphicon glyphicon-trash"></span></td>').click(function () {
        // database.ref("trains").remove(childKey);
        var nodeToBeDeleted = firebase.database().ref("trains/" + childKey);
        nodeToBeDeleted.remove().then( function (){
            console.log("data deleted");
        }).catch( function(error){
            console.log("Failed to remove");
        });
    });

    var editButton = $('<td><span class="btn glyphicon glyphicon-edit"></span></td>').click(function () {
        // pouplateDataInformForEdit();
        updateData();
    });

       


    function pouplateDataInformForEdit(){
        database.ref("trains" +"/"+childKey).on("value", function (snapshot) {

            var childData = snapshot.val();
            var trainName = snapshot.val().trainName;
            var trainDestination = snapshot.val().trainDestination;
            var trainFrequency = snapshot.val().trainFrequency;
            var trainTimeFirst = snapshot.val().trainTime;

            $("#train-name").val(trainName);
            $("#train-destination").val(trainDestination);
            $("#train-time").val(trainTimeFirst);
            $("#train-frequency").val(trainFrequency);

        });
    }

        function updateData(){
            $("#submit-button").hide();
            $("#update-button").show();
            $("#form-panel").removeClass("form-panel-body");
            $("#form-panel").addClass("form-panel-update");
            pouplateDataInformForEdit();

            $("#train-update").click(function (){
                var trainName_update =  $("#train-name").val().trim();
                var trainDestination_update = $("#train-destination").val().trim();
                var trainTimeFirst_update = $("#train-time").val().trim();
                var trainFrequency_update = $("#train-frequency").val().trim();

                var nodeToBeUpdated = firebase.database().ref("trains/" + childKey);
                nodeToBeUpdated.update({
                    trainName : trainName_update,
                    trainDestination : trainDestination_update,
                    trainTime : trainTimeFirst_update,
                    trainFrequency : trainFrequency_update                
               });   
               
            })
        }
        

    var newRows;
    
    if(minsAway == 1){
        var newRows = $('
<tr><td style="width: 24.66%">' + trainName + '</td><td style="width: 21.66%">'
        + trainDestination + '</td><td style="width: 14.66%">'
        + trainFrequency + " Mins" + '</td><td style="width: 14.66%">'
        + nextArrival + '</td><td style="width: 12.66%">'
        + "Arriving ..." +'</td></tr style="width: 12.66%">');
    }else{
        var newRows = $('
<tr><td style="width: 24.66%">' + trainName + '</td><td style="width: 21.66%">'
        + trainDestination + '</td><td style="width: 14.66%">'
        + trainFrequency +  " Mins" +'</td><td style="width: 14.66%">'
        + nextArrival + '</td><td style="width: 12.66%">'
        + minsAway + " Mins" +'</td></tr style="width: 12.66%">');
    }


newRows.append(editButton);
newRows.append(deleteButton);
$("#table-body").prepend(newRows);
});
}



function clearInputFields(){
    $('input[class="form-control"]').each(function (){
        $(this).val('');
    });
}

function checkInputFieldsForNotNull(){
    var trainName =  $("#train-name").val().trim();
    var trainDestination = $("#train-destination").val().trim();
    var trainTimeFirst = $("#train-time").val().trim();
    var trainFrequency = $("#train-frequency").val().trim();

    var firstTrainHrs = parseInt(trainTimeFirst.substring(0,2));
    var firstTrainMins = parseInt(trainTimeFirst.substring(3,5));

    if (trainName == "" || trainDestination == "" || trainTimeFirst == "" || trainFrequency == ""){
        alert("Please fill up all the fields or fill in correct format");
    }else if (firstTrainHrs > 24 || firstTrainMins > 59 || trainTimeFirst.indexOf(":") !== 2){
        alert("Please enter values in correct format-  First train time should be between 00:00 - 23:59 and the freqeuncy should be a numer")
    }
    else{
        trainName =  $("#train-name").val().trim();
        trainDestination = $("#train-destination").val().trim();
        trainTimeFirst = $("#train-time").val().trim();
        trainFrequency = $("#train-frequency").val().trim();
    clearInputFields();
    database.ref("trains").push({
        trainName : trainName,
        trainDestination : trainDestination,
        trainTime : trainTimeFirst,
        trainFrequency : trainFrequency
    });
   
    }
}

}); 
    
        </script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

TRAIN TIME TABLE USING JAVASCRIPT | BEGINNER

Demo👀

How Do You Make A Train Time Table Using JavaScript!

How To Download This Project

Project source Code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

TO-DO LIST USING JAVASCRIPT | BEGINNER

CHUCK NORRIS JOKE GENERATOR USING JAVASCRIPT

Best 40+ javascript projects for beginners With Source Code

1Add

TRAIN TIME TABLE USING JAVASCRIPT | BEGINNER

Demo👀

How Do You Make A Train Time Table Using JavaScript!

How To Download This Project

Project source Code

Train Time Table Project Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

TO-DO LIST USING JAVASCRIPT | BEGINNER

CHUCK NORRIS JOKE GENERATOR USING JAVASCRIPT

Best 40+ javascript projects for beginners With Source Code