Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 15736d8

Browse files
add task09 and update the answer of task 08
1 parent 4616fa2 commit 15736d8

File tree

4 files changed

+276
-0
lines changed

4 files changed

+276
-0
lines changed
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪💪</title>
6+
</head>
7+
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
9+
<script>
10+
// ## Array Cardio Day 2
11+
12+
const people = [
13+
{ name: 'Wes', year: 1988 },
14+
{ name: 'Kait', year: 1986 },
15+
{ name: 'Irv', year: 1970 },
16+
{ name: 'Lux', year: 2015 },
17+
];
18+
19+
const comments = [
20+
{ text: 'Love this!', id: 523423 },
21+
{ text: 'Super good', id: 823423 },
22+
{ text: 'You are the best', id: 2039842 },
23+
{ text: 'Ramen is my fav food ever', id: 123523 },
24+
{ text: 'Nice Nice Nice!', id: 542328 }
25+
];
26+
27+
// Some and Every Checks
28+
// Array.prototype.some() // is at least one person 19?
29+
// const isAdult = people.some(function(person) {
30+
// const currentYear = (new Date()).getFullYear();
31+
// if(currentYear - person.year >= 19) {
32+
// return true;
33+
// }
34+
// });
35+
36+
const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
37+
38+
console.log({isAdult});
39+
// Array.prototype.every() // is everyone 19?
40+
41+
const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
42+
console.log({allAdults});
43+
44+
// Array.prototype.find()
45+
// Find is like filter, but instead returns just the one you are looking for
46+
// find the comment with the ID of 823423
47+
48+
49+
const comment = comments.find(comment => comment.id === 823423);
50+
51+
console.log(comment);
52+
53+
// Array.prototype.findIndex()
54+
// Find the comment with this ID
55+
// delete the comment with the ID of 823423
56+
const index = comments.findIndex(comment => comment.id === 823423);
57+
console.log(index);
58+
59+
// comments.splice(index, 1);
60+
61+
const newComments = [
62+
...comments.slice(0, index),
63+
...comments.slice(index + 1)
64+
];
65+
66+
</script>
67+
</body>
68+
</html>
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>HTML5 Canvas</title>
6+
</head>
7+
<body>
8+
<canvas id="draw" width="800" height="800"></canvas>
9+
<script>
10+
const canvas = document.querySelector('#draw');
11+
const ctx = canvas.getContext('2d');
12+
canvas.width = window.innerWidth;
13+
canvas.height = window.innerHeight;
14+
ctx.strokeStyle = '#BADA55';
15+
ctx.lineJoin = 'round';
16+
ctx.lineCap = 'round';
17+
ctx.lineWidth = 100;
18+
// ctx.globalCompositeOperation = 'multiply';
19+
20+
let isDrawing = false;
21+
let lastX = 0;
22+
let lastY = 0;
23+
let hue = 0;
24+
let direction = true;
25+
26+
function draw(e) {
27+
if (!isDrawing) return; // stop the fn from running when they are not moused down
28+
console.log(e);
29+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
30+
ctx.beginPath();
31+
// start from
32+
ctx.moveTo(lastX, lastY);
33+
// go to
34+
ctx.lineTo(e.offsetX, e.offsetY);
35+
ctx.stroke();
36+
[lastX, lastY] = [e.offsetX, e.offsetY];
37+
38+
hue++;
39+
if (hue >= 360) {
40+
hue = 0;
41+
}
42+
if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
43+
direction = !direction;
44+
}
45+
46+
if(direction) {
47+
ctx.lineWidth++;
48+
} else {
49+
ctx.lineWidth--;
50+
}
51+
52+
}
53+
54+
canvas.addEventListener('mousedown', (e) => {
55+
isDrawing = true;
56+
[lastX, lastY] = [e.offsetX, e.offsetY];
57+
});
58+
59+
60+
canvas.addEventListener('mousemove', draw);
61+
canvas.addEventListener('mouseup', () => isDrawing = false);
62+
canvas.addEventListener('mouseout', () => isDrawing = false);
63+
64+
</script>
65+
66+
<style>
67+
html, body {
68+
margin:0;
69+
}
70+
</style>
71+
72+
</body>
73+
</html>
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console Tricks!</title>
6+
</head>
7+
<body>
8+
9+
<p onClick="makeGreen()">×ばつ</p>
10+
11+
<script>
12+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
13+
14+
function makeGreen() {
15+
const p = document.querySelector('p');
16+
p.style.color = '#BADA55';
17+
p.style.fontSize = '50px';
18+
}
19+
20+
// Regular
21+
console.log('hello');
22+
23+
// Interpolated
24+
console.log('Hello I am a %s string!', '💩');
25+
26+
// Styled
27+
// console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
28+
29+
// warning!
30+
console.warn('OH NOOO');
31+
32+
// Error :|
33+
console.error('Shit!');
34+
35+
// Info
36+
console.info('Crocodiles eat 3-4 people per year');
37+
38+
// Testing
39+
const p = document.querySelector('p');
40+
41+
console.assert(p.classList.contains('ouch'), 'That is wrong!');
42+
43+
// clearing
44+
console.clear();
45+
46+
// Viewing DOM Elements
47+
console.log(p);
48+
console.dir(p);
49+
50+
console.clear();
51+
52+
// Grouping together
53+
dogs.forEach(dog => {
54+
console.groupCollapsed(`${dog.name}`);
55+
console.log(`This is ${dog.name}`);
56+
console.log(`${dog.name} is ${dog.age} years old`);
57+
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
58+
console.groupEnd(`${dog.name}`);
59+
});
60+
61+
// counting
62+
63+
console.count('Wes');
64+
console.count('Wes');
65+
console.count('Steve');
66+
console.count('Steve');
67+
console.count('Wes');
68+
console.count('Steve');
69+
console.count('Wes');
70+
console.count('Steve');
71+
console.count('Steve');
72+
console.count('Steve');
73+
console.count('Steve');
74+
console.count('Steve');
75+
76+
// timing
77+
console.time('fetching data');
78+
fetch('https://api.github.com/users/wesbos')
79+
.then(data => data.json())
80+
.then(data => {
81+
console.timeEnd('fetching data');
82+
console.log(data);
83+
});
84+
85+
console.table(dogs);
86+
87+
</script>
88+
</body>
89+
</html>
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console Tricks!</title>
6+
</head>
7+
<body>
8+
9+
<p onClick="makeGreen()">×ばつ</p>
10+
11+
<script>
12+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
13+
14+
function makeGreen() {
15+
const p = document.querySelector('p');
16+
p.style.color = '#BADA55';
17+
p.style.fontSize = '50px';
18+
}
19+
20+
// Regular
21+
22+
// Interpolated
23+
24+
// Styled
25+
26+
// warning!
27+
28+
// Error :|
29+
30+
// Info
31+
32+
// Testing
33+
34+
// clearing
35+
36+
// Viewing DOM Elements
37+
38+
// Grouping together
39+
40+
// counting
41+
42+
// timing
43+
44+
</script>
45+
</body>
46+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /