diff --git a/src/index.js b/src/index.js
index 13e4739cd..baf00c93e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,75 @@
import './less/index.less'
-// Your code goes here!
+document.addEventListener("DOMContentLoaded", function () {
+//CLICK - 1
+document.querySelector('nav :nth-child(1)').addEventListener('click', evt => {
+ evt.target.classList.toggle('mirror')
+})
+
+//KEYDOWN - 2
+window.addEventListener('keydown', evt => {
+ if (evt.key == 6) {
+ document.body.innerHTML = '
NEVER CLICK 6 AGAIN
'
+ }
+})
+// MOUSEOVER - 3
+const logoHeading = document.querySelector('.logo-heading')
+
+logoHeading.addEventListener('mouseover', evt => {
+ evt.target.style.color = '#FFA500'
+ logoHeading.textContent = 'ROLL OUT!'
+})
+
+//MOUSE LEAVE & MOUSE ENTER - 4 & 5
+const destinations = document.querySelectorAll('.destination')
+for(let destination of destinations) {
+ destination.addEventListener('mouseenter', evt => {
+ destination.style.fontWeight = 'bold'
+ })
+ destination.addEventListener('mouseleave', evt => {
+ destination.style.fontWeight = 'initial'
+ })
+}
+
+
+//DoubleClick - 6
+document.body.addEventListener('dblclick', evt => {
+ evt.target.outerHTML = ''
+})
+
+//MOUSEMOVE - 7
+document.body.addEventListener('mousemove', evt => {
+ const {clientX, clientY} = evt
+ // console.log(`mousey boy is at ${clientX}, ${clientY}`)
+})
+
+//COPY - 8
+const welcome = document.querySelector('h2')
+
+window.addEventListener('copy', () => {
+ navigator.clipboard.readText()
+ .then(text => {
+ welcome.textContent += text
+ })
+})
+
+//RESIZE - 9
+
+window.addEventListener('resize', () => {
+ alert('Window Resized!')
+})
+
+ //ONLOAD - 10
+ window.onload = function () {
+ const footer = document.querySelector('.footer')
+ footer.textContent = 'ALL ABOARD!'
+
+ }
+
+ //PREVENTDEFAULT()
+document.querySelector('nav :nth-child(2)').addEventListener('click', function(e){
+ alert('This took forever to do')
+ e.preventDefault();
+})
+
+})
\ No newline at end of file
diff --git a/src/less/global.less b/src/less/global.less
index 56883b027..7d90eeff9 100644
--- a/src/less/global.less
+++ b/src/less/global.less
@@ -2,6 +2,11 @@
box-sizing: border-box;
}
+&.mirror {
+ transform: rotateY(180deg);
+ transition: transform 0.5s ease-in-out;
+}
+
html {
font-size: 62.5%;
}