JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<title>
  AddressBook</title>

<body>
  <form>
    <p>
      <label for="userName">Name:
        <input type="text" size="40" id="userName">
      </label><button id="doIt" class="button" style="color: white">Enter</button>
    </p>
    <p>
      <label for="userAddress">Address:
        <input type="text" size="38" id="userAddress">
      </label><button id="doIt" class="button" style="color: white">Enter</button>
    </p>
    <p>
      <label for="userEmail">Email:
        <input type="text" size="40" id="userEmail">
      </label><button id="doIt" class="button" style="color: white">Enter</button>

    </p>
    
  </form>
  <h2>My Records</h2>
        <div id="output">
        <div class="info infoHead"><div>Name:</div><div>Address:</div><div>Email:</div></div>
        </div>
<p id="output">
</p>
</body>

CSS

body {
  color: #0000ff;
  background-color: #ffffff;
  font-size: 18px;
}

button {
 background-color: blue;
  font-size: 18px;
  width: 65px;
  height: 30px;
}

JavaScript

/* hw2b.js */
"use strict";

(function(){
    

    
    var button = document.getElementById("doit");
    var nameview=document.getElementById("output"); 
    var infolist=[];
    
    var infolistStored=localStorage.getItem("infolistsave");
    if(infolistStored===null){
        infolist=[];
    }else{
        infolist=JSON.parse(infolistStored);
    }
    if(infolist.length>0){
        nameview.innerHTML=infolist.join("<br>");
    }
    
    
    
    button.onclick = function(){ 
        var name = document.getElementById("name").value;
        var address = document.getElementById("address").value;
        var email = document.getElementById("email").value;
        
        
        var data={
            name:name,
            addr:address,
            email:email,
        }
        
        writeRowToPage(data,nameview);
        
        console.log("infolistname ",name);
        infolist.push(name);
        String(infolist);
       
   
        localStorage.setItem("infolistsave", JSON.stringify(infolist));

        
        console.log("infolistname sum: ",infolist);
        
        nameview.innerHTML=infolist.join("<br>");
    
    function writeRowToPage(dataObject, element) {
        var s = "<div class=\"info\">";

        s+='<div class="nameDiv">';
        if (dataObject.name !== 'undefined') {
            s+=dataObject.name;
        }
        s+= '</div><div class="addrDiv">';
        if (dataObject.addr !== 'undefined') {
            s+=dataObject.addr;
        }
        s+= '</div><div class="emailDiv">';
        if (dataObject.email !== 'undefined') {
            s+=dataObject.email;
        }
        s+= '</div></div>';
    
        element.innerHTML += s;
    }

    
    

})();