Skip to content

Commit a62cec4

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

File tree

11 files changed

+636
-0
lines changed

11 files changed

+636
-0
lines changed

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
<script>
9+
// ## Array Cardio Day 2
10+
11+
const people = [
12+
{ name: 'Wes', year: 1988 },
13+
{ name: 'Kait', year: 1986 },
14+
{ name: 'Irv', year: 1970 },
15+
{ name: 'Lux', year: 2015 }
16+
];
17+
18+
const comments = [
19+
{ text: 'Love this!', id: 523423 },
20+
{ text: 'Super good', id: 823423 },
21+
{ text: 'You are the best', id: 2039842 },
22+
{ text: 'Ramen in my fav food ever', id: 123523 },
23+
{ text: 'Nice Nice Nice!', id: 542328 }
24+
];
25+
26+
// Some and Every Checks
27+
// Array.prototype.some() // is at least one person 19?
28+
29+
// the straightforward way to do it
30+
// const isAdult = people.some(function(person){
31+
// const currentYear = (new Date()).getFullYear();
32+
// if(currentYear - person.year >= 19){
33+
// return true;
34+
// }
35+
// });
36+
37+
// the fancier way to do it
38+
const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
39+
40+
console.log({isAdult});
41+
42+
// Array.prototype.every() // is everyone 19?
43+
const allAdult = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
44+
45+
console.log({allAdult});
46+
47+
// Array.prototype.find()
48+
// Find is like filter, but instead returns just the one you are looking for
49+
// find the comment with the ID of 823423
50+
const comment = comments.find(comment => comment.id === 823423);
51+
52+
console.log(comment);
53+
54+
// Array.prototype.findIndex()
55+
// Find the comment with this ID
56+
57+
const findComment = comments.findIndex(comment => comment.id ===823423);
58+
console.log(findComment);
59+
60+
// delete the comment with the ID of 823423
61+
62+
comments.splice(1, 1);
63+
64+
console.table(comments);
65+
66+
67+
</script>
68+
</body>
69+
</html>

‎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
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
<style>
9+
10+
html {
11+
font-family: sans-serif;
12+
background:#ffc600;
13+
}
14+
15+
.inbox {
16+
max-width:400px;
17+
margin:50px auto;
18+
background:white;
19+
border-radius:5px;
20+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
21+
}
22+
23+
.item {
24+
display:flex;
25+
align-items:center;
26+
border-bottom: 1px solid #F1F1F1;
27+
}
28+
29+
.item:last-child {
30+
border-bottom:0;
31+
}
32+
33+
34+
input:checked + p {
35+
background:#F9F9F9;
36+
text-decoration: line-through;
37+
}
38+
39+
input[type="checkbox"] {
40+
margin:20px;
41+
}
42+
43+
p {
44+
margin:0;
45+
padding:20px;
46+
transition:background 0.2s;
47+
flex:1;
48+
font-family:'helvetica neue';
49+
font-size: 20px;
50+
font-weight: 200;
51+
border-left: 1px solid #D1E2FF;
52+
}
53+
54+
.details {
55+
text-align: center;
56+
font-size: 15px;
57+
}
58+
59+
60+
</style>
61+
<!--
62+
The following is a common layout you would see in an email client.
63+
64+
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.
65+
66+
-->
67+
<div class="inbox">
68+
<div class="item">
69+
<input type="checkbox">
70+
<p>This is an inbox layout.</p>
71+
</div>
72+
<div class="item">
73+
<input type="checkbox">
74+
<p>Check one item</p>
75+
</div>
76+
<div class="item">
77+
<input type="checkbox">
78+
<p>Hold down your Shift key</p>
79+
</div>
80+
<div class="item">
81+
<input type="checkbox">
82+
<p>Check a lower item</p>
83+
</div>
84+
<div class="item">
85+
<input type="checkbox">
86+
<p>Everything inbetween should also be set to checked</p>
87+
</div>
88+
<div class="item">
89+
<input type="checkbox">
90+
<p>Try do it with out any libraries</p>
91+
</div>
92+
<div class="item">
93+
<input type="checkbox">
94+
<p>Just regular JavaScript</p>
95+
</div>
96+
<div class="item">
97+
<input type="checkbox">
98+
<p>Good Luck!</p>
99+
</div>
100+
<div class="item">
101+
<input type="checkbox">
102+
<p>Don't forget to tweet your result!</p>
103+
</div>
104+
</div>
105+
106+
<script>
107+
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
108+
console.log(checkboxes);
109+
110+
let lastChecked;
111+
112+
function handleCheck(e){
113+
let inBetween = false;
114+
if (e.shiftKey && this.checked){
115+
checkboxes.forEach(checkbox => {
116+
console.log(checkbox)
117+
if (checkbox === this || checkbox === lastChecked){
118+
inBetween = !inBetween;
119+
console.log("looking inbetween")
120+
}
121+
if(inBetween){
122+
checkbox.checked = true;
123+
}
124+
});
125+
}
126+
127+
lastChecked = this;
128+
}
129+
130+
checkboxes.forEach(checkbox => checkbox.addEventListener("click" , handleCheck));
131+
</script>
132+
</body>
133+
</html>
134+
135+
136+
137+
138+
139+
140+
141+
142+
143+
144+
145+
146+
147+
148+
149+
150+
151+

0 commit comments

Comments
 (0)