Skip to content

Commit 4c76a12

Browse files
johnpdangjohnpdang
committed
js30 day8
1 parent 8b206d5 commit 4c76a12

File tree

113 files changed

+1326
-22
lines changed

Some content is hidden

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

113 files changed

+1326
-22
lines changed

‎08 - Fun with HTML5 Canvas/css/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
html, body {
2+
margin: 0;
3+
}

‎08 - Fun with HTML5 Canvas/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>HTML5 Canvas</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
8+
</head>
9+
<body>
10+
<canvas id="draw" width="800" height="800"></canvas>
11+
<script src="js/script.js"></script>
12+
</body>
13+
</html>

‎08 - Fun with HTML5 Canvas/js/script.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const canvas = document.querySelector("#draw");
2+
const ctx = canvas.getContext("2d");
3+
canvas.width = window.innerWidth;
4+
canvas.height = window.innerHeight;
5+
ctx.strokeStyle = "#BADA55";
6+
ctx.lineJoin = "round";
7+
ctx.lineCap = "round";
8+
ctx.lineWidth = 50;
9+
ctx.globalCompositeOperation = 'multiply';
10+
11+
let isDrawing = false;
12+
let lastX = 0;
13+
let lastY = 0;
14+
let hue = 0;
15+
let direction = true;
16+
17+
function draw(e) {
18+
if (!isDrawing) return; //stops the fn from running when they are not moused down
19+
console.log(e);
20+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
21+
// ctx.lineWidth = hue;
22+
ctx.beginPath();
23+
//start from
24+
ctx.moveTo(lastX, lastY);
25+
//go to
26+
ctx.lineTo(e.offsetX, e.offsetY);
27+
ctx.stroke();
28+
// lastX = e.offsetX;
29+
// lastY = e.offsetY;
30+
[lastX, lastY] = [e.offsetX, e.offsetY]; //destructuring array
31+
hue++;
32+
if (hue >= 360) {
33+
hue = 0;
34+
}
35+
if (ctx.lineWidth >= 50 || ctx.lineWidth <= 1) {
36+
direction = !direction;
37+
}
38+
if (direction) {
39+
ctx.lineWidth++;
40+
} else {
41+
ctx.lineWidth--;
42+
}
43+
}
44+
45+
canvas.addEventListener("mousedown", e => {
46+
isDrawing = true;
47+
[lastX, lastY] = [e.offsetX, e.offsetY];
48+
});
49+
50+
canvas.addEventListener("mousemove", draw);
51+
canvas.addEventListener("mousedown", () => (isDrawing = true));
52+
canvas.addEventListener("mouseup", () => (isDrawing = false));
53+
canvas.addEventListener("mouseout", () => (isDrawing = false));

‎08 - Fun with HTML5 Canvas/index-FINISHED.html renamed to ‎08 - Fun with HTML5 Canvas/src/index-FINISHED.html

File renamed without changes.

‎08 - Fun with HTML5 Canvas/index-START.html renamed to ‎08 - Fun with HTML5 Canvas/src/index-START.html

File renamed without changes.

‎11 - Custom Video Player/scripts.js renamed to ‎09 - Dev Tools Domination/css/style.css

File renamed without changes.

‎09 - Dev Tools Domination/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Console Tricks!</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
</head>
8+
<body>
9+
10+
<p onClick="makeGreen()">×BREAK×DOWN×</p>
11+
12+
<script src="js/script.js"></script>
13+
</body>
14+
</html>

‎09 - Dev Tools Domination/js/script.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
2+
3+
function makeGreen() {
4+
const p = document.querySelector('p');
5+
p.style.color = '#BADA55';
6+
p.style.fontSize = '50px';
7+
}
8+
9+
// Regular
10+
11+
// Interpolated
12+
13+
// Styled
14+
15+
// warning!
16+
17+
// Error :|
18+
19+
// Info
20+
21+
// Testing
22+
23+
// clearing
24+
25+
// Viewing DOM Elements
26+
27+
// Grouping together
28+
29+
// counting
30+
31+
// timing

‎09 - Dev Tools Domination/index-FINISHED.html renamed to ‎09 - Dev Tools Domination/src/index-FINISHED.html

File renamed without changes.

