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

console.clear();
var output=document.getElementById('output');
output.innerHTML=" ";
var data=[];
function Contacts(Name,Address,Email){
    this.Name=Name;
    this.Address=Address;
    this.Email=Email;
    this.getContacts=function() {
        return this.Name + " " + this.Address + " " + this.Email;
    }
}

//data.push(Contacts);
data.push(new Contacts("Ray","Parkwood dr.","[email protected]"));
//data.push(new Contacts("John","Marsh Lane","[email protected]"));
//data.push(new Contacts("Steve","Imhoff Ave","[email protected]"));


var datalen=data.length;
for(var i=0;i<datalen;i++){
    console.log(data[i].getContacts());
}


var myData=JSON.stringify(data);

localStorage.setItem('data',myData);


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(' ');
    });
    
    console.log("Data:");
   
    var len= MYDATA.length;
    for(var i=0;i<len;i++){
        console.log(MYDATA[i].Name + " " + MYDATA[i].Address + " " + MYDATA[i].Email);
    }
    console.log(' ');
    
    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 people to process";
}