JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<title>
  AddressBook</title>
  <h2>Address Book</h2>
<body>
  <form id="picker" onsubmit="return getVals">
    <p>
      <label for="First Name">First Name:
        <input type="text" size="40" id="userName">
      </label>
    </p>
    <p>
      <label for="Last Name">Last Name:
        <input type="text" size="40" id="userAddress">
      </label>
    </p>
    <p>
      <label for="Address">Address:
        <input type="text" size="43" id="userEmail">
      </label>

    </p>
    <p>
      <label for="Email:">Email:
        <input type="text" size="43" id="userEmail">
      </label>

    </p>
    <button id="result" class="button" style="color: white">Save</button>
  </form>
  <h2>My Records</h2>
        <div id="output">
        <div class="info"><div>First:</div><div>Second:</div>Third<div>Fourth:</div></div>
        <input type="submit" value="Validate"/>
        
        </div>

</body>

CSS

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

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

JavaScript

//get the form element names and values
function getVals() {
	var addr = document.getElementById(AddressBook).info
  var addrArray = new Object();
  for (var i= 0; i < addr.length; i++) {
  	if (elems[i].id = addr[i].info)
  }

checkVals(elemArray);
return false;
}
//check values
function checkVals(elemArray) {
str+=key + ","
for (var key in elemArray)[key] + " ";
}

document.getElementById("result").innerHTML = str;
}