first commit

README.md

@@ -6,19 +6,19 @@ Fun Bus wants you to make their site more interactive. They are relying on you t
 
 ## Git Setup
 
-* [ ] Create a forked copy of this project.
-* [ ] Clone your OWN version of the repository.
-* [ ] Implement the project on the main branch, committing changes regularly.
-* [ ] Push commits: `git push origin main`.
+* [X] Create a forked copy of this project.
+* [X] Clone your OWN version of the repository.
+* [X] Implement the project on the main branch, committing changes regularly.
+* [X] Push commits: `git push origin main`.
 
 ## Running the project
 
 This project uses [Webpack and Babel](https://bloomtech-1.wistia.com/medias/bhi99dwr2x). Inside `src/index.html` you will notice there is no `script` tag linking the JavaScript, nor a `link` tag linking the styles. When the project starts, Webpack transcompiles the LESS into CSS, and injects the JavaScript and the styles into the HTML.
 
 Do not **move or rename any files** in this project. The website's source files live inside the `src` folder. Do not make changes to any files outside of the `src` folder, unless it's new dependecies declared in the `package.json` due to installing NPM libraries (E.G. `npm i lodash`).
 
-* [ ] Run `npm install` to download the project's dependencies.
-* [ ] Run `npm start` to launch the website on `http://localhost:3000`.
+* [X] Run `npm install` to download the project's dependencies.
+* [X] Run `npm start` to launch the website on `http://localhost:3000`.
 
 ## MVP
 
@@ -28,14 +28,14 @@ Do not **move or rename any files** in this project. The website's source files
 
 * [ ] Here are some event types you could try to use:
   * [ ] `mouseover`
-  * [ ] `keydown`
+  * [X] `keydown`
   * [ ] `wheel`
-  * [ ] `load`
+  * [X] `load`
   * [ ] `focus`
   * [ ] `resize`
   * [ ] `scroll`
   * [ ] `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.

src/index.js

@@ -1,3 +1,53 @@
 import './less/index.less'
 
 // Your code goes here!
+
+// 1 - Load
+window.onload = function (evt) {
+    const heading = document.querySelector('h1')
+    heading.textContent = 'Ready to go!'
+
+// 2 - Copy    
+window.addEventListener('copy', () => {
+    navigator.clipboard.readText()
+        .then(text => {
+            heading.textContent += text
+        })
+})
+
+// 3 - Click
+document.body.addEventListener('click', evt => {
+    evt.target.classList.toggle('mirror')
+})
+
+// 4 - Double Click
+document.body.addEventListener('dblclick', evt => {
+    evt.target.outerHTML = ''
+})
+
+// 5 - Keydown
+window.addEventListener('keydown', evt => {
+    if (evt.key == 6) {
+        document.body.innerHTML = 'YOU RAN ORDER 66'
+    }
+})
+
+// 6 - Mouse Move
+document.body.addEventListener('mousemove', evt => {
+    const { clientX, clientY} = evt
+    console.log(`mouse is at ${clientX}, ${clientY}`)
+})
+
+// 7 - Mouse Enter
+// 8 - Mouse Leave
+const destinations = document.querySelectorAll('.destination')
+for (let destination of destinations) {
+    destination.addEventListener('mouseenter', evt => {
+        destination.style.fontWeight = 'bold'
+    })
+    destination.addEventListener('mouseleave', () => {
+        destination.style.fontWeight = 'initial'
+    })
+}
+
+}