Form with Output

[PatrickFrankAIU]

Create a form with the following instructions:

1) Use this HTML structure:

<form id="userForm">
    <input type="text" id="name" placeholder="Your Name">
    <input type="email" id="email" placeholder="Your Email">
    <input type="number" id="age" placeholder="Your Age">
    <input type="text" id="city" placeholder="Your City">
    <button type="button" onclick="displayResults()">Submit</button>
</form>

<div id="outDIV">
    <!-- Output will be displayed here -->
</div>

2) In Javascript, create a function called displayResults() with five variables within it, for name, email, age, city, and output.

3) Within displayResults(), use the getElementById function (from the DOM) to assign the "result" <div> to the output variable.

4) Within displayResults(), use the getElementById function (from the DOM) to assign the values coming from each input to the four input variables (name, email, age and city). (Use the .value property.)

5) Use the innerHTML function to display the data entered by the user in the "result" div, setting it to concatenated text that explains what field each value came from (example: "Name: Pat Frank"). Use the <p> tag within the output string to place each output value on a new line within the output div.

Stretch goal: Add a button to the page that calls another JavaScript function (via onclick) to reset the page to the default state and empty out the input fields. Mark this button "reset".