From 12f2f5e223565bcf42cb5ad394d71fa1835ed748 Mon Sep 17 00:00:00 2001 From: "Glitch (hello-express)" Date: Mon, 19 Mar 2018 21:03:02 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=A5=F0=9F=98=8E=20Checkpoint=20./views?= =?UTF-8?q?/index.html:96831/760=20./public/vanilla-client.js:96831/1419?= =?UTF-8?q?=20./public/style.css:96831/47?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/style.css | 4 ---- public/vanilla-client.js | 21 +++++++++++++++++++-- views/index.html | 26 +++++++++++++++----------- 3 files changed, 34 insertions(+), 17 deletions(-) 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 @@
- -