Checkpoint
./views/index.html:96831/760 ./public/vanilla-client.js:96831/1419 ./public/style.css:96831/47
Showing
3 changed files
with
34 additions
and
17 deletions
| ... | @@ -4,25 +4,42 @@ | ... | @@ -4,25 +4,42 @@ |
| 4 | (function(){ | 4 | (function(){ |
| 5 | console.log('hello world :o'); | 5 | console.log('hello world :o'); |
| 6 | 6 | ||
| 7 | // our default array of dreams | ||
| 7 | const dreams = [ | 8 | const dreams = [ |
| 8 | 'Find and count some sheep', | 9 | 'Find and count some sheep', |
| 9 | 'Climb a really tall mountain', | 10 | 'Climb a really tall mountain', |
| 10 | 'Wash the dishes' | 11 | 'Wash the dishes' |
| 11 | ]; | 12 | ]; |
| 12 | 13 | ||
| 14 | // define variables that reference elements on our page | ||
| 13 | const dreamsList = document.getElementById('dreams'); | 15 | const dreamsList = document.getElementById('dreams'); |
| 14 | const dreamsForm = document.forms[0]; | 16 | const dreamsForm = document.forms[0]; |
| 17 | const dreamInput = dreamsForm.elements['dream']; | ||
| 15 | 18 | ||
| 16 | dreams.forEach( function(dream) { | 19 | // a helper function that creates a list item for a given dream |
| 20 | const appendNewDream = function(dream) { | ||
| 17 | const newListItem = document.createElement('li'); | 21 | const newListItem = document.createElement('li'); |
| 18 | newListItem.innerHTML = dream; | 22 | newListItem.innerHTML = dream; |
| 19 | dreamsList.appendChild(newListItem); | 23 | dreamsList.appendChild(newListItem); |
| 24 | } | ||
| 25 | |||
| 26 | // iterate through every dream and add it to our page | ||
| 27 | dreams.forEach( function(dream) { | ||
| 28 | appendNewDream(dream); | ||
| 20 | }); | 29 | }); |
| 21 | 30 | ||
| 31 | // listen for the form to be submitted and add a new dream when it is | ||
| 22 | dreamsForm.onsubmit = function(event) { | 32 | dreamsForm.onsubmit = function(event) { |
| 33 | // stop our form submission from refreshing the page | ||
| 23 | event.preventDefault(); | 34 | event.preventDefault(); |
| 24 | 35 | ||
| 25 | const dream = | 36 | // get dream value and add it to the list |
| 37 | dreams.push(dreamInput.value); | ||
| 38 | appendNewDream(dreamInput.value); | ||
| 39 | |||
| 40 | // reset form | ||
| 41 | dreamInput.value = ''; | ||
| 42 | dreamInput.focus(); | ||
| 26 | }; | 43 | }; |
| 27 | 44 | ||
| 28 | })() | 45 | })() | ... | ... |
| ... | @@ -16,7 +16,15 @@ | ... | @@ -16,7 +16,15 @@ |
| 16 | <meta charset="utf-8"> | 16 | <meta charset="utf-8"> |
| 17 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 17 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| 18 | <meta name="viewport" content="width=device-width, initial-scale=1"> | 18 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 19 | <link rel="stylesheet" href="/style.css"> | 19 | |
| 20 | <script src="/vanilla-client.js" defer></script> | ||
| 21 | |||
| 22 | |||
| 23 | <!-- import the webpage's stylesheet --> | ||
| 24 | <link rel="stylesheet" href="/styles.css"> | ||
| 25 | |||
| 26 | <!-- import the webpage's javascript file --> | ||
| 27 | <script src="/vanilla-client.js" defer></script> | ||
| 20 | </head> | 28 | </head> |
| 21 | <body> | 29 | <body> |
| 22 | <header> | 30 | <header> |
| ... | @@ -27,15 +35,15 @@ | ... | @@ -27,15 +35,15 @@ |
| 27 | 35 | ||
| 28 | <main> | 36 | <main> |
| 29 | <p class="bold">Oh hi,</p> | 37 | <p class="bold">Oh hi,</p> |
| 38 | |||
| 30 | <p>Tell me your hopes and dreams:</p> | 39 | <p>Tell me your hopes and dreams:</p> |
| 31 | <form> | ||
| 32 | 40 | ||
| 33 | <label for="dream-input"> | 41 | <form> |
| 34 | <input id="dream-input" type="text" maxlength="100" placeholder="Dreams!"> | 42 | <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream"> |
| 35 | </label> | ||
| 36 | 43 | ||
| 37 | <button type="submit">Submit</button> | 44 | <button type="submit" id="submit-dream">Submit Dream</button> |
| 38 | </form> | 45 | </form> |
| 46 | |||
| 39 | <section class="dreams"> | 47 | <section class="dreams"> |
| 40 | <ul id="dreams"> | 48 | <ul id="dreams"> |
| 41 | </ul> | 49 | </ul> |
| ... | @@ -43,14 +51,10 @@ | ... | @@ -43,14 +51,10 @@ |
| 43 | </main> | 51 | </main> |
| 44 | 52 | ||
| 45 | <footer> | 53 | <footer> |
| 46 | <a href="https://glitch.com"> | 54 | Made with <a href="https://glitch.com">Glitch</a> |
| 47 | Remix this in Glitch | ||
| 48 | </a> | ||
| 49 | </footer> | 55 | </footer> |
| 50 | 56 | ||
| 51 | 57 | ||
| 52 | <script src="/vanilla-client.js"></script> | ||
| 53 | |||
| 54 | 58 | ||
| 55 | <!-- include the Glitch button to show what the webpage is about and | 59 | <!-- include the Glitch button to show what the webpage is about and |
| 56 | to make it easier for folks to view source and remix --> | 60 | to make it easier for folks to view source and remix --> | ... | ... |
-
Please register or sign in to post a comment