JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<form id="objectForm" name="objectForm" method="GET" action="#">
      <p>
        <label for="NameId">Name:</label>
        <input type="text" id="NameId" name="name" value="" />
      </p>
      <p>
        <label for="AddressId">Address:</label>
        <input type="text" id="AddressId" name="address" value="" />
      </p>
	  <p>
		<label for="EmailId">Email:</label>
		<input type="text" id="EmailId" name="email" value="" />
	  </p>
	  
      <input type="button" id="submitButton" name="submitBut" value="Add Contacts!">
    </form>

    <div id="Output">
    </div>

JavaScript

// Create an array to hold all of the PersonalDetail objects
var contacts = [];

// Create the Contacts "class"
function Contacts(Name, Address,Email) {
	this.Name = Name;
	this.Address = Address;
    this.Email=Email;	
}

function writeToPage (myContact) {
		var myOutput = document.getElementById("Output");

		console.log(myContact);

		// Create new paragraph node
		var paragraph = document.createElement("p");

		// Set the style of the paragraph
		paragraph.style.height = myContact.name + "px";
		paragraph.style.width  = myContact.address + "px";
		paragraph.style.width  = myContact.email + "px";
		paragraph.style.backgroundColor = myContact.color;

		// Add paragraph to the "Canvas"
		myOutput.appendChild(paragraph);
}

function submitContacts() {
	// Get values
    alert("Hi **")
	var name = document.getElementById("NameId").value;
	var address = document.getElementById("AddressId").value;
	var email = document.getElementById("EmailId").value;
	console.log("name: " + name + "; address: " + address + "email: " + email);

    // Write the square object to the page
	var myPersonalContacts = new Contacts(name, address,email);
    console.log(myPersonalContacts);
	writeToPage(myPersonalContacts);

	// Add square object to an array of square objects
	Contacts.push(myPersonalContacts);
	console.log(Contacts);

	// Write the array to local storage
	var jsonString = JSON.stringify(Contacts);
	console.log(jsonString);

	localStorage.setItem("contactsStorage", jsonString);

}

window.onload = function() {
	// Assign an onclick handler to the submit button
    alert("Hi");
	document.getElementById("submitButton").onclick = submitContacts;

	// Get all contact objects from local storage
	// and store in the global array
	var jsonString = localStorage.getItem("contactsStorage");
	if (jsonString) {
		Contacts = JSON.parse(jsonString);
	}
	console.log(Contacts);


	// Write the square objects to the page
	for (var i = 0; i < squares.length; i++)...