craigquincy · shifaul · Feb 8, 2017 · Feb 8, 2017 · Feb 8, 2017 · Feb 8, 2017
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+ "extends": [
+    'airbnb'
+  ],
+  rules: {
+    "semi": "off",
+    "prefer-const": "off",
+    "no-implicit-globals": "off",
+    "strict": "off",
+    "quotes": "off",
+    "no-unused-vars": "off",
+    "no-else-return": "off",
+    "no-multiple-empty-lines": "off",
+    "no-shadow" : "off",
+    "comma-dangle" : "off",
+    "func-names" : "off",
+    "no-undef" : "off",
+    "no-restricted-syntax" : "off"
+  }
+};
+
diff --git a/css/style.css b/css/style.css
@@ -14,20 +14,60 @@ nav ul li {
   display: inline;
 }
 
+nav ul li a, nav ul li a:visited, nav ul li a:active {
+  color: white;
+}
+
+nav ul li a:link {
+  color: white;
+  text-decoration: none;
+}
+nav ul li a:hover {
+  color: #F15323;
+  text-decoration: underline;
+}
+
+.cards-container .card:nth-child(even) {
+  background-color: white;
+}
+
+.cards-container .card:nth-child(odd) {
+  background-color: #ccc;
+}
+
 .card {
+  float: left;
   margin: 2em;
   padding: 2em;
   border-radius: 5px;
 }
 
+.card h3 {
+  position: absolute;
+  margin: 80px 40px;
+}
+
 .card > img {
   height: 200px;
   width: 150px;
 }
 
