diff --git a/public/style.css b/public/style.css index f709586..4d29ffc 100644 --- a/public/style.css +++ b/public/style.css @@ -73,7 +73,3 @@ footer { footer > a { color: #BBBBBB; } - -.nicejob { - text-decoration: line-through; -} diff --git a/public/vanilla-client.js b/public/vanilla-client.js index bdfe715..d23fd86 100644 --- a/public/vanilla-client.js +++ b/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(); }; })() diff --git a/views/index.html b/views/index.html index b2ba18c..5adbb14 100644 --- a/views/index.html +++ b/views/index.html @@ -16,7 +16,15 @@ - + + + + + + + + +
@@ -27,15 +35,15 @@

Oh hi,

+

Tell me your hopes and dreams:

+
+ - - - +
+
@@ -43,15 +51,11 @@
- -