JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output"></div>
CSS
#output{
border:2px solid #CCC;
padding:0.25em;
}
JavaScript
// A traveler class represents a traveler
function Traveler(firstName, lastName, phone) {
this.firstName = firstName;
this.lastName = lastName;
this.phone = phone;
}
// An array to store all travelers
var travelers = new Array();
// Add Traveler
function addTraveler(traveler) {
travelers.push(traveler);
}
// Remove Traveler (returns the removed traveler)
function removeTraveler() {
return travelers.pop();
}
// Display Travelers
function renderTravelers() {
var htmlList = "";
var arrayLength = travelers.length;
for (var i = 0; i < arrayLength; i++) {
htmlList +=
"<li>" +
travelers[i].firstName + " " +
travelers[i].lastName + " " +
travelers[i].phone +
"</li>"
}
htmlList = "<ul>" + htmlList + "</ul>";
htmlList += "<em>Number of Travelers: " + arrayLength + "</em>";
document.getElementById("output").innerHTML += htmlList + "<hr>";
}
// ::MAIN::
// Add some travelers
addTraveler(new Traveler("Albert", "Einstein", "555-7331"));
addTraveler(new Traveler("Nikola", "Tesla", "555-1010"));
renderTravelers();
// --
var removed = removeTraveler();
renderTravelers();
// --
addTraveler(removed);
renderTravelers();
// --
addTraveler(new Traveler("Marie", "Curie", "555-4567"));
addTraveler(new Traveler("Isaac", "Newton", "555-9988"));
renderTravelers();
// --
var removed = removeTraveler();
var removed = removeTraveler();
var removed = removeTraveler();
var removed = removeTraveler();
renderTravelers();