406fcf36 by Glitch (hello-express)

:pizza::star2: Checkpoint

./views/index.html:96831/368
./public/style.css:96831/36
./server.js:96831/437
1 parent 12f2f5e2
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
......
...@@ -69,7 +69,3 @@ footer { ...@@ -69,7 +69,3 @@ footer {
69 padding-top: 25px; 69 padding-top: 25px;
70 border-top: 1px solid lightgrey; 70 border-top: 1px solid lightgrey;
71 } 71 }
72
73 footer > a {
74 color: #BBBBBB;
75 }
......
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 -->
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!