HTML Class Goal

by Kikketer

HTML

<h1>Hi world</h1>
<form id="nameForm">
  <label
    >First Name:
    <input type="text" name="firstname" />
    <button type="submit">Save</button>
    </button>
  </label>
</form>
<p id="name" class="hidden"></p>

CSS

h1 {
  color: purple;
}

.hidden {
  display: none;
}

JavaScript

let name = ''

function onSetName(theName) {
	name = theName
  document.getElementById('nameForm').classList.add('hidden')
  const nameDisplay = document.getElementById('name')
  nameDisplay.innerHTML = name
  nameDisplay.classList.remove('hidden')
}

document.getElementById("nameForm").addEventListener("submit", function (e) {
  e.preventDefault()
  e.stopPropagation()
  
  const formData = new FormData(e.target)
	/* alert('Hello ' + formData.get('firstname')) */
  /* name = formData.get('firstname') */
  onSetName(formData.get('firstname'))
  
  e.target.reset()
})