resolve merge conflict

README.md

@@ -2,8 +2,6 @@
 
 Practice manipulating the DOM!
 
-## Part One:
-
 In a separate JS file:
 
 When the page loads:
@@ -14,14 +12,6 @@ When the page loads:
 
 3. Create an image tag, set its `src` attribute to `http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif`, and append the to the `#greeting` div.
 
-4. Create and add a ul element to the end of the body with a class of "todo-items"
-
-5. Go through the array `['make coffee','eat donut','change diapers','drive to work']` and create an li element for each item e.g. `<li>make coffee</li>`
-
-6. Add each newly created li element to your ul of class "todo-items"
-
-## Part Two:
-
 Afterwards: 
 
 4. Add the class of `selected` to an `<li>` when it is clicked. Remove it from any other `li`s as well.
@@ -36,4 +26,4 @@ Afterwards:
 
 9. When the 1, 2, 3, 4, 5, 6, 7, 8, 9, or 0 key is pressed, the page alerts the message "I HATE NUMBERZZZ!"
 
-BONUS: If someone types the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"
+BONUS: If someone types the [Konami Code](https://en.wikipedia.org/wiki/Konami_Code), the page alerts "YOU ARE AN EVENT HANDLER GURUUUUUUUUU!"

app.js

@@ -1,94 +1,73 @@
-document.addEventListener('DOMContentLoaded',()=>{
+window.onload = function() {
-	console.log("Javascript is alive!")
+
-	var greeting = document.getElementById("greeting")
+  // change greeting
-	greeting.innerHTML="Hello, World!"
+  var greeting_div = document.getElementById("greeting");
-	var listelements = document.getElementsByTagName("li")
+  greeting_div.innerHTML = "Hello, World!";
-	for (var i=0;i<listelements.length;i++) {
+
-		listelements[i].style="background-color:yellow;"
+  // set background on lis and add event listener
-	}
+  var list_items = document.querySelectorAll("li");
-	var greeting = document.querySelector("#greeting")
+  for (var i = list_items.length - 1; i >= 0; i--) {
-	
+    list_items[i].style.backgroundColor = "yellow";
-	var newimg = document.createElement("img")
+    list_items[i].addEventListener("click", selectItem);
-	newimg.classList.add("img-changer")
+  }
-	newimg.src="http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif"
+
-	greeting.appendChild(newimg)
+  // create and add image
-	
+  var img = document.createElement('img');
-	var newlist = document.createElement("ul")
+  img.src = "http://49.media.tumblr.com/tumblr_m6qt1rjPSz1rxjzkho1_500.gif";
-	newlist.classList.add("todo-items")
+  greeting_div.appendChild(img);
-	var listText = ['make coffee','eat donut','change diapers','drive to work']
+
-	for (task of listText) {
+  // add more event listeners
-		var todoItem = document.createElement("li")
+  document.querySelector("#reset").addEventListener("click",resetButtonHandler);
-		todoItem.innerHTML = task
+  document.querySelector("#ghosting").addEventListener("mouseover", function() { this.remove(); });
-		newlist.appendChild(todoItem)
+  document.querySelector("#resize").addEventListener("mouseenter", doubleWidth);
-	}
+  document.querySelector("#resize").addEventListener("mouseleave", resetWidth);
-	document.body.appendChild(newlist)
+  document.querySelector("body").addEventListener("keyup", noDigits);
-	
+
-	
+  // BONUS
-	var clickSelector = (event)=>{
+  document.querySelector("body").addEventListener("keyup", konamiCheck);
-		var listitems = document.getElementsByTagName("li");
+};
-		for (var i=0;i<listelements.length;i++) {
+
-			var item = listelements[i];
+function selectItem() {
-			item.classList.remove("selected")
+  var curSelected = document.querySelector(".selected");
-			//console.log("Removed from "+item)
+  if (curSelected) { curSelected.className = ""; }
-		}
+  this.className = "selected";
-		event.target.classList.add("selected")
+  document.querySelectorAll("img")[1].src = "./images/" + this.innerHTML + ".jpeg";
-		var changer = document.querySelector("img:not(.img-changer)")
+}
-		changer.src = "./images/"+event.target.innerHTML+".jpeg"
+
-	}
+function resetButtonHandler() {
-	
+  var curSelected = document.querySelector(".selected");
-	listelements = document.getElementsByTagName("li")
+  if (curSelected) { curSelected.className = ""; }
-	for (var i=0;i<listelements.length;i++) {
+  document.querySelectorAll("img")[1].setAttribute("src","./images/panic.jpeg");
-		if (!listelements[i].parentElement.classList.contains("todo-items")) {
+}
-			listelements[i].addEventListener("click",clickSelector)
+
-		}
+var doubleWidth = function() {
-	}
+  this.style.width = '400px';
-	
+};
-	document.getElementById("reset").addEventListener("click",(event)=>{
+
-		var selectedItem = document.querySelector(".selected")
+var resetWidth = function() {
-		selectedItem.classList.remove("selected")
+  this.style.width = '200px';
-		var changer = document.querySelector("img:not(.img-changer)")
+};
-		changer.src = "./images/panic.jpeg"
+
-	})
+var noDigits = function(e) {
-	
+  if (e.keyCode >= 48 && e.keyCode <= 57) {
-	document.getElementById("ghosting").addEventListener("mouseover",(event)=>{
+    alert("I HATE NUMBERZZZ!");
-		event.target.remove()
+  }
-	})
+};
-	document.getElementById("resize").addEventListener("mouseover",(event)=>{
+
-		event.target.style.width=event.target.offsetWidth*2+"px"
+// BONUS
-	})
+
-	document.getElementById("resize").addEventListener("mouseout",(event)=>{
+var idx = 0;
-		event.target.style.width=event.target.offsetWidth/2+"px"
+
-	})
+var konamiCheck = function(e) {
-	var keySequence = []
+  var konamiCodeKeyCodes = [38,38,40,40,37,39,37,39,66,65];
-	
+  if (e.keyCode === konamiCodeKeyCodes[idx]) {
-	var arrayMatches = (arr1,arr2)=>{
+    idx++;
-		if (arr1.length!=arr2.length) {
+    if (idx === konamiCodeKeyCodes.length) {
-			return false;
+      alert("YOU ARE AN EVENT HANDLER GURUUUUUUUUU!");
-		}
+      idx = 0;
-		for (var i=0;i<arr1.length;i++) {
+    }
-			if (arr1[i]!==arr2[i]) {
+  } else {
-				return false;
+    idx = 0;
-			}
+  }
-		}
+
-		return true;
+};
-	}
-	
-	window.addEventListener("keydown",(event)=>{
-		var keysListeningFor = [0,1,2,3,4,5,6,7,8,9]
-		if (keysListeningFor.includes(Number(event.key))) {
-			alert("I HATE NUMBERZZZ!")
-		}
-		keySequence.push(event.key)
-		if (keySequence.length>10) {
-			keySequence = keySequence.slice(1,11)
-		}
-		var konamiCodeArray = ["up","up","down","down","left","right","left","right","b","a"]
-		if (arrayMatches(konamiCodeArray,keySequence.map(val=>{
-			var newval = val.replace("Arrow","")
-			newval = newval[0].toLowerCase() + newval.substr(1)
-			return newval
-		}))) {
-			alert("YOU ARE AN EVENT HANDLER GURUUUUUUUUU!")
-		}
-	})
-})