HOW CAN I MAKE THIS CODE WITHOUT JSON OR ANY OTHER THIRD PARTY LIBRARIES??? (html file) AddressBook Address Book + Add Name Phone Address City

HOW CAN I MAKE THIS CODE WITHOUT JSON OR ANY OTHER THIRD PARTY LIBRARIES???

(html file)

Address Book

Name Phone Address City E-Mail

After that create a folder inside the directory named scripts and do the same for the .js file and put it into scripts folder in the directory. (Js File)

window.onload = function(){ // Buttons var quickAddBtn = document.getElementById('QuickAdd'); var quickAddFormDiv = document.querySelector('.quickaddForm') var cancelBtn = document.getElementById('Cancel'); var AddBtn = document.getElementById('Add'); // Form Fields var fullname = document.getElementById('fullname'); var phone = document.getElementById('phone'); var address = document.getElementById('address'); var city = document.getElementById('city'); var email = document.getElementById('email'); // Divs etc. var addBookDiv = document.querySelector('.addbook');

quickAddBtn.addEventListener("click", function(){ // display the form div quickAddFormDiv.style.display = "block"; });

cancelBtn.addEventListener("click", function(){ quickAddFormDiv.style.display = "none"; });

AddBtn.addEventListener("click", addToBook);

addBookDiv.addEventListener("click", removeEntry);

// Storage Array var addressBook = [];

//localStorage['addbook'] = '[{"fullname":"Sachin B","email":"sachin@frameboxx.in","phone":"93828292","address":"something","city":"Chandigarh"}]';

function jsonStructure(fullname,phone,address,city,email){ this.fullname = fullname; this.phone = phone; this.address = address; this.city = city; this.email = email; }

function addToBook(){ var isNull = fullname.value!='' && phone.value!='' && address.value!='' && city.value!='' && email.value!=''; if(isNull){ // format the input into a valid JSON structure var obj = new jsonStructure(fullname.value,phone.value,address.value,city.value,email.value); addressBook.push(obj); localStorage['addbook'] = JSON.stringify(addressBook); quickAddFormDiv.style.display = "none"; clearForm(); showAddressBook(); } }

function removeEntry(e){ // Remove an entry from the addressbook if(e.target.classList.contains('delbutton')){ var remID = e.target.getAttribute('data-id'); addressBook.splice(remID,1); localStorage['addbook'] = JSON.stringify(addressBook); showAddressBook(); } }

function clearForm(){ var formFields = document.querySelectorAll('.formFields'); for(var i in formFields){ formFields[i].value = ''; } } function ValidateEmail(mail) { if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)) { return (true) } alert("You have entered an invalid email address!") return (false) } function showAddressBook(){ if(localStorage['addbook'] === undefined){ localStorage['addbook'] = ''; } else { addressBook = JSON.parse(localStorage['addbook']); // Loop over the array addressBook and insert into the page addBookDiv.innerHTML = ''; for(var n in addressBook){ var str = '

'; str += '

' + addressBook[n].fullname + '

'; str += '

' + addressBook[n].email + '

'; str += '

' + addressBook[n].phone + '

'; str += '

' + addressBook[n].address + '

'; str += '

' + addressBook[n].city + '

'; str += '

Delete

'; str += '

'; addBookDiv.innerHTML += str; } } }

showAddressBook();

}