From ae328066a8e8e01c9b2d24a2fd080fb163f5c600 Mon Sep 17 00:00:00 2001 From: James Kirkwood <85250373+jimjamesjimathy@users.noreply.github.com> Date: Tue, 26 Oct 2021 15:37:00 -0400 Subject: [PATCH 1/2] Two event listeners added. setting up more now. --- README.md | 20 ++++++++++---------- js/index.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 73e37cd1dd..f2960386e6 100644 --- a/README.md +++ b/README.md @@ -10,23 +10,23 @@ Fun Bus wants you to make their site more interactive. They are relying on you t **Follow these steps to set up and work on your project:** -* [ ] Create a forked copy of this project. -* [ ] Clone your OWN version of the repository (Not Lambda's by mistake!). -* [ ] Create a new branch: git checkout -b ``. -* [ ] Implement the project on your newly created `` branch, committing changes regularly. -* [ ] Push commits: git push origin ``. +* [x] Create a forked copy of this project. +* [x] Clone your OWN version of the repository (Not Lambda's by mistake!). +* [x] Create a new branch: git checkout -b ``. +* [x] Implement the project on your newly created `` branch, committing changes regularly. +* [x] Push commits: git push origin ``. #### Launch the project with npm -* [ ] Navigate to the root of the project with your command line. -* [ ] Run `npm install` to download any dependencies listed in the `package.json` file. -* [ ] Run `npm start` to compile your project and launch a development server. -* [ ] Navigate Chrome to the URL indicated in the output of the `npm start` command. +* [x] Navigate to the root of the project with your command line. +* [x] Run `npm install` to download any dependencies listed in the `package.json` file. +* [x] Run `npm start` to compile your project and launch a development server. +* [x] Navigate Chrome to the URL indicated in the output of the `npm start` command. ### Task 2: Create listeners for 10 types of events * [ ] Using your [index.js file](js/index.js), create [event listeners](https://developer.mozilla.org/en-US/docs/Web/Events) of at least 10 _different_ types. You must Use your creativity to make the Fun Bus site more interactive. For example you could change colors, animate objects, remove objects, etc. Here are some event types you could try to use: - * `mouseover` + * `mouseover` complete. * `keydown` * `wheel` * `load` diff --git a/js/index.js b/js/index.js index 20c3edbc9b..a615538681 100644 --- a/js/index.js +++ b/js/index.js @@ -1 +1,47 @@ // Your code goes here + + // change "Fun Bus" h1. + // "addEventListener" load +const funBusTitle = document.querySelector('.logo-heading'); + window.addEventListener('load', (event) => { + funBusTitle.style.color = '#FEBE50'; + funBusTitle.style.fontSize = '6.66rem'; + funBusTitle.style.textShadow = '2px 1px 2px #000'; + funBusTitle.style.transition = '3s 300ms ease-in-out'; + }); + + + // change nav links + // "addEventListener" keydown/keyup + +const links = document.querySelectorAll('.nav-link'); + function colorSmash(){ + links.forEach(item => { + item.style.color = '#FEBE50'; + item.style.backgroundColor = 'dodgerBlue'; + item.style.padding = '5%'; + item.style.borderRadius = '5px'; + item.style.transition = '1s linear'; + }); + }; + window.addEventListener('keydown', colorSmash); + + // "addEventListener" keyup + + function colorRemove(){ + links.forEach(item => { + item.style.color = ''; + item.style.backgroundColor = ''; + item.style.padding = ''; + item.style.borderRadius = '50px'; + item.style.transition = '1s linear'; + }); + }; + window.addEventListener('keyup', colorRemove); + + + // change bus on beach image + // "addEventListener" mouseover/mouseleave + +const busImg = document.querySelector('.intro img'); +console.log(busImg) \ No newline at end of file From a5636c6720dcf6f180c08dd70d9a53c88713e1d6 Mon Sep 17 00:00:00 2001 From: James Kirkwood <85250373+jimjamesjimathy@users.noreply.github.com> Date: Tue, 26 Oct 2021 18:34:08 -0400 Subject: [PATCH 2/2] All mvp tasks complete. --- README.md | 8 ++--- js/index.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 87 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f2960386e6..cbf5029c54 100644 --- a/README.md +++ b/README.md @@ -25,8 +25,8 @@ Fun Bus wants you to make their site more interactive. They are relying on you t ### Task 2: Create listeners for 10 types of events -* [ ] Using your [index.js file](js/index.js), create [event listeners](https://developer.mozilla.org/en-US/docs/Web/Events) of at least 10 _different_ types. You must Use your creativity to make the Fun Bus site more interactive. For example you could change colors, animate objects, remove objects, etc. Here are some event types you could try to use: - * `mouseover` complete. +* [x] Using your [index.js file](js/index.js), create [event listeners](https://developer.mozilla.org/en-US/docs/Web/Events) of at least 10 _different_ types. You must Use your creativity to make the Fun Bus site more interactive. For example you could change colors, animate objects, remove objects, etc. Here are some event types you could try to use: + * `mouseover` * `keydown` * `wheel` * `load` @@ -39,8 +39,8 @@ Fun Bus wants you to make their site more interactive. They are relying on you t 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. -* [ ] Nest two similar events somewhere in the site and prevent the event propagation properly. Remember not all event types bubble. -* [ ] Stop the navigation items from refreshing the page by using `preventDefault()` +* [x] Nest two similar events somewhere in the site and prevent the event propagation properly. Remember not all event types bubble. +* [x] Stop the navigation items from refreshing the page by using `preventDefault()` ### Task 3: Stretch diff --git a/js/index.js b/js/index.js index a615538681..c17d61be12 100644 --- a/js/index.js +++ b/js/index.js @@ -1,4 +1,22 @@ // Your code goes here + // "addEventListener" pointerover +const header = document.querySelector('header'); + header.addEventListener('pointerover', event => { + event.target.style.fontWeight = '900'; +}) + +// "addEventListener" pointerdown +header.addEventListener('pointerdown', event => { + event.target.style.backgroundColor = 'teal'; +}); +// "addEventListener" pointerup +header.addEventListener('pointerup', event => { + event.target.style.backgroundColor = ''; +}); + + + + // change "Fun Bus" h1. // "addEventListener" load @@ -15,7 +33,8 @@ const funBusTitle = document.querySelector('.logo-heading'); // "addEventListener" keydown/keyup const links = document.querySelectorAll('.nav-link'); - function colorSmash(){ + function colorSmash(event){ + event.preventDefault(); links.forEach(item => { item.style.color = '#FEBE50'; item.style.backgroundColor = 'dodgerBlue'; @@ -26,9 +45,12 @@ const links = document.querySelectorAll('.nav-link'); }; window.addEventListener('keydown', colorSmash); + + // "addEventListener" keyup - function colorRemove(){ + function colorRemove(event){ + event.preventDefault(); links.forEach(item => { item.style.color = ''; item.style.backgroundColor = ''; @@ -44,4 +66,62 @@ const links = document.querySelectorAll('.nav-link'); // "addEventListener" mouseover/mouseleave const busImg = document.querySelector('.intro img'); -console.log(busImg) \ No newline at end of file + busImg.addEventListener('mouseover', event => { + busImg.style.filter = 'blur(3px)'; + busImg.style.transition = '1s'; + }); + // mouseleave + busImg.addEventListener('mouseleave', event => { + busImg.style.filter = ''; + busImg.style.transition = '1s'; + }); + + // change h2 + // "addEventListener" wheel + +const cHomeH2 = document.querySelectorAll('h2'); + function goWide(){ + cHomeH2.forEach(item => { + item.style.color = '#FEBE50'; + item.style.textShadow = '2px 1px 2px #000'; + item.style.letterSpacing = '.7rem'; + item.style.transition = '1s 2s ease-out'; + }); + }; + document.addEventListener('wheel', goWide); + + // change intro p + // "addEventListener" click + +const introP = document.querySelector('.intro'); + introP.addEventListener('click', event => { + event.target.style.backgroundColor = 'skyBlue'; + }); + + + // change img-content img 1 + // "addEventListener" dblclick + +const midRightImg = document.querySelector('.img-content img:nth-of-type(1)'); + midRightImg.addEventListener('click', event => { + event.target.style.filter = 'brightness(50%)'; + event.target.style.transition = '2s linear'; + event.stopPropagation(); + }); + + + // change paragraph elements + // "addEventListener" copy +const paragraphs = document.querySelectorAll('p'); + paragraphs.forEach(p => { + p.addEventListener('copy', event => { + console.log('Plagiarism is the highest form of flattery.'); + }); + }); + // "addEventListener" paste + paragraphs.forEach(p => { + p.addEventListener('paste', event => { + console.log('I\'m just gonna put this riiiiight here...'); + }); + }); +