Untitled

<meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Hands-on Project 4-3</title>
   <link rel="stylesheet" href="styles.css" />
   <script src="modernizr.custom.05819.js"></script>
</head>

<body>
   <header>
      <h1>
         Hands-on Project 4-3
      </h1>
   </header>

   <article>
      <div id="results">
          <p id="resultsExpl"></p>
          <ul>
             <li id="item1"></li>
             <li id="item2"></li>
             <li id="item3"></li>
             <li id="item4"></li>
             <li id="item5"></li>
          </ul>
      </div>
      <form>
          <fieldset>
            <label for="placeBox" id="placeLabel">
              Type the name of a place, then click Submit:
            </label>
            <input type="text" id="placeBox" />
          </fieldset>
          <fieldset>
            <button type="button" id="button" onclick="processInput()">Submit</button>
          </fieldset>
      </form>
   </article>
   <script>
       var places = []; // new array to store entered places

    //define variable for HTML elements
    var placeBox = document.getElementById("placeBox");

    // function to add input to array and then generate list after 5th submission
    function processInput() {
        places.push(placeBox.value); // add input value to array
        placeBox.value = ""; // clear input value
        placeBox.focus(); // set cursor back in input element
        if (places.length >= 5) {
            document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
            // populate UL element with LI elements
            for (var i = 0; i < 5; i++) {
                // get item
                var li = document.getElementById('item'+(i+1));
                li.innerHTML = places[i]; // put place text in it
            }
            // Clear array in case user starts again
            places = [];
        }

     }
   </script>
</body>
</html>