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.

Sign up for GitHub

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

event listeners #1462

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

event listeners #1462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
adece2b
all text orange. mouseover-mouseleave
coriwooley Feb 8, 2022
b14185b
was pushing to wrong repo. dblclick, keydown, preventDef, wheelclick,…
coriwooley Feb 8, 2022
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
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ Do not **move or rename any files** in this project. The website's source files
* [ ] Using your [index.js file](src/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, add DOM elements, remove them, etc.

* [ ] Here are some event types you could try to use:
* [ ] `mouseover`
* [ ] `keydown`
* [x] `mouseover`
* [x] `keydown`
* [ ] `wheel`
* [ ] `load`
* [ ] `focus`
* [ ] `resize`
* [ ] `scroll`
* [ ] `select`
* [ ] `dblclick`
* [x] `dblclick`
* [ ] `drag / drop`

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.
Expand Down
211 changes: 124 additions & 87 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,131 @@
<!doctype html>
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web"
rel="stylesheet"
/>
<title>Great Idea!</title>
</head>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
<title>Great Idea!</title>
</head>

<body>

<header class="main-navigation">
<div class="container nav-container">
<h1 class="logo-heading">Fun Bus</h1>
<nav class="nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>

<div class="container home">
<header class="intro">
<img src="http://localhost:9000/img/fun-bus.jpg" alt="bus in the sand">
<h2>Welcome To Fun Bus!</h2>
<p>Traveling expedition modern, clean webdesign blogger clean website theme website modern. Design pretty design,
travelblogger adventure WordPress wanderlust theme blogger website expedition theme travelblogger. Adventure fun
traveler pretty design website expedition.</p>
</header>
<section class="content-section">
<div class="text-content">
<h2>Let's Go!</h2>
<p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty
simple traveling fun WordPress wanderlust darn simple organized.</p>
<p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website
theme.</p>
</div>
<div class="img-content">
<img src="http://localhost:9000/img/adventure.jpg" alt="Let's go on an adventure!">
</div>
</section>
<section class="content-section inverse-content">
<div class="img-content">
<img src="http://localhost:9000/img/fun.jpg" class="img-fluid rounded" alt="Lets have fun!">
</div>
<div class="text-content">
<h2>Adventure Awaits</h2>
<p>Adventure webdesign pretty design design, excursion cute WordPress blogger design webdesign adventure. Pretty
simple traveling fun WordPress wanderlust darn simple organized.</p>
<p>Expedition colorful design simple excursion blogger blogger design WordPress design, design organized website
theme.</p>
<body>
<header class="main-navigation">
<div class="container nav-container">
<h1 class="logo-heading">Fun Bus</h1>
<nav class="nav">
<a class="nav-link home" href="#">Home</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">Blog</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</div>
</header>

</section>
<section class="content-destination">
<h2>Pick Your Destination</h2>
<p>Expedition excursion design darn excursion fun, clean simple organized WordPress Travel colorful webdesign.
Traveler blogger website design expedition clean excursion traveling.</p>
<img src="http://localhost:9000/img/destination.jpg" alt="Second slide">
</section>
<section class="content-pick">

<div class="destination">
<h4>Fun In The Sun</h4>
<p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign.
Traveler blogger website design expedition clean excursion traveling.</p>
<div class="btn">Sign Me Up!</div>
</div>
<div class="destination">
<h4>Mountain Excursion</h4>
<p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign.
Traveler blogger website design expedition clean excursion traveling.</p>
<div class="btn">Sign Me Up!</div>
</div>
<div class="destination">
<h4>Island Getaway</h4>
<p>Expedition excursion design excursion fun, clean simple organized WordPress Travel colorful webdesign.
Traveler blogger website design expedition clean excursion traveling.</p>
<div class="btn">Sign Me Up!</div>
</div>
</section>
</div><!-- container -->

<footer class="footer">
<p>Copyright Fun Bus 2021</p>
</footer>

</body>
<div class="container home">
<header class="intro">
<img
src="http://localhost:9000/img/fun-bus.jpg"
alt="bus in the sand"
/>
<h2>Welcome To Fun Bus!</h2>
<p>
Traveling expedition modern, clean webdesign blogger clean website
theme website modern. Design pretty design, travelblogger adventure
WordPress wanderlust theme blogger website expedition theme
travelblogger. Adventure fun traveler pretty design website
expedition.
</p>
</header>
<section class="content-section">
<div class="text-content">
<h2>Let's Go!</h2>
<p>
Adventure webdesign pretty design design, excursion cute WordPress
blogger design webdesign adventure. Pretty simple traveling fun
WordPress wanderlust darn simple organized.
</p>
<p>
Expedition colorful design simple excursion blogger blogger design
WordPress design, design organized website theme.
</p>
</div>
<div class="img-content">
<img
src="http://localhost:9000/img/adventure.jpg"
alt="Let's go on an adventure!"
/>
</div>
</section>
<section class="content-section inverse-content">
<div class="img-content">
<img
src="http://localhost:9000/img/fun.jpg"
class="img-fluid rounded"
alt="Lets have fun!"
/>
</div>
<div class="text-content">
<h2>Adventure Awaits</h2>
<p>
Adventure webdesign pretty design design, excursion cute WordPress
blogger design webdesign adventure. Pretty simple traveling fun
WordPress wanderlust darn simple organized.
</p>
<p>
Expedition colorful design simple excursion blogger blogger design
WordPress design, design organized website theme.
</p>
</div>
</section>
<section class="content-destination">
<h2>Pick Your Destination</h2>
<p>
Expedition excursion design darn excursion fun, clean simple organized
WordPress Travel colorful webdesign. Traveler blogger website design
expedition clean excursion traveling.
</p>
<img
src="http://localhost:9000/img/destination.jpg"
alt="Second slide"
/>
</section>
<section class="content-pick">
<div class="destination">
<h4>Fun In The Sun</h4>
<p>
Expedition excursion design excursion fun, clean simple organized
WordPress Travel colorful webdesign. Traveler blogger website design
expedition clean excursion traveling.
</p>
<div class="btn">Sign Me Up!</div>
</div>
<div class="destination">
<h4>Mountain Excursion</h4>
<p>
Expedition excursion design excursion fun, clean simple organized
WordPress Travel colorful webdesign. Traveler blogger website design
expedition clean excursion traveling.
</p>
<div class="btn">Sign Me Up!</div>
</div>
<div class="destination">
<h4>Island Getaway</h4>
<p>
Expedition excursion design excursion fun, clean simple organized
WordPress Travel colorful webdesign. Traveler blogger website design
expedition clean excursion traveling.
</p>
<div class="btn">Sign Me Up!</div>
</div>
</section>
</div>
<!-- container -->

<footer class="footer">
<p>Copyright Fun Bus 2021</p>
</footer>
</body>
</html>
54 changes: 53 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,55 @@
import './less/index.less'

// Your code goes here!
//mouseover
//mouseleave
const txt = document.querySelectorAll('h2, h4, p, .logo-heading, .nav .nav-link')
txt.forEach((tag) => {
tag.addEventListener('mouseover', event => {
event.target.style.color = 'orange'
})
tag.addEventListener('mouseleave', event => {
event.target.style.color = ''
})
})

//load
// window.addEventListener('load', event => [
// alert('Hello friend!!!')
// ])

//click
const footer = document.querySelector('.footer')
footer.addEventListener('click', event => {
event.target.style.backgroundColor = 'pink'
})

//dblclick
const photos = document.querySelectorAll('img')
photos.forEach((photo) => {
photo.addEventListener('dblclick', event => [
photo.src = ''
])
})

//keydown
const body = document.querySelector('body')
function yellowBg (event) {
console.log(event.key)
if (event.key === 'y'){
body.style.backgroundColor = 'yellow'
}
}
body.addEventListener('keydown', yellowBg)

//preventDefault
const homeTag = document.querySelector('.nav-link.home')
homeTag.addEventListener('click', event => {
event.preventDefault();
console.log('this is working')
})

//wheel
const header = document.querySelector('header h1');
header.addEventListener('wheel', event => {
event.target.style.fontSize = '7rem'
})
2 changes: 2 additions & 0 deletions src/less/global.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,10 @@ p {
img {
max-width: 100%;
height: auto;

}


.container {
max-width: 800px;
width: 100%;
Expand Down