JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<fieldset>
    <legend>Personalcontacts</legend>
    <div>
        <label for="name">Name:<br></label><input type="text" id="name"/>
    </div><br>
    <div>
        <label for="address">Address:<br></label><input type="text" id="address"/>
    </div><br>
    
<div>
        <label for="email">Email:<br></label><input type="text" id="email"/>
    </div>  <br>

        <button type="button" id="saveBtn">Save<br> </button>
        </fieldset>
    <fieldset><br><br>
        <legend>List of Contacts</legend>
        <div id="output"></div><br><br>
    </fieldset>

JavaScript

//  var nameEl=document.getElementById("name");
  //  var addressEl=document.getElementById("address");
  //  var emailEl=document.getElementById("email");
    //var saveEl=document.getElementById("saveBtn");
  //  var outputEl=document.getElementById("output");
    
   // console.log(window.localStorage);
console.clear();

    var data=[];
       console.log("There are " + data.length + "Objects in the Array.");
       console.log(data);

    
    
    

    var Contacts=function(name,address,email){
        this.name=name;
        this.address=address;
        this.email=email;
    };

  saveEl.onclick=function() {
        console.log(data)
        var name=nameEl.value;
        var address=addressEl.value;
        var email=emailEl.value;
        var contacts= new Contacts(name,address,email);
        
        data.push(contacts);
        updateLS();
        updateOutput();
        clearInputs();
        console.log("iam done!!!")
    
     };

   var updateLS=function() {
        var myData=JSON.stringify(data);

        localStorage.setItem('data',myData);

    };

    var initLS=function() {
        var DATA=window.localStorage.getItem('data');
if(DATA){
    var MYDATA = JSON.parse(DATA);
    console.log(MYDATA);
    
    console.log('Key/Value pairs:');
    MYDATA.forEach(function(p) {
        for(var key in p) {
            console.log("The Contacts " + key + "is " + p[key] + ".");
        }
        console.log(' ');
    });
    
                updateOutput();
    };

    var clearInputs=function() {
        nameEl.value = '';
        addressEl.value = '';
        emailEl.value = '';
    };

var updateOutput=function() {
     var myNewContacts = [];
    console.log("There are " + myNewContacts.length + "Objects in the Array.");
    
    MYDATA.forEach(function(p) {
        myNewContacts.push(new Contacts(p.Name,p.Address,p.Email));
    });
    console.log("There are " +myNewContacts.length + "Objects in the Array.");
} else {
    output.innerHTML ="No...