<!DOCTYPE html>
<html>
<head>
<title>Employee Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
<div class="container">
<img src="emp.png">
<tr>
<form onsubmit="addEmp(); return false;">
<div class="form-input">
<input type="text" id="firstname" placeholder="First Name" value="">
</div>
<div>
<input type="text" id="lastname" placeholder="Last Name" value="">
</div>
<div>
<input type="text" id="email" placeholder="Email" value="">
</div>
<div>
<input type="text" id="position" placeholder="Position" value="">
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit" class="btnSubmit">
</div>
</form>
</div>
<td>
<table class="list" id="employeeList">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Position</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
<script src="script.js"></script>
</body>
</html>
---------- script.js ---------------“use strict”var arr = new Array（）; // Array Created function addEmp（）{getEmp（）; arr.push（{firstname：document.getElementById（“firstname”） . value，lastname：document.getElementById（“lastname”） . value，email：document.getElementById（“email”） . value，position：document.getElementById（ “position”） . value}）;
localStorage.setItem("Employees", JSON.stringify(arr)); //adding some data to localstorage
showEmp();
}
function getEmp() { //converting strings to array
var str = localStorage.getItem("Employees");
if(str != null)
arr = JSON.parse(str);
}
function deleteEmp() { //Deleting row and localstorage
if (confirm('Are you sure to delete this record ?')) {
row = td.parentElement.parentElement;
document.getElementById("employeeList").deleteRow(row.rowIndex);
localStorage.removeItem();
}
}
function editEmp() { //edit table value and localstorage value
}
function showEmp(arr) { //inputing localstorage value to the table
getEmp();
var tbl = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
for(i = 0; i < arr.length; i++) {
var newRow = tbl.insertRow();
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
var cell3 = newRow.insertCell();
var cell4 = newRow.insertCell();
var cell5 = newRow.insertCell();
cell1.innerHTML = arr[i].firstname;
cell2.innerHTML = arr[i].lastname;
cell3.innerHTML = arr[i].email;
cell4.innerHTML = arr[i].postition;
cell5.innerHTML = `<a onClick="editEmp(this)">Edit</a>
<a onClick="deleteEmp(this)">Delete</a>`;
}
}