+.clear {
+  clear: both;
+}
+
+input[type="text"]{
+  background-color: #76B821;
+  color: black;
+}
+
 footer {
   background-color: #F15323;
   width: 100%;
+  /*position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: -1;*/
 }
 
 footer p {

diff --git a/index.html b/index.html
@@ -3,21 +3,14 @@
     <head>
         <meta charset="utf-8">
         <title>Exploding Kittens</title>
+        <link rel="stylesheet" href="/css/normalize.css">
+        <link rel="stylesheet" href="/css/style.css">
+        <script src="/js/dom.js" charset="utf-8"></script>
     </head>
     <body>
         <nav>
             <img id="logo" src="images/exploding-kittens-logo.svg">
-            <ul class="menu">
-                <li>
-                    <a href="#about" id="aboutlink">Exploding Kittens</a>
-                </li>
-                <li>
-                    <a href="#cards">Cards</a>
-                </li>
-                <li>
-                    <a href="#rules">Rules</a>
-                </li>
-            </ul>
+            <!-- YOU DO: CREATE MENU -->
         </nav>
 
         <div class="main">
@@ -28,15 +21,6 @@
                 <a name="about">
                     <h2>About</h2>
                     <ul>
-                        <li>
-                            A CARD GAME FOR PEOPLE WHO ARE INTO
-                        </li>
-                        <li>
-                            KITTENS AND EXPLOSIONS AND LASER BEAMS
-                        </li>
-                        <li>
-                            AND SOMETIMES GOATS
-                        </li>
                     </ul>
                 </a>
             </div>
@@ -45,24 +29,12 @@ <h2>About</h2>
                 <a name="cards">
                     <h2>Cards</h2>
 
-                    <div class="card">
-                        <h3>Explode</h3>
-                        <img src="/images/explode.png">
-                    </div>
-
-                    <div class="card">
-                        <h3>Defuse</h3>
-                        <img src="/images/defuse.png">
-                    </div>
-
-                    <div class="card">
-                        <h3>Nope</h3>
-                        <img src="/images/nope.png">
-                    </div>
+                    <!-- WE DO -->
+                    <div class="cards-container"></div>
                 </a>
             </div>
 
-            <div class="rules">
+            <div class="rules clear">
                 <a name="rules">
                     <h2>Rules</h2>
                 </a>
@@ -94,7 +66,7 @@ <h2>Rules</h2>
             <p>Exploding Kittens is a neat game!</p>
             <form id="email-signup">
                 <input type="text" name="full_name" placeholder="name">
-                <input type="text" name="email" placeholder="email">
+                <input type="text" name="email" placeholder="email address">
                 <input type="submit" value="Email Signup">
             </form>
         </footer>

diff --git a/js/dom-solution.js b/js/dom-solution.js
@@ -0,0 +1,103 @@
+let aboutItems = [
+  'A CARD GAME FOR PEOPLE WHO ARE INTO',
+  'KITTENS AND EXPLOSIONS AND LASER BEAMS',
+  'AND SOMETIMES GOATS'
+]
+
+function createAboutList(aboutItems) {
+  let ul = document.querySelector('.about ul')
+  for (let text of aboutItems) {
+    console.log("appending ", text, " to ", ul);
+    let li = document.createElement('li')
+    li.innerHTML = text
+    ul.appendChild(li)
+  }
+}
+
+function removeAboutList() {
+  let ul = document.querySelector('.about ul')
+  let children = ul.children
+
+  // remove any items with AND in them
+  // this does not work because children length is changing while we
+  // are in this for loop
+  // for (let i =0; i <= children.length; i++) {
+  //   let node = children[i]
+  //   if (node.innerText.includes("AND")){
+  //     console.log("removing ", i, node);
+  //     ul.removeChild(node)
+  //   }
+  // }
+
+  let nodesToDelete = []
+  for (let node of children) {
+    if (node.innerText.includes("AND")) {
+      nodesToDelete.push(node)
+    }
+  }
+  // this does not work because children length is changing while we
+  // are in this for loop
+  for (let node of nodesToDelete) {
+    console.log('removing', node);
+    ul.removeChild(node)
+  }
+}
+
+
+// WE DO:
+// <div class="card">
+//     <h3>Explode</h3>
+//     <img src="/images/explode.png">
+// </div>
+function createCard(text, imageUrl) {
+  let div = document.createElement('div')
+  div.classList.add('card')
+
+  let h3 = document.createElement('h3')
+  h3.appendChild(document.createTextNode(text))
+  div.appendChild(h3)
+
+  let image = document.createElement('img')
+  image.setAttribute('src', imageUrl)
+  div.appendChild(image)
+
+  return div
+}
+
+function createExplodeCard() {
+  let card = createCard('Explode', "/images/explode.png")
+  document.querySelector('.cards-container').appendChild(card)
+}
+
+function defuseCard() {
+  let explodeCard = document.querySelector('.cards-container').firstChild
+  console.log("explodeCard", explodeCard);
+
+  let defuseCard = createCard('Defuse', '/images/defuse.png')
+
+  explodeCard.parentNode.replaceChild(defuseCard, explodeCard)
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+  createAboutList(aboutItems)
+  removeAboutList()
+  createExplodeCard()
+
+  setTimeout(() => { defuseCard() }, 2000)
+})
+
+
+
+// YOU DO: recreate the nav menu items, you will need to start by making th UL elem
+//            <ul class="menu">
+//                <li>
+//                    <a href="#about" id="aboutlink">Exploding Kittens</a>
+//                </li>
+//                <li>
+//                    <a href="#cards">Cards</a>
+//                </li>
+//                <li>
+//                    <a href="#rules">Rules</a>
+//                </li>
+//            </ul>
diff --git a/js/dom.js b/js/dom.js
@@ -0,0 +1,39 @@
+// I DO:
+// <li>
+//    A CARD GAME FOR PEOPLE WHO ARE INTO
+// </li>
+// <li>
+//     KITTENS AND EXPLOSIONS AND LASER BEAMS
+// </li> // <li>
+//     AND SOMETIMES GOATS
+// </li>
+
+
+// WE DO:
+// create the html for the explode card and add it to the .cards-container
+// <div class="card">
+//     <h3>Explode</h3>
+//     <img src="/images/explode.png">
+// </div>
+
+
+// YOU DO: recreate the nav menu items
+// HERE's a plan to follow:
+// create the UL
+// create an LI
+// create an A and setAttributes for the 'href' and 'id'
+// append the A to LI
+// append the LI to the UL
+// repeat for each LI ... maybe you want to use a loop or functions to help
+// finally add the UL to the NAV below the logo image
+//            <ul class="menu">
+//                <li>
+//                    <a href="#about" id="aboutlink">Exploding Kittens</a>
+//                </li>
+//                <li>
+//                    <a href="#cards">Cards</a>
+//                </li>
+//                <li>
+//                    <a href="#rules">Rules</a>
+//                </li>
+//            </ul>
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "exploding-kittens",
+  "version": "1.0.0",
+  "description": " ",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/craigquincy/exploding-kittens/issues"
+  },
+  "homepage": "https://github.com/craigquincy/exploding-kittens#readme"
+}