Skip to content

Commit 04fadfa

Browse files
palashmonpalashmon
committed
Added the starter files
1 parent 7e1c899 commit 04fadfa

File tree

98 files changed

+3295
-2
lines changed

Some content is hidden

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

98 files changed

+3295
-2
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules/
2+
.DS_Store
3+
haters/
4+
*.log

‎01 - New Variables/let-const-real-life.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>let and const real world</title>
6+
</head>
7+
<body>
8+
<script>
9+
{
10+
const name = 'wes';
11+
console.log(name); //<-- We will get 'wes' here
12+
}
13+
14+
console.log(name); //<-- We will get empty string here, as name is a window property like `window.name`
15+
16+
for(let i = 0; i < 10; i++) {
17+
console.log(i);
18+
setTimeout(function() {
19+
console.log('The number is ' + i);
20+
},1000);
21+
}
22+
23+
</script>
24+
</body>
25+
</html>

‎01 - New Variables/let-const.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>let and const</title>
6+
</head>
7+
<body>
8+
<script>
9+
const key = 'abc123';
10+
let points = 50;
11+
let winner = false;
12+
13+
const person = {
14+
name: 'Wes',
15+
age: 28
16+
}
17+
18+
// Object.freeze() method freezes an object
19+
// Prevents new properties from being added to it
20+
// prevents existing properties from being removed
21+
// prevents existing properties, or their enumerability, configurability, or writability, from being changed
22+
const wes = Object.freeze(person);
23+
wes.age = 29;
24+
console.log(wes.age);
25+
26+
</script>
27+
</body>
28+
</html>

‎01 - New Variables/temporal-dad-zone.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>let and const real world</title>
6+
</head>
7+
<body>
8+
<script>
9+
10+
// The Temporal Dead Zone
11+
console.log(pizza); //<-- We get a ReferenceError: pizza is not defined
12+
/*
13+
This is Temporal Dead Zone
14+
15+
Trying to access `pizza`, before the const `pizza` statement is reached throws error
16+
*/
17+
const pizza = 'Deep Dish';
18+
19+
// This snippet won't throw because return `food` isn't executed until after `food` leaves the Temporal Dead Zone
20+
function eat () {
21+
return food;
22+
}
23+
/*
24+
This is Temporal Dead Zone
25+
eat() function is not executed yet
26+
*/
27+
const food = 'pizza';
28+
console.log(eat()); //<-- We left dead zone, now eat() is executed. so no errors.
29+
30+
</script>
31+
</body>
32+
</html>

‎01 - New Variables/var-let-const.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>let and const</title>
6+
</head>
7+
<body>
8+
<script>
9+
function setWidth() {
10+
var width = 100;
11+
console.log(width);
12+
}
13+
//<-- `width` is not accessible here, as var is function scope
14+
setWidth();
15+
16+
var age = 100;
17+
if(age > 12) {
18+
const dogYears = age * 7;
19+
console.log(`You are ${dogYears} dog years old!`);
20+
}
21+
//<-- `dogYears` is not accessible here, as var is block scope
22+
23+
let height = 200;
24+
const key = 'abc123';
25+
26+
// height = 201 works fine, as we can reassign it
27+
// key = 'abc1234' wil not work fine, as we can only assign const variables once
28+
29+
</script>
30+
</body>
31+
</html>

‎02 - Arrow functions/arrow-functions-examples.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Arrow functions examples</title>
6+
</head>
7+
<body>
8+
<script>
9+
10+
const race = '100m Dash';
11+
const winners = ['Hunter Gath', 'Singa Song', 'Imda Bos'];
12+
13+
const win = winners.map((winner, i) => ({name: winner, race, place: i + 1}));
14+
15+
const ages = [23,62,45,34,2,72,234,87,34];
16+
ages.sort((a, b) => a - b);
17+
// Result<-- [2, 23, 34, 34, 45, 62, 72, 87, 234]
18+
19+
20+
// Using Arrow function here like `param => expression`
21+
const old = ages.filter(age => age >= 60);
22+
console.log(old);
23+
24+
</script>
25+
</body>
26+
</html>

