
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