🐥😎 Checkpoint

./views/index.html:96831/760
./public/vanilla-client.js:96831/1419
./public/style.css:96831/47

public/style.css

@@ -73,7 +73,3 @@ footer {
 footer > a {
   color: #BBBBBB;
 }  
-
-.nicejob {
-  text-decoration: line-through;
-}

public/vanilla-client.js

@@ -4,25 +4,42 @@
 (function(){
   console.log('hello world :o');
   
+  // our default array of dreams
   const dreams = [
     'Find and count some sheep',
     'Climb a really tall mountain',
     'Wash the dishes'
   ];
   
+  // define variables that reference elements on our page
   const dreamsList = document.getElementById('dreams');
   const dreamsForm = document.forms[0];
+  const dreamInput = dreamsForm.elements['dream'];
   
-  dreams.forEach( function(dream) {
+  // a helper function that creates a list item for a given dream
+  const appendNewDream = function(dream) {
     const newListItem = document.createElement('li');
     newListItem.innerHTML = dream;
     dreamsList.appendChild(newListItem);
+  }
+  
+  // iterate through every dream and add it to our page
+  dreams.forEach( function(dream) {
+    appendNewDream(dream);
   });
   
+  // listen for the form to be submitted and add a new dream when it is
   dreamsForm.onsubmit = function(event) {
+    // stop our form submission from refreshing the page
     event.preventDefault();
     
-    const dream = 
+    // get dream value and add it to the list
+    dreams.push(dreamInput.value);
+    appendNewDream(dreamInput.value);
+  
+    // reset form 
+    dreamInput.value = '';
+    dreamInput.focus();
   };
   
 })()