Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2ace0d3

Browse files
neozenoneozeno
authored
Merge pull request wesbos#1 from wesbos/master
Updating forked repo
2 parents 50a7cb3 + 764f0d5 commit 2ace0d3

File tree

952 files changed

+5535
-63201
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

952 files changed

+5535
-63201
lines changed

‎.eslintrc‎ renamed to ‎.eslintrc-FINISHED‎

File renamed without changes.

‎exercises/16 - Debugging/debugging-FINISHED.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ const people = [
44
{ name: 'Snickers', cool: false, country: 'Dog Country' },
55
];
66

7-
/* Victor Mono */
8-
// New Font!
97
people.forEach((person, index) => {
10-
console.log(person.name);
8+
console.groupCollapsed(`${person.name}`);
9+
console.log(person.country);
10+
console.log(person.cool);
11+
console.log('DONE');
12+
console.groupEnd(`${person.name}`);
1113
});
1214

13-
// console.table(people);
15+
console.table(people);
1416

1517
// Console Methods
1618

‎exercises/20 - The DOM/DOM-Cardio-FINISHED.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>Dom Cardio</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
</head>
10+
11+
<body>
12+
<script src="./DOM-Cardio.js"></script>
13+
</body>
14+
15+
<style>
16+
.cards {
17+
display: grid;
18+
grid-template-columns: repeat(4, 1fr);
19+
grid-gap: 20px;
20+
padding: 20px;
21+
}
22+
23+
.playerCard {
24+
background: white;
25+
padding: 20px;
26+
}
27+
28+
.playerCard h2 {
29+
color: black;
30+
}
31+
</style>
32+
</html>

‎exercises/20 - The DOM/DOM-Cardio.html‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,6 @@
1010

1111
<body>
1212
<script src="./DOM-Cardio.js"></script>
13-
14-
<style>
15-
.cards {
16-
display: grid;
17-
grid-template-columns: repeat(4, 1fr);
18-
grid-gap: 20px;
19-
padding: 20px;
20-
}
21-
22-
.playerCard {
23-
background: white;
24-
padding: 20px;
25-
}
26-
27-
.playerCard h2 {
28-
color: black;
29-
}
30-
</style>
3113
</body>
3214

3315
</html>

‎exercises/55 - Face Detection Censorship/.parcel-cache/37/891645c97b4738fdeb435d26dbf07f.v8‎ renamed to ‎exercises/20 - The DOM/creating-with-strings.js‎

File renamed without changes.

‎exercises/55 - Face Detection Censorship/.parcel-cache/78/10f4d19bd288a3167b03af4aa0bfa0.blob‎ renamed to ‎exercises/20 - The DOM/creating.js‎

File renamed without changes.

‎exercises/20 - The DOM/index-FINISHED.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>The DOM</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
10+
</head>
11+
12+
<body>
13+
<p class="wes">I am Wes, I <em>love</em> to bbq and <strong>Make websites!</strong></p>
14+
<img class="nice cool" src="https://picsum.photos/500" />
15+
16+
<div class="items">
17+
<div class="item">
18+
<img class="custom" data-last="bos" data-name="wes" src="https://picsum.photos/200" />
19+
<img data-name="kait" src="https://picsum.photos/200" />
20+
<img data-name="lux" src="https://picsum.photos/200" />
21+
22+
<p>Hi I'm a item</p>
23+
</div>
24+
<div class="item item2">
25+
<img src="https://picsum.photos/200" />
26+
<h2>
27+
I am a heading
28+
<span>I am hidden!</span>
29+
</h2>
30+
<p>Hi I'm a item</p>
31+
</div>
32+
<article class="item">
33+
<h2>Im an article</h2>
34+
<p class="pizza">This is how many pizzas I ate! 🍕</p>
35+
</article>
36+
</div>
37+
38+
<style>
39+
h2 span {
40+
display: none;
41+
}
42+
43+
img {
44+
transition: all 0.2s;
45+
}
46+
47+
.round {
48+
border-radius: 50%;
49+
transform: rotate(1turn) scale(2);
50+
box-shadow: 0 0 10px black;
51+
}
52+
</style>
53+
54+
<script src="./traversing.js"></script>
55+
</body>
56+
57+
</html>

‎exercises/20 - The DOM/index.html‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,20 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<title>The DOM</title>
88
<link rel="stylesheet" href="../../base.css">
9-
109
</head>
1110