‎09 - Dev Tools Domination/index-START.html renamed to ‎09 - Dev Tools Domination/src/index-START.html

File renamed without changes.

‎10 - Hold Shift and Check Checkboxes/css/style.css

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
html {
2+
font-family: sans-serif;
3+
background: #ffc600;
4+
}
5+
6+
.inbox {
7+
max-width: 400px;
8+
margin: 50px auto;
9+
background: white;
10+
border-radius: 5px;
11+
box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);
12+
}
13+
14+
.item {
15+
display: flex;
16+
align-items: center;
17+
border-bottom: 1px solid #f1f1f1;
18+
}
19+
20+
.item:last-child {
21+
border-bottom: 0;
22+
}
23+
24+
input:checked + p {
25+
background: #f9f9f9;
26+
text-decoration: line-through;
27+
}
28+
29+
input[type="checkbox"] {
30+
margin: 20px;
31+
}
32+
33+
p {
34+
margin: 0;
35+
padding: 20px;
36+
transition: background 0.2s;
37+
flex: 1;
38+
font-family: "helvetica neue";
39+
font-size: 20px;
40+
font-weight: 200;
41+
border-left: 1px solid #d1e2ff;
42+
}

‎10 - Hold Shift and Check Checkboxes/index.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+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hold Shift to Check Multiple Checkboxes</title>
6+
<link rel="stylesheet" href="css/style.css">
7+
8+
</head>
9+
<body>
10+
<!--
11+
The following is a common layout you would see in an email client.
12+
13+
When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
14+
15+
-->
16+
<div class="inbox">
17+
<div class="item">
18+
<input type="checkbox">
19+
<p>This is an inbox layout.</p>
20+
</div>
21+
<div class="item">
22+
<input type="checkbox">
23+
<p>Check one item</p>
24+
</div>
25+
<div class="item">
26+
<input type="checkbox">
27+
<p>Hold down your Shift key</p>
28+
</div>
29+
<div class="item">
30+
<input type="checkbox">
31+
<p>Check a lower item</p>
32+
</div>
33+
<div class="item">
34+
<input type="checkbox">
35+
<p>Everything in between should also be set to checked</p>
36+
</div>
37+
<div class="item">
38+
<input type="checkbox">
39+
<p>Try to do it without any libraries</p>
40+
</div>
41+
<div class="item">
42+
<input type="checkbox">
43+
<p>Just regular JavaScript</p>
44+
</div>
45+
<div class="item">
46+
<input type="checkbox">
47+
<p>Good Luck!</p>
48+
</div>
49+
<div class="item">
50+
<input type="checkbox">
51+
<p>Don't forget to tweet your result!</p>
52+
</div>
53+
</div>
54+
55+
<script src="js/script.js"></script>
56+
</body>
57+
</html>

‎29 - Countdown Timer/scripts-START.js renamed to ‎10 - Hold Shift and Check Checkboxes/js/script.js

File renamed without changes.

‎10 - Hold Shift and Check Checkboxes/index-FINISHED.html renamed to ‎10 - Hold Shift and Check Checkboxes/src/index-FINISHED.html

File renamed without changes.

‎10 - Hold Shift and Check Checkboxes/index-START.html renamed to ‎10 - Hold Shift and Check Checkboxes/src/index-START.html

File renamed without changes.

‎11 - Custom Video Player/style.css renamed to ‎11 - Custom Video Player/css/style.css

File renamed without changes.

‎11 - Custom Video Player/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>HTML Video Player</title>
6-
<link rel="stylesheet" href="style.css">
6+
<link rel="stylesheet" href="css/style.css">
77
</head>
88
<body>
99

@@ -22,6 +22,6 @@
2222
</div>
2323
</div>
2424

25-
<script src="scripts.js"></script>
25+
<script src="js/script.js"></script>
2626
</body>
2727
</html>

‎11 - Custom Video Player/js/script.js

Whitespace-only changes.

‎11 - Custom Video Player/js/scripts.js

Whitespace-only changes.

‎11 - Custom Video Player/scripts-FINISHED.js renamed to ‎11 - Custom Video Player/src/scripts-FINISHED.js

File renamed without changes.

0 commit comments

Comments
 (0)