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%; }