🍕🌟 Checkpoint

./views/index.html:96831/368
./public/style.css:96831/36
./server.js:96831/437

public/client.js

@@ -1,9 +1,50 @@
 // client-side js
 // run by the browser each time your view template is loaded
 
-// by default, you've got jQuery,
+(function(){
-// add other scripts at the bottom of index.html
+  console.log('hello world :o');
   
+  // our default array of dreams
+  const dreams = [
+    'Find and count some sheep',
+    'Climb a really tall mountain',
+    'Wash the dishes'
+  ];
+  
+  // define variables that reference elements on our page
+  const dreamsList = document.getElementById('dreams');
+  const dreamsForm = document.forms[0];
+  const dreamInput = dreamsForm.elements['dream'];
+  
+  // a helper function that creates a list item for a given dream
+  const appendNewDream = function(dream) {
+    const newListItem = document.createElement('li');
+    newListItem.innerHTML = dream;
+    dreamsList.appendChild(newListItem);
+  }
+  
+  // iterate through every dream and add it to our page
+  dreams.forEach( function(dream) {
+    appendNewDream(dream);
+  });
+  
+  // listen for the form to be submitted and add a new dream when it is
+  dreamsForm.onsubmit = function(event) {
+    // stop our form submission from refreshing the page
+    event.preventDefault();
+    
+    // get dream value and add it to the list
+    dreams.push(dreamInput.value);
+    appendNewDream(dreamInput.value);
+  
+    // reset form 
+    dreamInput.value = '';
+    dreamInput.focus();
+  };
+  
+})()
+
+/*
 $(function() {
   console.log('hello world :o');
   
@@ -24,3 +65,4 @@ $(function() {
   });
 
 });
+*/

public/style.css

@@ -69,7 +69,3 @@ footer {
   padding-top: 25px;
   border-top: 1px solid lightgrey;
 }
-
-footer > a {
-  color: #BBBBBB;
-}  

public/vanilla-client.js

@@ -1,68 +0,0 @@
-// client-side js
-// run by the browser each time your view template is loaded
-
-(function(){
-  console.log('hello world :o');
-  
-  // our default array of dreams
-  const dreams = [
-    'Find and count some sheep',
-    'Climb a really tall mountain',
-    'Wash the dishes'
-  ];
-  
-  // define variables that reference elements on our page
-  const dreamsList = document.getElementById('dreams');
-  const dreamsForm = document.forms[0];
-  const dreamInput = dreamsForm.elements['dream'];
-  
-  // a helper function that creates a list item for a given dream
-  const appendNewDream = function(dream) {
-    const newListItem = document.createElement('li');
-    newListItem.innerHTML = dream;
-    dreamsList.appendChild(newListItem);
-  }
-  
-  // iterate through every dream and add it to our page
-  dreams.forEach( function(dream) {
-    appendNewDream(dream);
-  });
-  
-  // listen for the form to be submitted and add a new dream when it is
-  dreamsForm.onsubmit = function(event) {
-    // stop our form submission from refreshing the page
-    event.preventDefault();
-    
-    // get dream value and add it to the list
-    dreams.push(dreamInput.value);
-    appendNewDream(dreamInput.value);
-  
-    // reset form 
-    dreamInput.value = '';
-    dreamInput.focus();
-  };
-  
-})()
-
-/*
-$(function() {
-  console.log('hello world :o');
-  
-  $.get('/dreams', function(dreams) {
-    dreams.forEach(function(dream) {
-      $('<li></li>').text(dream).appendTo('ul#dreams');
-    });
-  });
-
-  $('form').submit(function(event) {
-    event.preventDefault();
-    var dream = $('input').val();
-    $.post('/dreams?' + $.param({dream: dream}), function() {
-      $('<li></li>').text(dream).appendTo('ul#dreams');
-      $('input').val('');
-      $('input').focus();
-    });
-  });
-
-});
-*/

server.js

@@ -16,23 +16,6 @@ app.get("/", function (request, response) {
   response.sendFile(__dirname + '/views/index.html');
 });
 
-app.get("/dreams", function (request, response) {
-  response.send(dreams);
-});
-
-// could also use the POST body instead of query string: http://expressjs.com/en/api.html#req.body
-app.post("/dreams", function (request, response) {
-  dreams.push(request.query.dream);
-  response.sendStatus(200);
-});
-
-// Simple in-memory store for now
-var dreams = [
-  "Find and count some sheep",
-  "Climb a really tall mountain",
-  "Wash the dishes"
-];
-
 // listen for requests :)
 var listener = app.listen(process.env.PORT, function () {
   console.log('Your app is listening on port ' + listener.address().port);

views/index.html

@@ -17,14 +17,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <script src="/vanilla-client.js" defer></script>
-    
-        
     <!-- import the webpage's stylesheet -->
-    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="/style.css">
-    
-    <!-- import the webpage's javascript file -->
-    <script src="/vanilla-client.js" defer></script>
   </head>
   <body>
     <header>
@@ -40,21 +34,21 @@
       
       <form>
         <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream">
-        
         <button type="submit" id="submit-dream">Submit Dream</button>
       </form>
       
       <section class="dreams">
-        <ul id="dreams">
+        <ul id="dreams"></ul>
-        </ul>
       </section>
     </main>
 
     <footer>
-      Made with <a href="https://glitch.com">Glitch</a>
+      Made with <a href="https://glitch.com">Glitch</a>!
     </footer>
     
     
+    <!-- import the webpage's client-side javascript file -->
+    <script src="/client.js"></script>
 
     <!-- include the Glitch button to show what the webpage is about and
           to make it easier for folks to view source and remix -->