Creating event listeners for the DOM

src/index.html

@@ -13,26 +13,33 @@
 
   <header class="main-navigation">
     <div class="container nav-container">
-      <h1 class="logo-heading">Fun Bus</h1>
+      <h1 class="logo-heading" id="mouseover">Fun Bus</h1>
       <nav class="nav">
-        <a class="nav-link" href="#">Home</a>
-        <a class="nav-link" href="#">About Us</a>
-        <a class="nav-link" href="#">Blog</a>
-        <a class="nav-link" href="#">Contact</a>
+        <a class="nav-link" id="link1" href="#">Home</a>
+        <a class="nav-link" id="link2" href="#">About Us</a>
+        <a class="nav-link" id="link3" href="#">Blog</a>
+        <a class="nav-link" id="link4" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Contact</a>
       </nav>
+      <div id="rick-roll"></div>
     </div>
   </header>
 
   <div class="container home">
     <header class="intro">
-      <img src="http://localhost:9000/img/fun-bus.jpg" alt="bus in the sand">
+      <img src="http://localhost:9000/img/fun-bus.jpg" id="mainPic" 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
         traveler pretty design website expedition.</p>
+      <p id="log"></p>
+      <p>Resize the browser window to fire the <code>resize</code> event.</p>
+      <p>Window height: <span id="height"></span></p>
+      <p>Window width: <span id="width"></span></p>
+      <p></p>
+      <p id="scroll-log"></p>
     </header>
     <section class="content-section">
-      <div class="text-content">
+      <div class="text-content" id="onLoad">
         <h2>Let's Go!</h2>
         <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty
           simple traveling fun WordPress wanderlust darn simple organized.</p>
@@ -48,11 +55,13 @@ <h2>Let's Go!</h2>
         <img src="http://localhost:9000/img/fun.jpg" class="img-fluid rounded" alt="Lets have fun!">
       </div>
       <div class="text-content">
-        <h2>Adventure Awaits</h2>
+        <h2 id="adventure-awaits">Adventure Awaits</h2>
         <p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty
-          simple traveling fun WordPress wanderlust darn simple organized.</p>
+          simple traveling fun WordPress wanderlust darn simple organized.
+        </p>
         <p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website
-          theme.</p>
+          theme.
+        </p>
       </div>
 
     </section>
@@ -85,6 +94,16 @@ <h4>Island Getaway</h4>
     </section>
   </div><!-- container -->
 
+  <label>Choose an ice cream flavor:
+    <select class="ice-cream" name="ice-cream">
+      <option value="">Select One …</option>
+      <option value="chocolate">Chocolate</option>
+      <option value="sardine">Sardine</option>
+      <option value="vanilla">Vanilla</option>
+    </select>
+  </label>
+  <div class="result"></div>
+
   <footer class="footer">
     <p>Copyright Fun Bus 2021</p>
   </footer>

src/index.js

@@ -1,3 +1,114 @@
 import './less/index.less'
 
-// Your code goes here!
+//              Mouseover 
+
+let mouseover = document.querySelector("#mouseover");
+mouseover.addEventListener("mouseenter", function( event ) {
+  event.target.style.color = "blue";
+  setTimeout(function() {
+    event.target.style.color = "";
+  }, 500);
+}, false);
+
+
+
+//               Keydown
+
+const log = document.querySelector('#log');
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+document.addEventListener('keydown', logKey);
+
+
+
+//                Wheel
+
+function zoom(event) {
+  event.preventDefault();
+  scale += event.deltaY * -0.01;
+  scale = Math.min(Math.max(.125, scale), 4);
+  mainPic.style.transform = `scale(${scale})`;
+}
+
+let scale = 1;
+const mainPic = document.querySelector('#mainPic');
+mainPic.onwheel = zoom;
+
+mainPic.addEventListener('wheel', zoom);
+
+
+
+//                load
+
+window.addEventListener('load', () => {
+  setTimeout(function() {
+    const onLoad = document.querySelector('#onLoad');
+    onLoad.style.backgroundColor = "purple"
+  }, 500);
+});
+
+
+
+//                  focus
+
+const home = document.querySelector('#link1');
+console.log(home);
+
+
+home.addEventListener('focus', (event) => {
+  event.target.style.background = 'pink';
+});
+
+
+
+//                resize
+const heightOutput = document.querySelector('#height');
+const widthOutput = document.querySelector('#width');
+
+function reportWindowSize() {
+  heightOutput.textContent = window.innerHeight;
+  widthOutput.textContent = window.innerWidth;
+}
+
+window.addEventListener('resize', reportWindowSize);
+
+
+
+//              select
+
+function logSelection(event) {
+  const log = document.querySelector('#scroll-log');
+  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+  log.textContent = `You selected: ${selection}`;
+}
+
+const aboutUs = document.querySelector('#link2');
+aboutUs.addEventListener('select', logSelection);
+
+
+
+//          dblclick
+
+const blog = document.querySelector('#link3');
+
+blog.addEventListener('dblclick', (event) => {
+  event.target.style.background = 'green';
+});
+
+
+const selectElement = document.querySelector('.ice-cream');
+
+selectElement.addEventListener('change', (event) => {
+  const result = document.querySelector('.result');
+  result.textContent = `You like ${event.target.value}`;
+});
+
+
+
+//              prevent default
+
+document.querySelector("#link4").addEventListener("click", function(event) {
+  document.getElementById("rick-roll").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
+  event.preventDefault();
+}, false);