Skip to content

Jabis Sev贸n / gun-multiserver

Go to a project
Toggle navigation
Toggle navigation pinning
3b18fda5 by Glitch (hello-express)
Options

:bicyclist::japanese_castle: Checkpoint 

./views/index.html:334152/235
./public/client.js:334152/160
1 parent ecb46696
Inline Side-by-side
Showing 2 changed files with 20 additions and 24 deletions
public/client.js
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 };
......
views/index.html
...@@ -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>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!