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 42 additions and 46 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(){
5 console.log('hello world :o');
6
7 // our default array of dreams
8 const dreams = [
9 'Find and count some sheep',
10 'Climb a really tall mountain',
11 'Wash the dishes'
12 ];
13
14 // define variables that reference elements on our page
15 const dreamsList = document.getElementById('dreams');
16 const dreamsForm = document.forms[0];
17 const dreamInput = dreamsForm.elements['dream'];
18
19 // a helper function that creates a list item for a given dream
20 const appendNewDream = function(dream) {
21 const newListItem = document.createElement('li');
22 newListItem.innerHTML = dream;
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);
29 });
30
31 // listen for the form to be submitted and add a new dream when it is
32 dreamsForm.onsubmit = function(event) {
33 // stop our form submission from refreshing the page
34 event.preventDefault();
35
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();
43 };
44
45 })()
...\ No newline at end of file ...\ No newline at end of file
4 console.log('hello world :o');
5
6 // our default array of dreams
7 const dreams = [
8 'Find and count some sheep',
9 'Climb a really tall mountain',
10 'Wash the dishes'
11 ];
12
13 // define variables that reference elements on our page
14 const dreamsList = document.getElementById('dreams');
15 const dreamsForm = document.forms[0];
16 const dreamInput = dreamsForm.elements['dream'];
17
18 // a helper function that creates a list item for a given dream
19 const appendNewDream = function(dream) {
20 const newListItem = document.createElement('li');
21 newListItem.innerHTML = dream;
22 dreamsList.appendChild(newListItem);
23 }
24
25 // iterate through every dream and add it to our page
26 dreams.forEach( function(dream) {
27 appendNewDream(dream);
28 });
29
30 // listen for the form to be submitted and add a new dream when it is
31 dreamsForm.onsubmit = function(event) {
32 // stop our form submission from refreshing the page
33 event.preventDefault();
34
35 // get dream value and add it to the list
36 dreams.push(dreamInput.value);
37 appendNewDream(dreamInput.value);
38
39 // reset form
40 dreamInput.value = '';
41 dreamInput.focus();
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>
...@@ -45,10 +48,6 @@ ...@@ -45,10 +48,6 @@
45 <footer> 48 <footer>
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
49
50 <!-- import the webpage's client-side javascript file -->
51 <script src="/client.js"></script>
52 51
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 -->
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!