12f2f5e2 by Glitch (hello-express)

:hatched_chick::sunglasses: Checkpoint

./views/index.html:96831/760
./public/vanilla-client.js:96831/1419
./public/style.css:96831/47
1 parent c971f420
...@@ -73,7 +73,3 @@ footer { ...@@ -73,7 +73,3 @@ footer {
73 footer > a { 73 footer > a {
74 color: #BBBBBB; 74 color: #BBBBBB;
75 } 75 }
76
77 .nicejob {
78 text-decoration: line-through;
79 }
......
...@@ -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 -->
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!