storage practice

by vcchavez_uri

HTML

<div id="infoInputs">
  <p>Please complete the short form below. All fields are required!</p>
  <form onSubmit="return false;">
    <label for="name">Name</label>
    <input id="name" required />
    <br>
    <label for="job">Job Title</label>
    <input id="job" required />
    <br>
    <input id="infoSubmit" type="submit" value="Submit" />
  </form>
</div>

<div id="results">
  <!-- results will go here -->
</div>

JavaScript

window.onload = function(){
	//add event listener for submit button
	document.getElementById("infoSubmit").addEventListener("click", saveInfo);
  
  //use this to test session vs local storage: 
  	// if using local storage: most recently used name and job should appear when you open this fiddle in a new tab/window 
    // if using session storage: should display null when you opefiddle in a new tab/window
  updateScreen();
};

function saveInfo() {
  // TODO store name and job 
  
  //update display
  updateScreen();
}

function updateScreen() {  
  //TODO populate result
  var name = ;//TODO
  var job = ;//TODO
  var res = "Hello " + name + " the " + job;
  var p = document.createElement("p");
  p.innerText = res;
  
  //display results
  document.getElementById("results").appendChild(p);
}