JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<title>
  AddressBook</title>

<body>
  <form id="picker" onsubmit="return getVals">
    <p>
      <label for="value1">First Name
        <input type="text" size="40" id="fName">
      </label>
    </p>
    <p>
      <label for="value2">Last Name
        <input type="text" size="40" id="lName">
      </label>
    </p>
    <p>
      <label for="value3">Email
        <input type="text" size="40" id="eName">
      </label>

    </p>
    <p>
      <label for="value4">Phone Number
        <input type="text" size="40" id="pName">
      </label>
      
    </p>
    <button id="Submit" class="button" style="color: white">Validate</button>
  </form>
  <h2>My Records</h2>
        <div id="output">
        <div class="info"><div>First:</div><div>Second:</div>Third:<div>Fourth:</div></div>              
        </div>
</body>

CSS

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

button {
 background-color: blue;
  font-size: 18px;
  width: 100px;
  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;
}