Display form details in a table.

This article will focus on :-

How to get data from a input tags

How to show that data to a user on the same webpage using JS

How to do all the above things on form submit.

Hey everyone , so this question was asked to me in an interview recently for a front end role that i had applied for.
It was a entry level role so the interviewer asked me to create a table and show the details that are submitted by the user in a table format.

So lets get started

The first thing you need to understand is the problem statement in hand .
The things that you have to do include:-

Create a form using html & css.

Get the inputted values from all the inputs on the submission of the form

And then display them to the user .

So lets go ahead and create a form here

<form action="#" id="formSubmission" method="get">
    <span>Email</span>
    <input type="Name" placeholder="enter your Name" id="name">
    <span>Age</span>
    <input type="number" placeholder="Age" id="age">
    <span>State</span>
    <input type="text" placeholder="Enter State" id="state">
    <button type="submit">Submit</button>
  </form>
 <ul id="data">
   <li>Name</li>
   <li>Age</li>
   <li>State</li>
 </ul>

So here you can see we created a form that has 3 inputs i.e

Name

Age

State and we are giving each one an id to make sure we get these inputs in our javascript. Also button has a type of submit which will trigger the form submit method .

we can improve the look and feel of the form using some css

form{
  display:flex;
  flex-direction:column;
  width:35vw;
}
form input{
  padding:0.7em 1em;
}
form span{
  padding:0.6em 1em;
}
form > button{
  padding:1.1em;
  margin:1em 1em;
  cursor:pointer;
}
ul{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  justify-content:center;
  width:25vw;

}
ul li{
  padding:1em 2em .8em 2em;
  border:1px solid black;

}

So the styling is done
Now comes the javascript part.

So the things that you would need to do in javascript include
*Get references for all the inputs as well as for the form.

Set an event listener for the submit event of the form.

And then get the values one the triggered submit event and show it to the UI. So lets get started.

let form=document.getElementById("formSubmission");

let table=document.getElementById('data');
form.addEventListener("submit",(e)=>{
  e.preventDefault();
  submit();
})


const submit=()=>{
  let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let state = document.getElementById("state").value;


  let newArray = [name,age,state];
  newArray.forEach((item)=>{
      var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  table.appendChild(li);
  })
  form.reset(); 
}