through day12 · PirieD704/JavaScript30@a62cec4 · GitHub
Skip to content

Commit a62cec4

Browse files
PirieD704PirieD704
committed
through day12
1 parent 5b58032 commit a62cec4

11 files changed

Lines changed: 636 additions & 0 deletions

File tree

‎07 - Array Cardio Day 2/index-WORKED.html‎

Lines changed: 69 additions & 0 deletions

‎08 - Fun with HTML5 Canvas/index-WORKED.html‎

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>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 = '#BADASS';
15+
ctx.lineJoin = 'round';
16+
ctx.lineCap = 'round';
17+
18+
let isDrawing= false;
19+
let lastX = 0;
20+
let lastY = 0;
21+
let hue = 0;
22+
let direction = true;
23+
24+
function draw(e) {
25+
if(!isDrawing) return;
26+
console.log(e);
27+
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
28+
ctx.beginPath();
29+
ctx.moveTo(lastX, lastY);
30+
ctx.lineTo(e.offsetX, e.offsetY);
31+
ctx.stroke();
32+
[lastX, lastY] = [e.offsetX, e.offsetY];
33+
hue++;
34+
if(hue >= 360){
35+
hue = 0;
36+
}
37+
38+
if(ctx.lineWidth >= 100 || ctx.lineWidth <= 1){
39+
direction = !direction;
40+
}
41+
if(direction){
42+
ctx.lineWidth++;
43+
} else {
44+
ctx.lineWidth--;
45+
}
46+
47+
}
48+
49+
canvas.addEventListener('mousedown', (e) => {
50+
isDrawing = true;
51+
[lastX, lastY] = [e.offsetX, e.offsetY];
52+
});
53+
54+
canvas.addEventListener('mousemove', draw);
55+
56+
canvas.addEventListener('mouseup', () => isDrawing = false);
57+
canvas.addEventListener('mouseout', () => isDrawing = false);
58+
59+
</script>
60+
61+
<style>
62+
html, body {
63+
margin:0;
64+
}
65+
</style>
66+
67+
</body>
68+
</html>

‎08 - Fun with HTML5 Canvas/readMe.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
cool tricks with canvas:
2+

‎09 - Dev Tools Domination/index-WORKED.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()">×BREAK×DOWN×</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>

‎09 - Dev Tools Domination/readMe.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
Interpolated:
3+
in a console.log(), you can pass as second string or whatever and have it inserted into the first string with the identifying piece %s. This was much like the query strings in SQL.
4+
5+
Styling:
6+
You can style console.log by using the %c. include it in the qoutations at the beginning. then pass it some regular css in qoutations the same way you would a second argument in a method.
7+
8+
9+
Warning:
10+
shows up in red with a little X when you console.warn()
11+
12+
Info:
13+
puts a little i for info in console.info()
14+
15+
Testing:
16+
console.assert() takes two parameters, the first being a boolean check, if true, then nothing happens, if false, then the assertion is console.logged and the second parameter message is logged.
17+
18+
clear:
19+
console.clear() will clear the console. Not smart to put at the bottom of the JS file.
20+
21+
viewing DOM elements:
22+
you can console.log or console.dir DOM elements that are stored in JS variables. console.dir is a way to look at all the properties and methods that live in a given element.
23+
24+
Grouping:
25+
when you want to console.log a bunch of stuff for items in something like an Array, you run console.log in your loop. by doing console.groupName and passing the identifying name for each item, you create a bold header in the console. This requires a console.groupEnd() a the completion that is passed the same identifying name the first console.group was. You can also do console.groupCollapsed so that the tabs start out collapsed.
26+
27+
Count:
28+
just logs in real time how many of whatever string you have iterated over.
29+
30+
timing:
31+
helps to have quick visual for how long something is taking. You run console.time() and pass a string to defining whatever you are timing. Then run whatever task you need that takes time. You then run console.timeEnd() and pass it the same string you used to define it in the first console.time() and it will log the appropriately in the console.

‎10 - Hold Shift and Check Checkboxes/index-WORKED.html‎

Lines changed: 151 additions & 0 deletions

0 commit comments

Comments
 (0)