
Checkpoint
./views/index.html:334152/235 ./public/client.js:334152/160
Showing
2 changed files
with
20 additions
and
24 deletions
1 | // client-side js | 1 | // client-side js |
2 | // run by the browser each time your view template is loaded | 2 | // run by the browser each time your view template is loaded |
3 | 3 | ||
4 | (function(){ | 4 | console.log('hello world :o'); |
5 | console.log('hello world :o'); | ||
6 | 5 | ||
7 | // our default array of dreams | 6 | // our default array of dreams |
8 | const dreams = [ | 7 | const dreams = [ |
9 | 'Find and count some sheep', | 8 | 'Find and count some sheep', |
10 | 'Climb a really tall mountain', | 9 | 'Climb a really tall mountain', |
11 | 'Wash the dishes' | 10 | 'Wash the dishes' |
12 | ]; | 11 | ]; |
13 | 12 | ||
14 | // define variables that reference elements on our page | 13 | // define variables that reference elements on our page |
15 | const dreamsList = document.getElementById('dreams'); | 14 | const dreamsList = document.getElementById('dreams'); |
16 | const dreamsForm = document.forms[0]; | 15 | const dreamsForm = document.forms[0]; |
17 | const dreamInput = dreamsForm.elements['dream']; | 16 | const dreamInput = dreamsForm.elements['dream']; |
18 | 17 | ||
19 | // a helper function that creates a list item for a given dream | 18 | // a helper function that creates a list item for a given dream |
20 | const appendNewDream = function(dream) { | 19 | const appendNewDream = function(dream) { |
21 | const newListItem = document.createElement('li'); | 20 | const newListItem = document.createElement('li'); |
22 | newListItem.innerHTML = dream; | 21 | newListItem.innerHTML = dream; |
23 | dreamsList.appendChild(newListItem); | 22 | dreamsList.appendChild(newListItem); |
24 | } | 23 | } |
25 | 24 | ||
26 | // iterate through every dream and add it to our page | 25 | // iterate through every dream and add it to our page |
27 | dreams.forEach( function(dream) { | 26 | dreams.forEach( function(dream) { |
28 | appendNewDream(dream); | 27 | appendNewDream(dream); |
29 | }); | 28 | }); |
30 | 29 | ||
31 | // listen for the form to be submitted and add a new dream when it is | 30 | // listen for the form to be submitted and add a new dream when it is |
32 | dreamsForm.onsubmit = function(event) { | 31 | dreamsForm.onsubmit = function(event) { |
33 | // stop our form submission from refreshing the page | 32 | // stop our form submission from refreshing the page |
34 | event.preventDefault(); | 33 | event.preventDefault(); |
35 | 34 | ||
... | @@ -40,6 +39,4 @@ | ... | @@ -40,6 +39,4 @@ |
40 | // reset form | 39 | // reset form |
41 | dreamInput.value = ''; | 40 | dreamInput.value = ''; |
42 | dreamInput.focus(); | 41 | dreamInput.focus(); |
43 | }; | ||
44 | |||
45 | })() | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
42 | }; | ... | ... |
... | @@ -19,6 +19,9 @@ | ... | @@ -19,6 +19,9 @@ |
19 | 19 | ||
20 | <!-- import the webpage's stylesheet --> | 20 | <!-- import the webpage's stylesheet --> |
21 | <link rel="stylesheet" href="/style.css"> | 21 | <link rel="stylesheet" href="/style.css"> |
22 | |||
23 | <!-- import the webpage's client-side javascript file --> | ||
24 | <script src="/client.js" defer></script> | ||
22 | </head> | 25 | </head> |
23 | <body> | 26 | <body> |
24 | <header> | 27 | <header> |
... | @@ -46,10 +49,6 @@ | ... | @@ -46,10 +49,6 @@ |
46 | Made with <a href="https://glitch.com">Glitch</a>! | 49 | Made with <a href="https://glitch.com">Glitch</a>! |
47 | </footer> | 50 | </footer> |
48 | 51 | ||
49 | |||
50 | <!-- import the webpage's client-side javascript file --> | ||
51 | <script src="/client.js"></script> | ||
52 | |||
53 | <!-- include the Glitch button to show what the webpage is about and | 52 | <!-- include the Glitch button to show what the webpage is about and |
54 | to make it easier for folks to view source and remix --> | 53 | to make it easier for folks to view source and remix --> |
55 | <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> | 54 | <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div> | ... | ... |
-
Please register or sign in to post a comment