javascript steps
//define the html form in JS
var formEl = document.getElementById("form");
var allData=[];javascript steps
//define the html form in JS
var formEl = document.getElementById("form");
var allData=[];javascript steps
// 2-now want to craet another table to but the data in it
//but before we creat it we need a constructor function
function data(from, to, capacity, reserve,lefted) {
this.from=from;
this.to=to;
this.capacity=capacity ;
this.reserve=reserve ;
this.lefted=0;
this.leftedSum=0
}
//now we can creat the table
data.prototype.render=function()//Acsses the constructor function
{
var tableEl = document.getElementById("table");
var trEl1=document.createElement('tr');
tableEl.appendChild(trEl1);
var tdEl1 = document.createElement('td');
trEl1.appendChild(tdEl1);
tdEl1.textContent=`${this.from}`
var tdEl2 = document.createElement('td');
trEl1.appendChild(tdEl2);
tdEl2.textContent=`${this.to}`
var tdEl3 = document.createElement('td');
trEl1.appendChild(tdEl3);
tdEl3.textContent=`${this.capacity}`
var tdEl4 = document.createElement('td');
trEl1.appendChild(tdEl4);
tdEl4.textContent=`${this.reserve}`
var tdEl5 = document.createElement('td');
trEl1.appendChild(tdEl5);
tdEl5.textContent=`${this.lefted}`
}
//call the function
data.prototype.render();javascript steps
//want to link the form inputs with the submit
// add event listner
formEl.addEventListener("submit",click);
function click(event){
event.preventDefault();
var from = event.target.from.value;
var to = event.target.to.value;
var capacity = event.target.capacity.value;
var reserve = event.target.reserve.value;
var object=new data(from,to,capacity,reserve);
object.leftedSeats();
object.render();
object.total();
set();
}javascript steps
// now I want to calculate the lefted seats
data.prototype.leftedSeats=function() //Acsses the constructor
{
this.lefted = this.capacity-this.reserve ;
}
data.prototype.leftedSeats();javascript steps
// want to creat a table
//1- start with the header
var tableEl = document.getElementById("table");//Global variable we can use it without declare it again
var headerArr=['from','to','capacity','reserve','lefted'];
function header(){
var trEl = document.createElement('tr');
tableEl.appendChild(trEl);
for(var i=0 ; i < headerArr.length ; i++ ){
var thEl = document.createElement('th');
trEl.appendChild(thEl);
thEl.textContent = `${headerArr[i]}`;
}
}
//call the function
header();Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
