form html phases 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

//define the html form in JS
var formEl = document.getElementById("form");
var allData=[];