Skip to content

Commit aa5d9fe

Browse files
wesboswesbos
committed
I promise i am almost done, you wont await any longer
1 parent 4cccc75 commit aa5d9fe

File tree

6 files changed

+428
-1
lines changed

6 files changed

+428
-1
lines changed

‎exercises/56 - Gallery/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,6 @@ <h2>Test Title</h2>
108108
</div>
109109

110110
<script src="./gallery-prototype.js"></script>
111-
112111
</body>
113112

114113
</html>

‎playground/bind-call-apply-FINISHED.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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>Bind Call and Apply!</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
11+
<body>
12+
<p>Hey</p>
13+
<button>Click me</button>
14+
<div class="wrapper">
15+
<p>Hey im in a wrapper</p>
16+
</div>
17+
<script>
18+
const person = {
19+
name: 'Wes Bos',
20+
sayHi() {
21+
console.log(this);
22+
console.log(`hey ${this.name}`);
23+
return `hey ${this.name}`;
24+
}
25+
};
26+
27+
const jenna = { name: 'Jenna' };
28+
29+
const sayHi = person.sayHi.bind({ name: 'Harry' });
30+
31+
// QS Example
32+
// by calling bind against querySelector, we say when the $ function is run, use `document` as the `this` value.
33+
const $ = document.querySelector.bind(document);
34+
const lookFor = document.querySelectorAll.bind(document);
35+
36+
const wrapper = document.querySelector('.wrapper');
37+
const p = wrapper.querySelector('p');
38+
console.log(p);
39+
console.log($('p'));
40+
console.log(lookFor('p'));
41+
42+
const bill = {
43+
total: 1000,
44+
calculate: function (taxRate) {
45+
console.log(this);
46+
return this.total + (this.total * taxRate);
47+
},
48+
describe(mealType, drinkType, taxRate) {
49+
console.log(`Your meal of ${mealType} with a drink of ${drinkType} was ${this.calculate(taxRate)}`);
50+
}
51+
};
52+
53+
const total = bill.calculate(0.13);
54+
const calc = bill.calculate.bind({ total: 500 }, 0.06);
55+
56+
console.log(calc());
57+
const total2 = bill.calculate.call({ total: 500 }, 0.06);
58+
console.log(total2);
59+
60+
const total3 = bill.calculate.apply({ total: 325 }, [0.60]);
61+
console.log(total3);
62+
63+
const myMeal = bill.describe.call(bill, 'pizza', 'beer', 0.13);
64+
console.log(myMeal);
65+
const myMeal2 = bill.describe.apply(bill, ['pizza', 'beer', 0.13]);
66+
console.log(myMeal2);
67+
68+
</script>
69+
</body>
70+
71+
</html>

‎playground/bind-call-apply.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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>Bind Call and Apply!</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
11+
<body>
12+
<p>Hey</p>
13+
<button>Click me</button>
14+
<div class="wrapper">
15+
<p>Hey im in a wrapper</p>
16+
</div>
17+
<script>
18+
const person = {
19+
name: 'Wes Bos',
20+
sayHi() {
21+
console.log(this);
22+
console.log(`hey ${this.name}`);
23+
return `hey ${this.name}`;
24+
}
25+
};
26+
27+
const jenna = { name: 'Jenna' };
28+
29+
const sayHi = person.sayHi.bind({ name: 'Harry' });
30+
31+
// QS Example
32+
// by calling bind against querySelector, we say when the $ function is run, use `document` as the `this` value.
33+
const $ = document.querySelector.bind(document);
34+
const lookFor = document.querySelectorAll.bind(document);
35+
36+
const wrapper = document.querySelector('.wrapper');
37+
const p = wrapper.querySelector('p');
38+
console.log(p);
39+
console.log($('p'));
40+
console.log(lookFor('p'));
41+
42+
const bill = {
43+
total: 1000,
44+
calculate: function (taxRate) {
45+
console.log(this);
46+
return this.total + (this.total * taxRate);
47+
},
48+
describe(mealType, drinkType, taxRate) {
49+
console.log(`Your meal of ${mealType} with a drink of ${drinkType} was ${this.calculate(taxRate)}`);
50+
}
51+
};
52+
53+
const total = bill.calculate(0.13);
54+
const calc = bill.calculate.bind({ total: 500 }, 0.06);
55+
56+
console.log(calc());
57+
const total2 = bill.calculate.call({ total: 500 }, 0.06);
58+
console.log(total2);
59+
60+
const total3 = bill.calculate.apply({ total: 325 }, [0.60]);
61+
console.log(total3);
62+
63+
const myMeal = bill.describe.call(bill, 'pizza', 'beer', 0.13);
64+
console.log(myMeal);
65+
const myMeal2 = bill.describe.apply(bill, ['pizza', 'beer', 0.13]);
66+
console.log(myMeal2);
67+
68+
</script>
69+
</body>
70+
71+
</html>

