javascript step by step code example

Example 1: 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();

Example 2: 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();

}