JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<h2>Address Book</h2>

<hr />

<!-- area for adding new customer to database -->   
<table width="300" id="userInput">
  <tr>
    <td align="right">Name: </td>
    <td><input type='text' id="customerName" / ></td>
  </tr>
  <tr>
    <td align="right">Email: </td>
    <td><input type='text' id="customerEmail" / ></td>
  </tr>
  <tr>
    <td align="right">Location</td>
    <td><input type='text' id="customerLocation" / ></td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td>
    	<button id="saveCustomer">Add to database</button>
		<button id="deleteDatabase">Empty database</button>        
    </td>
  </tr>
</table>

<hr />

   
<table width="600" id="address_list">
  <tr>
    <td><strong>ID</strong></td>
    <td><strong>Name</strong></td>
    <td><strong>Email</strong></td>
    <td><strong>Address</strong></td>   
  </tr>  
</table>

JavaScript

$(document).ready(function(){


	if(!localStorage.getItem("customerDatabase")){
		
	
		var contacts = {
			"users":[
				{
					"id":1,
					"name":"tom",
					"email":"[email protected]",
          "location":"tom st"
				},
				{
					"id":2,
					"name":"dick",
					"email":"[email protected]",	
          "location":"dick st"	
				}
        {
					"id":3,
					"name":"harry",
					"email":"[email protected]",	
          "location":"harry st"	
				}
			]	
		} 
		
		var stringObject = JSON.stringify(contacts);					
		var storedDatabase = localStorage.setItem("customerDatabase", stringObject);	  	  		  		    				
		
	} else {
		
		listJSONCustomers();		
	}	
	
	function listJSONCustomers(){
		
	  var displayHTML = "";
	  var i;
	  
	  var storedDatabase = localStorage.getItem("customerDatabase");	  
	  
	  var parseObject = JSON.parse(storedDatabase);	
	  
	  var userObject = parseObject.users;
	  
	  var contactsLength = userObject.length; 	  
	  
	  for(i=0; i<contactsLength; i++){
		  var trElement = '<tr id="address' + (i+1) + '">';
		  var tdId = '<td id="id' + (i+1) + '">' + userObject[i].id + '</td>';
		  var tdName = '<td id="' + (i+1) + 'name">' + userObject[i].name + '</td>';
		  var tdEmail = '<td id="' + (i+1) + 'email">' + userObject[i].email + '</td>';
      var tdEmail = '<td id="' + (i+1) + 'location">' + userObject[i].location + '</td>';
		  var tdButton = '<td><button isEditButton="true" id="' + userObject[i].id + 'editButton">Edit</button> | <button id="' + userObject[i].id + 'deleteButton">Delete</button></td>';
				  
		  displayHTML += trElement + tdId + tdName + tdEmail + tdLocation + tdButton + '</tr>';
	  }		
	
	  displayHTML = "<tr><td><strong>ID</strong></td><td><strong>Name</strong></td><td><strong>Email</strong></td><td><strong>Address</strong></td></tr>" + displayHTML;
	  
	  $('#address_list').html(displayHTML);		
	  
	}		
	
	
	
	$('#saveCustomer').click(function(){	

	
		$('#address_list tr').not('#address_list...