‎02 - Arrow functions/arrow-functions-this-ANSWER.html

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Arrow Functions</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
.wrap {
11+
min-height: 100vh;
12+
display:flex;
13+
justify-content: center;
14+
align-items: center;
15+
font-family: sans-serif;
16+
font-weight: 100;
17+
color:white;
18+
}
19+
20+
.box {
21+
background:black url(https://unsplash.it/1500/1500?image=560&blur=0.5) center fixed no-repeat;
22+
width:50px;
23+
height:50px;
24+
padding:50px;
25+
transition: width 0.2s, height 0.6s;
26+
position: relative;
27+
}
28+
29+
.box.opening {
30+
width:500px;
31+
height:500px;
32+
}
33+
34+
.box h2 {
35+
position: absolute;
36+
width:100%;
37+
font-size: 100px;
38+
transform:translateX(-200%);
39+
transition: all 0.5s;
40+
top:0;
41+
}
42+
43+
.box p {
44+
position: absolute;
45+
width:100%;
46+
transform:translateX(200%);
47+
transition: all 0.5s;
48+
bottom:0;
49+
}
50+
51+
.box.open > * {
52+
transform:translateX(0%);
53+
}
54+
</style>
55+
56+
<div class="wrap">
57+
<div class="box">
58+
<h2>Wes Bos</h2>
59+
<p class="social">@wesbos</p>
60+
</div>
61+
</div>
62+
63+
<script>
64+
const box = document.querySelector('.box');
65+
box.addEventListener('click', function() {
66+
let first = 'opening';
67+
let second = 'open';
68+
69+
if(this.classList.contains(first)) {
70+
// switch them
71+
[first, second] = [second, first];
72+
}
73+
74+
this.classList.toggle(first);
75+
setTimeout(() => {
76+
this.classList.toggle(second);
77+
}, 250);
78+
});
79+
</script>
80+
81+
</body>
82+
</html>

‎02 - Arrow functions/arrow-functions-this.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Arrow Functions</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
.wrap {
11+
min-height: 100vh;
12+
display:flex;
13+
justify-content: center;
14+
align-items: center;
15+
font-family: sans-serif;
16+
font-weight: 100;
17+
color:white;
18+
}
19+
20+
.box {
21+
background:black url(https://unsplash.it/1500/1500?image=560&blur=0.5) center fixed no-repeat;
22+
width:50px;
23+
height:50px;
24+
padding:50px;
25+
transition: width 0.2s, height 0.6s;
26+
position: relative;
27+
}
28+
29+
.box.opening {
30+
width:500px;
31+
height:500px;
32+
}
33+
34+
.box h2 {
35+
position: absolute;
36+
width:100%;
37+
font-size: 100px;
38+
transform:translateX(-200%);
39+
transition: all 0.5s;
40+
top:0;
41+
}
42+
43+
.box p {
44+
position: absolute;
45+
width:100%;
46+
transform:translateX(200%);
47+
transition: all 0.5s;
48+
bottom:0;
49+
}
50+
51+
.box.open > * {
52+
transform:translateX(0%);
53+
}
54+
</style>
55+
56+
<div class="wrap">
57+
<div class="box">
58+
<h2>Wes Bos</h2>
59+
<p class="social">@wesbos</p>
60+
</div>
61+
</div>
62+
63+
<script>
64+
const box = document.querySelector('.box');
65+
box.addEventListener('click', function() {
66+
let first = 'opening';
67+
let second = 'open';
68+
69+
if(this.classList.contains(first)) {
70+
[first, second] = [second, first];
71+
}
72+
73+
this.classList.toggle(first);
74+
setTimeout(() => {
75+
76+
// Arrow function simply capture the `this` of the surrounding scope.
77+
// In this case, the box class element that was clicked
78+
console.log(this);
79+
this.classList.toggle(second);
80+
}, 500);
81+
});
82+
</script>
83+
84+
</body>
85+
</html>

‎02 - Arrow functions/arrow-functions.html

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Arrow functions → → </title>
6+
</head>
7+
<body>
8+
<script>
9+
const names = ['wes', 'kait', 'lux'];
10+
11+
// Simple function
12+
const fullNames = names.map(function(name) {
13+
return `${name} bos`;
14+
});
15+
16+
// Arrow function with name parameter (param1, param2) => {...}
17+
const fullNames2 = names.map((name) => {
18+
return `${name} bos`;
19+
});
20+
21+
// If we have only one param then () are not needed, just use `name => {...}`
22+
const fullNames3 = names.map(name => {
23+
return `${name} bos`;
24+
});
25+
26+
// Arrow function with implicit return
27+
const fullNames4 = names.map(name => `${name} bos`);
28+
29+
// If there is no param, then we can simply do `() => expression`
30+
const fullNames5 = names.map(() => `cool bos`);
31+
32+
// Anonymous function
33+
const sayMyName = (name) => {
34+
alert(`Hello ${name}!`)
35+
}
36+
37+
sayMyName('Wes');
38+
39+
</script>
40+
</body>
41+
</html>

‎02 - Arrow functions/default-arguments.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Default Arguments</title>
6+
</head>
7+
<body>
8+
<script>
9+
function calculateBill(total, tax = 0.13, tip = 0.15) {
10+
return total + (total * tax) + (total * tip);
11+
}
12+
13+
const totalBill = calculateBill(100, undefined, 0.25);
14+
console.log(totalBill);
15+
</script>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)