‎playground/event-loop-FINISHED.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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>Event Loop</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
11+
<body>
12+
<style>
13+
.go {
14+
margin: 5rem;
15+
background: white;
16+
padding: 5rem;
17+
width: 25rem;
18+
height: 25rem;
19+
transition: all 0.2s;
20+
}
21+
22+
.go.circle {
23+
border-radius: 50%;
24+
}
25+
26+
.go.red {
27+
background: red;
28+
}
29+
30+
.go.purple {
31+
background: purple;
32+
color: white;
33+
}
34+
35+
.go.fadeOut {
36+
opacity: 0;
37+
}
38+
</style>
39+
<div class="go">Click Me</div>
40+
<script>
41+
function go(e) {
42+
const el = e.currentTarget;
43+
// 1. Change the text to GO when clicked.
44+
el.textContent = 'GO';
45+
setTimeout(function () {
46+
// 2. Make it a circle after 2 seconds
47+
el.classList.add('circle');
48+
setTimeout(function () {
49+
// 3. Make it red after 0.5s
50+
el.classList.add('red');
51+
setTimeout(function () {
52+
// 4. make it square after 0.25s
53+
el.classList.remove('circle');
54+
setTimeout(function () {
55+
// 5. make it purple
56+
el.classList.remove('red');
57+
el.classList.add('purple');
58+
setTimeout(function () {
59+
// 6. fade out after 0.5s
60+
el.classList.add('invisible');
61+
setTimeout(function () {
62+
console.log('You have reacted the 7th layer of callback hell');
63+
el.classList.remove('invisible', 'purple');
64+
}, 500);
65+
}, 500);
66+
}, 500);
67+
}, 500)
68+
}, 500)
69+
}, 500)
70+
}
71+
72+
73+
</script>
74+
</body>
75+
76+
</html>

‎playground/promise-chain-FINISHED.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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>Event Loop</title>
8+
<link rel="stylesheet" href="../base.css">
9+
</head>
10+
11+
<body>
12+
<style>
13+
.go {
14+
margin: 5rem;
15+
background: white;
16+
padding: 5rem;
17+
width: 25rem;
18+
height: 25rem;
19+
transition: all 0.2s;
20+
}
21+
22+
.go.circle {
23+
border-radius: 50%;
24+
}
25+
26+
.go.red {
27+
background: red;
28+
}
29+
30+
.go.purple {
31+
background: purple;
32+
color: white;
33+
}
34+
35+
.go.fadeOut {
36+
opacity: 0;
37+
}
38+
</style>
39+
<div class="go">Click Me</div>
40+
<script>
41+
const wait = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
42+
43+
wait(200).then(() => {
44+
console.log('Done!');
45+
})
46+
47+
const go = document.querySelector('.go');
48+
49+
50+
function animate(e) {
51+
const el = e.currentTarget;
52+
// 1. Change the text to GO when clicked.
53+
el.textContent = 'GO';
54+
// 2. Make it a circle after 2 seconds
55+
wait(200)
56+
.then(() => {
57+
el.classList.add('circle');
58+
return wait(500);
59+
})
60+
.then(() => {
61+
// 3. Make it red after 0.5s
62+
el.classList.add('red');
63+
return wait(250);
64+
})
65+
.then(() => {
66+
el.classList.remove('circle');
67+
return wait(500);
68+
})
69+
.then(() => {
70+
el.classList.remove('red');
71+
el.classList.add('purple');
72+
return wait(500);
73+
})
74+
.then(() => {
75+
el.classList.add('fadeOut');
76+
})
77+
}
78+
79+
go.addEventListener('click', animate);
80+
81+
go.addEventListener('clickXXXX', function go(e) {
82+
const el = e.currentTarget;
83+
// 1. Change the text to GO when clicked.
84+
el.textContent = 'GO';
85+
setTimeout(function () {
86+
// 2. Make it a circle after 2 seconds
87+
el.classList.add('circle');
88+
setTimeout(function () {
89+
// 3. Make it red after 0.5s
90+
el.classList.add('red');
91+
setTimeout(function () {
92+
// 4. make it square after 0.25s
93+
el.classList.remove('circle');
94+
setTimeout(function () {
95+
// 5. make it purple
96+
el.classList.remove('red');
97+
el.classList.add('purple');
98+
setTimeout(function () {
99+
// 6. fade out after 0.5s
100+
el.classList.add('invisible');
101+
setTimeout(function () {
102+
console.log('You have reacted the 7th layer of callback hell');
103+
el.classList.remove('invisible', 'purple');
104+
}, 500);
105+
}, 500);
106+
}, 500);
107+
}, 500)
108+
}, 500)
109+
}, 500)
110+
});
111+
112+
113+
</script>
114+
</body>
115+
116+
</html>

0 commit comments

Comments
 (0)