Rules
@@ -94,7 +66,7 @@
Rules
Exploding Kittens is a neat game!
diff --git a/js/dom-solution.js b/js/dom-solution.js
new file mode 100644
index 0000000..3d807a2
--- /dev/null
+++ 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:
+//
+//
Explode
+//
+//
+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
+//
diff --git a/js/dom.js b/js/dom.js
new file mode 100644
index 0000000..feef225
--- /dev/null
+++ b/js/dom.js
@@ -0,0 +1,39 @@
+// I DO:
+//
+// A CARD GAME FOR PEOPLE WHO ARE INTO
+//
+//
+// KITTENS AND EXPLOSIONS AND LASER BEAMS
+// //
+// AND SOMETIMES GOATS
+//
+
+
+// WE DO:
+// create the html for the explode card and add it to the .cards-container
+//
+//
Explode
+//
+//
+
+
+// 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
+//
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..be0636b
--- /dev/null
+++ 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"
+}
\ No newline at end of file
- 
-