I was unfortunately not able to complete the ten due to my lack of cr…

README.md

@@ -27,22 +27,22 @@ Do not **move or rename any files** in this project. The website's source files
 * [ ] Using your [index.js file](src/index.js), create [event listeners](https://developer.mozilla.org/en-US/docs/Web/Events) of at least 10 _different_ types. You must Use your creativity to make the Fun Bus site more interactive. For example you could change colors, animate objects, add DOM elements, remove them, etc.
 
 * [ ] Here are some event types you could try to use:
-  * [ ] `mouseover`
-  * [ ] `keydown`
-  * [ ] `wheel`
-  * [ ] `load`
+  * [x] `mouseover`
+  * [x] `keydown`
+  * [x] `wheel`
+  * [x] `load`
   * [ ] `focus`
   * [ ] `resize`
-  * [ ] `scroll`
+  * [x] `click`
   * [ ] `select`
-  * [ ] `dblclick`
+  * [x] `dblclick`
   * [ ] `drag / drop`
 
 Note: Drag and drop is a bit more advanced than the others. It's not actually a single type of event but several types that need to work together.
 
 ### Use preventDefault
 
-* [ ] Find a usecase for preventDefault. For example, you could prevent a link from navigating when clicked, or to navigate somewhere surprising.
+* [x] Find a usecase for preventDefault. For example, you could prevent a link from navigating when clicked, or to navigate somewhere surprising.
 
 ## Submission Format
 

src/index.html

@@ -13,9 +13,10 @@
 
   <header class="main-navigation">
     <div class="container nav-container">
-      <h1 class="logo-heading">Fun Bus</h1>
+      <h1 class="bus-logo-heading off">&#128652;</h1>
+      <h1 class="logo-heading off">Fun Bus</h1>
       <nav class="nav">
-        <a class="nav-link" href="#">Home</a>
+        <a class="nav-link" href="#" id="home">Home</a>
         <a class="nav-link" href="#">About Us</a>
         <a class="nav-link" href="#">Blog</a>
         <a class="nav-link" href="#">Contact</a>
@@ -25,7 +26,7 @@ <h1 class="logo-heading">Fun Bus</h1>
 
   <div class="container home">
     <header class="intro">
-      <img src="http://localhost:9000/img/fun-bus.jpg" alt="bus in the sand">
+      <img ondblclick="console.log('Command is working')" src="http://localhost:9000/img/fun-bus.jpg" alt="bus in the sand">
       <h2>Welcome To Fun Bus!</h2>
       <p>Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design,
         travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun

src/index.js

@@ -1,3 +1,69 @@
 import './less/index.less'
 
 // Your code goes here!
+console.log("Console is working");
+
+const logoHeading = document.querySelector("h1.logo-heading");
+const busLogoHeading = document.querySelector("h1.bus-logo-heading");
+const busImg = document.querySelector(".intro img");
+const introText = document.querySelector(".intro h2");
+const introImg = document.querySelector(".intro img");
+const AAImgContent = document.querySelector(".img-fluid");
+const LGImgContent = document.querySelector(".img-content img");
+const FooterImgContent = document.querySelector(".content-destination img");
+const mainPage = document.querySelector(".container.home");
+const wholePage = document.querySelector("body");
+const SMEBtns = document.querySelector(".btn");
+
+// turns bus logo on with dblclick
+logoHeading.classList.remove("off");
+function change() {
+    busLogoHeading.classList.remove("off");
+    logoHeading.classList.add("off");
+}
+busImg.addEventListener("dblclick", change);
+
+// turns intro h2 text orange when hovering
+function changeColor() {
+    introText.style.color = 'orange';
+}
+introText.addEventListener("mouseover", changeColor);
+
+// turns all the intro pictures into different ones when F12 is pressed
+function changeImage(event) {
+    if (event.key === "F10") {
+        AAImgContent.src = 'https://i.pinimg.com/originals/66/40/78/664078fe059378f473c1d6fa002b0dc0.jpg';
+        LGImgContent.src = 'https://i.pinimg.com/originals/66/40/78/664078fe059378f473c1d6fa002b0dc0.jpg';
+        FooterImgContent.src = 'https://i.pinimg.com/originals/66/40/78/664078fe059378f473c1d6fa002b0dc0.jpg';
+        introImg.src = 'https://i.pinimg.com/originals/66/40/78/664078fe059378f473c1d6fa002b0dc0.jpg';
+    }
+}
+document.addEventListener("keydown", changeImage);
+
+// turns the background a different color when the wheel scrolls down
+function changeBackground() {
+    mainPage.style.backgroundColor = "lightblue";
+}
+document.addEventListener("wheel", changeBackground);
+
+// changes page color when you load the page
+function changePageColor() {
+    wholePage.style.backgroundColor = "lightyellow";
+}
+
+window.addEventListener("load", changePageColor);
+
+// changes images when "Sign Me Up!" is clicked
+function convertImages() {
+    AAImgContent.src = "https://i.pinimg.com/550x/a5/25/f2/a525f24c31e309e603358a8bc478e8ea.jpg";
+    LGImgContent.src = "https://i.pinimg.com/550x/a5/25/f2/a525f24c31e309e603358a8bc478e8ea.jpg";
+    FooterImgContent.src = "https://i.pinimg.com/550x/a5/25/f2/a525f24c31e309e603358a8bc478e8ea.jpg";
+    introImg.src = "https://i.pinimg.com/550x/a5/25/f2/a525f24c31e309e603358a8bc478e8ea.jpg";
+}
+SMEBtns.addEventListener("click", convertImages);
+
+// home button takes you to a different site than usual
+document.getElementById('home').addEventListener("click", function(event) {
+    event.preventDefault();
+    window.location.href = "https://www.whitehouse.gov/";
+});

src/less/global.less

@@ -39,6 +39,11 @@ img {
   height: auto;
 }
 
+.off {
+  display: none;
+  position: absolute;
+}
+
 .container {
   max-width: 800px;
   width: 100%;

src/less/navigation.less

@@ -41,4 +41,4 @@
       }
     }
   }
-} // .main-navigation
+} // .main-navigation