Checkpoint

./views/index.html:96831/760 ./public/vanilla-client.js:96831/1419 ./public/style.css:96831/47

Checkpoint
./views/index.html:96831/760 ./public/vanilla-client.js:96831/1419 ./public/style.css:96831/47
Glitch (hello-express)
Showing 3 changed files with 34 additions and 17 deletions
public/style.css
public/vanilla-client.js
views/index.html
--- a/public/style.css
View file @12f2f5e
+++ b/public/style.css
View file @12f2f5e
@@ -73,7 +73,3 @@ footer {
 footer > a {
  color: #BBBBBB;
 }  
-
-.nicejob {
-  text-decoration: line-through;
-}
--- a/public/vanilla-client.js
View file @12f2f5e
+++ b/public/vanilla-client.js
View file @12f2f5e
@@ -4,25 +4,42 @@
 (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'];
  
-  dreams.forEach( function(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();
    
-    const dream = 
+    // get dream value and add it to the list
+    dreams.push(dreamInput.value);
+    appendNewDream(dreamInput.value);
+  
+    // reset form 
+    dreamInput.value = '';
+    dreamInput.focus();
  };
  
 })()
--- a/views/index.html
View file @12f2f5e
+++ b/views/index.html
View file @12f2f5e
@@ -16,7 +16,15 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="/style.css">
+    
+    <script src="/vanilla-client.js" defer></script>
+    
+        
+    <!-- import the webpage's stylesheet -->
+    <link rel="stylesheet" href="/styles.css">
+    
+    <!-- import the webpage's javascript file -->
+    <script src="/vanilla-client.js" defer></script>
  </head>
  <body>
    <header>
@@ -27,15 +35,15 @@

    <main>
      <p class="bold">Oh hi,</p>
+      
      <p>Tell me your hopes and dreams:</p>
+      
      <form>
+        <input name="dream" type="text" maxlength="100" placeholder="Dreams!" aria-labelledby="submit-dream">
        
-        <label for="dream-input">
-          <input id="dream-input" type="text" maxlength="100" placeholder="Dreams!">
-        </label>
-        
-        <button type="submit">Submit</button>
+        <button type="submit" id="submit-dream">Submit Dream</button>
      </form>
+      
      <section class="dreams">
        <ul id="dreams">
        </ul>
@@ -43,15 +51,11 @@
    </main>

    <footer>
-      <a href="https://glitch.com">
-        Remix this in Glitch
-      </a>
+      Made with <a href="https://glitch.com">Glitch</a>
    </footer>


-    <script src="/vanilla-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 -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>