👋👩‍❤️‍💋‍👩 Checkpoint

./views/index.html:1954897/15462
./public/styles.css:1954897/70
./public/script.js:1954897/1246

public/client.js

@@ -1,42 +0,0 @@
-// client-side js
-// run by the browser each time your view template is loaded
-
-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();
-};

public/styles.css

@@ -46,7 +46,7 @@ body {
   color: #fafafa;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   line-height: 1.5;
-  font-size: 16px;
+  font-size: 18px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -63,7 +63,6 @@ body {
 }
 
 .lead {
-  font-size: 18px;
   text-align: center;
 }
 .btn {
@@ -72,9 +71,10 @@ body {
   display: block;
   color: inherit;
   font: inherit;
+  font-size: 16px;
   border: 2px solid var(--accent);
   border-radius: .2em;
-  padding: .75em;
+  padding: .87em 2em;
 }
 .btn:hover {
   background: rgba(255,255,255, 0.04)

views/index.html

@@ -27,7 +27,7 @@
                 <h1>Tabú</h1>
                 <p>
                     Cada quien tendrá una palabra o frase en la frente.<br>
-                    El objetivo es hacer que estos la digan.
+                    El objetivo es hacer que la digan.
                 </p>
             </div>
             <noscript>
@@ -35,15 +35,19 @@
             </noscript>
             <div class="flex no-js-hide">
                 <button class="btn">Jugar</button>
-                <button class="btn">Repasar las reglas</button>
+                <button class="btn" onclick="main.hidden = true; rules.hidden = false;">Repasar las reglas</button>
             </div>
         </div>
-        <div class="container" id="view-2" hidden>
+        <div class="container" id="rules" hidden>
             <h1>Reglas</h1>
             <p>
-                Cada quien tendrá una palabra o frase en la frente.<br>
-                El objetivo es hacer que estos la digan.
+                Cada quien tendrá una palabra o frase en la frente. El objetivo es hacer que la digan.
             </p>
+            <button class="btn" onclick="main.hidden = false; rules.hidden = true;">Entendido</button>
+        </div>
+        <div class="container" id="view2" hidden>
+            
         </div>
     </body>
+    <script src="./script.js" charset="utf-8"></script>
 </html>