
Checkpoint
./views/index.html:96831/368 ./public/style.css:96831/36 ./server.js:96831/437
Showing
5 changed files
with
49 additions
and
102 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 | // by default, you've got jQuery, | 4 | (function(){ |
5 | // add other scripts at the bottom of index.html | 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 | })() | ||
6 | 46 | ||
47 | /* | ||
7 | $(function() { | 48 | $(function() { |
8 | console.log('hello world :o'); | 49 | console.log('hello world :o'); |
9 | 50 | ||
... | @@ -24,3 +65,4 @@ $(function() { | ... | @@ -24,3 +65,4 @@ $(function() { |
24 | }); | 65 | }); |
25 | 66 | ||
26 | }); | 67 | }); |
68 | */ | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
public/vanilla-client.js
deleted
100644 → 0
1 | // client-side js | ||
2 | // run by the browser each time your view template is loaded | ||
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 | })() | ||
46 | |||
47 | /* | ||
48 | $(function() { | ||
49 | console.log('hello world :o'); | ||
50 | |||
51 | $.get('/dreams', function(dreams) { | ||
52 | dreams.forEach(function(dream) { | ||
53 | $('<li></li>').text(dream).appendTo('ul#dreams'); | ||
54 | }); | ||
55 | }); | ||
56 | |||
57 | $('form').submit(function(event) { | ||
58 | event.preventDefault(); | ||
59 | var dream = $('input').val(); | ||
60 | $.post('/dreams?' + $.param({dream: dream}), function() { | ||
61 | $('<li></li>').text(dream).appendTo('ul#dreams'); | ||
62 | $('input').val(''); | ||
63 | $('input').focus(); | ||
64 | }); | ||
65 | }); | ||
66 | |||
67 | }); | ||
68 | */ | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -16,23 +16,6 @@ app.get("/", function (request, response) { | ... | @@ -16,23 +16,6 @@ app.get("/", function (request, response) { |
16 | response.sendFile(__dirname + '/views/index.html'); | 16 | response.sendFile(__dirname + '/views/index.html'); |
17 | }); | 17 | }); |
18 | 18 | ||
19 | app.get("/dreams", function (request, response) { | ||
20 | response.send(dreams); | ||
21 | }); | ||
22 | |||
23 | // could also use the POST body instead of query string: http://expressjs.com/en/api.html#req.body | ||
24 | app.post("/dreams", function (request, response) { | ||
25 | dreams.push(request.query.dream); | ||
26 | response.sendStatus(200); | ||
27 | }); | ||
28 | |||
29 | // Simple in-memory store for now | ||
30 | var dreams = [ | ||
31 | "Find and count some sheep", | ||
32 | "Climb a really tall mountain", | ||
33 | "Wash the dishes" | ||
34 | ]; | ||
35 | |||
36 | // listen for requests :) | 19 | // listen for requests :) |
37 | var listener = app.listen(process.env.PORT, function () { | 20 | var listener = app.listen(process.env.PORT, function () { |
38 | console.log('Your app is listening on port ' + listener.address().port); | 21 | console.log('Your app is listening on port ' + listener.address().port); | ... | ... |
... | @@ -17,14 +17,8 @@ | ... | @@ -17,14 +17,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 | 19 | ||
20 | <script src="/vanilla-client.js" defer></script> | ||
21 | |||
22 | |||
23 | <!-- import the webpage's stylesheet --> | 20 | <!-- import the webpage's stylesheet --> |
24 | <link rel="stylesheet" href="/styles.css"> | 21 | <link rel="stylesheet" href="/style.css"> |
25 | |||
26 | <!-- import the webpage's javascript file --> | ||
27 | <script src="/vanilla-client.js" defer></script> | ||
28 | </head> | 22 | </head> |
29 | <body> | 23 | <body> |
30 | <header> | 24 | <header> |
... | @@ -40,21 +34,21 @@ | ... | @@ -40,21 +34,21 @@ |
40 | 34 | ||
41 | <form> | 35 | <form> |
42 | <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream"> | 36 | <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream"> |
43 | |||
44 | <button type="submit" id="submit-dream">Submit Dream</button> | 37 | <button type="submit" id="submit-dream">Submit Dream</button> |
45 | </form> | 38 | </form> |
46 | 39 | ||
47 | <section class="dreams"> | 40 | <section class="dreams"> |
48 | <ul id="dreams"> | 41 | <ul id="dreams"></ul> |
49 | </ul> | ||
50 | </section> | 42 | </section> |
51 | </main> | 43 | </main> |
52 | 44 | ||
53 | <footer> | 45 | <footer> |
54 | Made with <a href="https://glitch.com">Glitch</a> | 46 | Made with <a href="https://glitch.com">Glitch</a>! |
55 | </footer> | 47 | </footer> |
56 | 48 | ||
57 | 49 | ||
50 | <!-- import the webpage's client-side javascript file --> | ||
51 | <script src="/client.js"></script> | ||
58 | 52 | ||
59 | <!-- include the Glitch button to show what the webpage is about and | 53 | <!-- include the Glitch button to show what the webpage is about and |
60 | to make it easier for folks to view source and remix --> | 54 | to make it easier for folks to view source and remix --> | ... | ... |
-
Please register or sign in to post a comment