How to make a mad lib in JavaScript?

To make a mad lib in JavaScript, build a form, then on submit concatenate all fields into a sentence.

Save this into a file called madlib.html:

<form id="form">
  <label>Adjective 1:</label> <input id="adjective1" required><br />
  <label>Adjective 2:</label> <input id="adjective2" required><br />
  <label>Article of Clothing:</label> <input id="clothing" required><br />
  <label>Liquid:</label> <input id="liquid" required><br />
  <label>Room:</label> <input id="room" required><br />
  <label>Part of the Body:</label> <input id="bodypart" required><br />
  <label>Verb:</label> <input id="verb" required><br />
  <button>Submit</button>
</form>
<div id="result"></div>
<script>
document.getElementById("form").addEventListener("submit", event => {
  event.preventDefault();
  document.getElementById("result").textContent = `
    On a ${document.getElementById("adjective1").value} December day,
    I woke up to the ${document.getElementById("adjective2").value} smell of ${document.getElementById("liquid").value} percolating in the ${document.getElementById("room").value} downstairs.
    I wrapped my ${document.getElementById("bodypart").value} in a warm ${document.getElementById("clothing").value} and sat down to ${document.getElementById("verb").value}.
  `;
});
</script>

Then open madlib.html in Chrome.

Try it out live!