JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<h1>Address Book Application</h1>

<hr />  
<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">Address:</td>
    <td><input type='text' id="customerAddress" / ></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>Name</strong></td>
    <td><strong>Email</strong></td>
     <td><strong>Location</strong></td>
         <td><strong>Actions</strong></td>
  </tr>  
</table>

JavaScript

$(document).ready(function(){

	if(!localStorage.getItem("customerDatabase")){
		
		var contacts = {
			"users":[
				{
					"id":1,
					"name":"tom",
					"email":"[email protected]",
          "location":"123 Main St"
				},
				{
					"id":2,
					"name":"dick",
					"email":"[email protected]"
          "location":"456 Lane St"		
				},
				{
					"id":3,
					"name":"harry",
					"email":"[email protected]"
          "location":"789@York 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 tdLocation = '<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>Location</strong></td><td><strong>Actions</strong></td></tr>" + displayHTML;
	  
	  $('#address_list').html(displayHTML);		
	  
	}		
	
	$('#saveCustomer').click(function(){	

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