Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Amethyst williams #1402

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Added stopPropagation features, hopefully correctly
  • Loading branch information
AmethystWillia committed Oct 26, 2021
commit 35a98f05d1189f63e65f95a3ab337fcea65c75c3
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ Fun Bus wants you to make their site more interactive. They are relying on you t
* [✔] `copy`
* [✔] `drag`
* [✔] `focus`
* `resize`
* [✔] `blur`
* [✔] `scroll`
* [✔] `select`
* [✔] `dblclick`

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.
* [] Nest two similar events somewhere in the site and prevent the event propagation properly. Remember not all event types bubble. (I'll be honest not sure if I did this right)
* [✔] Stop the navigation items from refreshing the page by using `preventDefault()`

### Task 3: Stretch
Expand Down
28 changes: 13 additions & 15 deletions js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ document.querySelectorAll('.nav-link').forEach(elem => {
})
});

//Stop propogation at nav
document.querySelector('nav').addEventListener('click', function(e) {
e.stopPropagation();
});

//Make all h2s turn purple when moused over for a short period of time
document.querySelectorAll('h2').forEach(elem => {
elem.addEventListener('mouseover', function(e) {
Expand All @@ -37,16 +42,6 @@ function escKey(evt) {

document.addEventListener('keydown', escKey);

//Add listener to images that makes them zoom in and out with wheel
const busImg = document.querySelector('.intro img')

//Ensure the busImg will always be centered
busImg.style.display = 'block';
busImg.style.margin = '0 auto';

//Trying to make the zoom function
//Bro idk lmao moving on

//Double-click boat image to shrink it
const boatImg = document.querySelector('.content-destination img');

Expand All @@ -59,6 +54,11 @@ boatImg.addEventListener('dblclick', function(e) {
boatImg.style.width = 'auto';
});

//End propogation at div
document.querySelector('div').addEventListener('click', function(e) {
e.stopPropagation();
});

//test to see if i selected it
/*
boatImg.style.height = '500px';
Expand Down Expand Up @@ -102,15 +102,13 @@ let dragged;
document.addEventListener('dragstart', function(e) {
dragged = e.target;
e.target.style.opacity = '0.25';
pageTitle.textContent = 'Give that back!'
pageTitle.textContent = 'Give that back!';
}, false);

document.addEventListener('dragend', function(e) {
e.target.style.opacity = '';
pageTitle.textContent = 'Hmph!'
pageTitle.textContent = 'Hmph!';
setTimeout(function() {
pageTitle.textContent = 'Fun Bus';
}, 1000);
}, false);

//Make something goofy happen when you move the pointer
}, false);