diff --git a/src/index.js b/src/index.js index 13e4739cd..6290ac119 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,54 @@ import './less/index.less' // Your code goes here! +console.log("Hello World"); + + +// -1 LOAD +window.onload = function(evt){ + console.log(`event ${evt.type} fired! Ready to go`) + + const heading = document.querySelector("h1") + heading.textContent = 'READY TO GO!!' +// -2COPY + window.addEventListener('copy', () => { + navigator.clipboard.readText() + .then(text => { + heading.textContent += text + }) + }) +// -3 click + document.body.addEventListener('click', evt => { + evt.target.classList.toggle('mirror') + }) +// -4 dblclick + document.body.addEventListener('dblclick', evt => { + evt.target.innerHTML = '' + }) +// -5 keydown + window.addEventListener('keydown', evt =>{ + if(evt.key == 6){ + document.body.innerHTML = 'YOU RAN ORDER 66 { + const {clientX, clientY} = evt + //console.log(`mouse is at ${clientX} and at ${clientY}`) + }) + +// -7 mouseenter +// -8 mouseleave + + const destinations = document.querySelectorAll('.destination') + for(let destination of destinations){ + destination.addEventListener('mouseenter', () => { + destination.style.fontWeight = 'bold' + }) + destination.addEventListener('mouseleave', () => { + setTimeout(() => { + destination.style.fontWeight = 'initial' + }, 500) + }) + } +} \ No newline at end of file diff --git a/src/less/global.less b/src/less/global.less index 56883b027..65f367ac5 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -1,5 +1,13 @@ * { box-sizing: border-box; + + transform: rotateY(0deg); + transition: transform 0.2s ease-in-out; + + &.mirror{ + transform: rotateY(180deg); + transition: transform 0.5s ease-in-out; + } } html {