1211
<body>
13-
<p class="wes">I am Wes, I <em>love</em> to bbq and <strong>Make websites!</strong></p>
14-
<img class="nice cool" src="https://picsum.photos/500" />
15-
1612
<div class="items">
17-
<div class="item">
18-
<img class="custom" data-last="bos" data-name="wes" src="https://picsum.photos/200" />
19-
<img data-name="kait" src="https://picsum.photos/200" />
20-
<img data-name="lux" src="https://picsum.photos/200" />
21-
22-
<p>Hi I'm a item</p>
23-
</div>
24-
<div class="item item2">
25-
<img src="https://picsum.photos/200" />
26-
<h2>
27-
I am a heading
28-
<span>I am hidden!</span>
29-
</h2>
13+
<p>Hi I'm a item</p>
14+
<div>
15+
<h2>Sub Div</h2>
3016
<p>Hi I'm a item</p>
17+
3118
</div>
32-
<article class="item">
33-
<h2>Im an article</h2>
34-
<p class="pizza">This is how many pizzas I ate! 🍕</p>
35-
</article>
19+
<img src="https://source.unsplash.com/random/300x300" />
20+
<p>Hi I'm a item</p>
21+
<p>Hi I'm a item</p>
3622
</div>
37-
38-
<style>
39-
h2 span {
40-
display: none;
41-
}
42-
43-
img {
44-
transition: all 0.2s;
45-
}
46-
47-
.round {
48-
border-radius: 50%;
49-
transform: rotate(1turn) scale(2);
50-
box-shadow: 0 0 10px black;
51-
}
52-
</style>
53-
54-
<script src="./traversing.js"></script>
5523
</body>
5624

5725
</html>

‎exercises/29 - Events/events-FINISHED.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<title>JavaScript Events</title>
8+
<link rel="stylesheet" href="../../base.css">
9+
</head>
10+
11+
<body>
12+
<button class="butts">Click Me!</button>
13+
<button class="cool">Click me also!</button>
14+
15+
<h2>Buy Buttons!</h2>
16+
<button data-price="100" class="buy">Buy Item <strong>1</strong></button>
17+
<button data-price="200" class="buy">Buy Item <strong>2</strong></button>
18+
<button data-price="300" class="buy">Buy Item <strong>3</strong></button>
19+
<button data-price="400" class="buy">Buy Item <strong>4</strong></button>
20+
<button data-price="500" class="buy">Buy Item <strong>5</strong></button>
21+
<button data-price="600" class="buy">Buy Item <strong>6</strong></button>
22+
<button data-price="700" class="buy">Buy Item <strong>7</strong></button>
23+
<button data-price="800" class="buy">Buy Item <strong>8</strong></button>
24+
<button data-price="900" class="buy">Buy Item <strong>9</strong></button>
25+
<button data-price="1000" class="buy">Buy Item <strong>10</strong></button>
26+
27+
<img class="photo" src="https://picsum.photos/200" alt="Nice">
28+
29+
<script src="./events.js"></script>
30+
</body>
31+
32+
</html>

‎exercises/29 - Events/events-FINISHED.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const butts = document.querySelector(".butts");
2+
const coolButton = document.querySelector(".cool");
3+
4+
function handleClick() {
5+
console.log("🐛 IT GOT CLICKED!!!");
6+
}
7+
8+
const hooray = () => console.log("HOORAY!");
9+
10+
butts.addEventListener("click", function () {
11+
console.log("Im an anon!");
12+
});
13+
coolButton.addEventListener("click", hooray);
14+
15+
butts.removeEventListener("click", handleClick);
16+
17+
// Listen on multiple items
18+
const buyButtons = document.querySelectorAll("button.buy");
19+
20+
function handleBuyButtonClick(event) {
21+
console.log("You clicked a button!");
22+
const button = event.target;
23+
// console.log(button.textContent);
24+
// console.log(parseFloat(event.target.dataset.price));
25+
console.log(event.target);
26+
console.log(event.currentTarget);
27+
console.log(event.target === event.currentTarget);
28+
// Stop this event from bubbling up
29+
// event.stopPropagation();
30+
}
31+
32+
buyButtons.forEach(function (buyButton) {
33+
buyButton.addEventListener("click", handleBuyButtonClick);
34+
});
35+
36+
window.addEventListener(
37+
"click",
38+
function (event) {
39+
console.log("YOU CLICKED THE WINDOW");
40+
console.log(event.target);
41+
console.log(event.type);
42+
// event.stopPropagation();
43+
console.log(event.bubbles);
44+
},
45+
{ capture: true }
46+
);
47+
48+
const photoEl = document.querySelector(".photo");
49+
50+
photoEl.addEventListener("mouseenter", (e) => {
51+
console.log(e.currentTarget);
52+
console.log(this);
53+
});

0 commit comments

Comments
 (0)