diff --git a/README.md b/README.md index 66fc8a772a..0d920b333e 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,7 @@ ## Project Description + Fun Bus wants you to make their site more interactive. They are relying on you to provide 10 unique events to enhance their site. Explore the many events available to you by using the [MDN events reference](https://developer.mozilla.org/en-US/docs/Web/Events). ## Git Setup diff --git a/src/index.js b/src/index.js index 13e4739cdd..6602145ef3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,47 @@ import './less/index.less' -// Your code goes here! +window.onload = function (evt) { + console.log(`event ${evt.type} fired! Lets do this!!`) + const heading = document.querySelector('h1') + heading.textContent = 'HEEYYY YOu GuYs' + + window.addEventListener('copy', () => { + navigator.clipboard.readText() + .then(text => { + heading.textContent += text + }) + + }) + document.body.addEventListener('click', evt => { + evt.target.classList.toggle('mirror') + }) + + document.body.addEventListener('dblclick', evt => { + evt.target.innerHTML = '' + }) + + window.addEventListener('keydown', evt => { + if (evt.key == 6){ + document.body.innerHTML = '

LOOK WHAT YOU MADE ME DO!!!!!

' + } + }) + + document.body.addEventListener('mousemove', evt => { + const { clientX, clientY } = evt + // console.log(`mouse is at ${clientX}, ${clientY}`) + }) + 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) + }) + } + + +} + diff --git a/src/less/global.less b/src/less/global.less index 56883b027d..e56e0b85a5 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -1,6 +1,12 @@ * { box-sizing: border-box; + transform: rotateX(0deg); + transition: transform .45s ease-in-out; } + &.mirror { + transform: rotateX(180deg); + transition: transform .75s ease-in-out; + } html { font-size: 62.5%;