// Form Details display in plain JAVASCRIPT
// HTML
<body>
<form action="#">
<input
type="text"
id="myName"
placeholder="enter your name"
/><br /><br />
<input
type="text"
id="myNumber"
placeholder="enter your Number"
/><br /><br />
</form>
<input type="submit" onclick="buttonSubmit()" />
<table id="user-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="user-table-data"></tbody>
</table>
</body>
// javascript
<script>
let userList = [];
const buttonSubmit = () => {
let nameInput = document.getElementById("myName").value;
let numberInput = document.getElementById("myNumber").value;
let myData = {
name: nameInput,
number: numberInput,
};
userList.push(myData);
localStorage.setItem("userData", JSON.stringify(userList));
tableDataPopulate();
};
const tableDataPopulate = () => {
const allData = localStorage.getItem("userData");
const table = document.getElementById("user-table-data");
let userHtml = "";
userList.forEach((user, i) => {
userHtml += `<tr><td>${user.name}</td><td>${user.number}</td></tr>`;
});
table.innerHTML = userHtml;
};
</script>