Skip to content

Commit c0e840b

Browse files
sfigartsfigart
committed
Completed exercises 1 - 7
1 parent 5c8d898 commit c0e840b

File tree

6 files changed

+343
-48
lines changed

6 files changed

+343
-48
lines changed

‎01 - JavaScript Drum Kit/index-final.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
</script>
11+
12+
<style>
13+
html, body {
14+
margin:0;
15+
}
16+
</style>
17+
18+
</body>
19+
</html>

‎02 - JS + CSS Clock/index.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
8+
9+
10+
<div class="clock">
11+
<div class="clock-face">
12+
<div class="hand hour-hand"></div>
13+
<div class="hand min-hand"></div>
14+
<div class="hand second-hand"></div>
15+
</div>
16+
</div>
17+
18+
19+
<style>
20+
html {
21+
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
22+
background-size:cover;
23+
font-family:'helvetica neue';
24+
text-align: center;
25+
font-size: 10px;
26+
}
27+
28+
body {
29+
font-size: 2rem;
30+
display:flex;
31+
flex:1;
32+
min-height: 100vh;
33+
align-items: center;
34+
}
35+
36+
.clock {
37+
width: 30rem;
38+
height: 30rem;
39+
border:20px solid white;
40+
border-radius:50%;
41+
margin:50px auto;
42+
position: relative;
43+
padding:2rem;
44+
box-shadow:
45+
0 0 0 4px rgba(0,0,0,0.1),
46+
inset 0 0 0 3px #EFEFEF,
47+
inset 0 0 10px black,
48+
0 0 10px rgba(0,0,0,0.2);
49+
}
50+
51+
.clock-face {
52+
position: relative;
53+
width: 100%;
54+
height: 100%;
55+
transform: translateY(-3px); /* account for the height of the clock hands */
56+
}
57+
58+
.hand {
59+
width:50%;
60+
height:6px;
61+
background:black;
62+
position: absolute;
63+
top:50%;
64+
transform-origin: 100%;
65+
transform: rotate(90deg);
66+
transition: all 0.05s;
67+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
68+
}
69+
</style>
70+
71+
<script>
72+
const secondHand = document.querySelector('.second-hand');
73+
const minsHand = document.querySelector('.min-hand');
74+
const hourHand = document.querySelector('.hour-hand');
75+
76+
function setDate() {
77+
const now = new Date();
78+
79+
const seconds = now.getSeconds();
80+
const secondsDegrees = ((seconds / 60) * 360) + 90;
81+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
82+
83+
const mins = now.getMinutes();
84+
const minsDegrees = ((mins / 60) * 360) + 90;
85+
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
86+
87+
const hour = now.getMinutes();
88+
const hourDegrees = ((mins / 12) * 360) + 90;
89+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
90+
}
91+
92+
setInterval(setDate, 1000);
93+
94+
</script>
95+
</body>
96+
</html>

‎03 - CSS Variables/index-START.html

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,33 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
1313

1414
<label for="blur">Blur:</label>
15-
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
1616

1717
<label for="base">Base Color</label>
18-
<input id="base" type="color" name="base" value="#ffc600">
18+
<input type="color" name="base" value="#ffc600">
1919
</div>
2020

2121
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
2222

2323
<style>
24-
24+
:root {
25+
--base: blue;
26+
--spacing: 10px;
27+
--blur: 10px;
28+
}
29+
30+
img {
31+
padding: var(--spacing);
32+
background: var(--base);
33+
filter: blur(var(--blur));
34+
}
35+
36+
.hl {
37+
color: var(--base);
38+
}
2539
/*
2640
misc styles, nothing to do with CSS variables
2741
*/
@@ -48,6 +62,16 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
4862
</style>
4963

5064
<script>
65+
const inputs = document.querySelectorAll('.controls input');
66+
67+
function handleUpdate() {
68+
const suffix = this.dataset.sizing || '';
69+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
70+
71+
}
72+
73+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
74+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
5175
</script>
5276

5377
</body>

‎04 - Array Cardio Day 1/index-START.html

Lines changed: 127 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,147 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Array Cardio 💪</title>
5+
<title>Flex Panels 💪</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
67
</head>
78
<body>
8-
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
9-
<script>
10-
// Get your shorts on - this is an array workout!
11-
// ## Array Cardio Day 1
12-
13-
// Some data we can work with
9+
<style>
10+
html {
11+
box-sizing: border-box;
12+
background:#ffc600;
13+
font-family:'helvetica neue';
14+
font-size: 20px;
15+
font-weight: 200;
16+
}
17+
body {
18+
margin: 0;
19+
}
20+
*, *:before, *:after {
21+
box-sizing: inherit;
22+
}
1423

15-
const inventors = [
16-
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
17-
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
18-
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
19-
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
20-
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
21-
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
22-
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
23-
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
24-
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
25-
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
26-
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
27-
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
28-
];
24+
.panels {
25+
min-height:100vh;
26+
overflow: hidden;
27+
28+
display: flex;
29+
}
2930

30-
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
31+
.panel {
32+
background:#6B0F9C;
33+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
34+
color:white;
35+
text-align: center;
36+
/* Safari transitionend event.propertyName === flex */
37+
/* Chrome + FF transitionend event.propertyName === flex-grow */
38+
transition:
39+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
40+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
41+
background 0.2s;
42+
font-size: 20px;
43+
background-size:cover;
44+
background-position:center;
45+
46+
flex: 1;
47+
flex-grow: 1;
48+
justify-content: center;
49+
align-items: center;
50+
display: flex;
51+
flex-direction: column;
52+
}
3153

32-
// Array.prototype.filter()
33-
// 1. Filter the list of inventors for those who were born in the 1500's
3454

35-
// Array.prototype.map()
36-
// 2. Give us an array of the inventors' first and last names
55+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
56+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
57+
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
58+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
59+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
3760

38-
// Array.prototype.sort()
39-
// 3. Sort the inventors by birthdate, oldest to youngest
61+
.panel > * {
62+
margin:0;
63+
width: 100%;
64+
transition:transform 0.5s;
65+
66+
flex: 1 0 auto;
67+
display: flex;
68+
justify-content: center;
69+
align-items: center;
70+
}
71+
72+
.panel > *:first-child { transform: translateY(-100%); }
73+
.panel.open-active > *:first-child { transform: translateY(0); }
74+
.panel > *:last-child { transform: translateY(100%); }
75+
.panel.open-active > *:last-child { transform: translateY(0); }
4076

41-
// Array.prototype.reduce()
42-
// 4. How many years did all the inventors live?
77+
.panel p {
78+
text-transform: uppercase;
79+
font-family: 'Amatic SC', cursive;
80+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
81+
font-size: 2em;
82+
}
83+
.panel p:nth-child(2) {
84+
font-size: 4em;
85+
}
4386

44-
// 5. Sort the inventors by years lived
87+
.panel.open {
88+
font-size:40px;
89+
90+
flex: 5;
91+
}
4592

46-
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
47-
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
93+
.cta {
94+
color:white;
95+
text-decoration: none;
96+
}
4897

98+
</style>
4999

50-
// 7. sort Exercise
51-
// Sort the people alphabetically by last name
52100

53-
// 8. Reduce Exercise
54-
// Sum up the instances of each of these
55-
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
101+
<div class="panels">
102+
<div class="panel panel1">
103+
<p>Hey</p>
104+
<p>Let's</p>
105+
<p>Dance</p>
106+
</div>
107+
<div class="panel panel2">
108+
<p>Give</p>
109+
<p>Take</p>
110+
<p>Receive</p>
111+
</div>
112+
<div class="panel panel3">
113+
<p>Experience</p>
114+
<p>It</p>
115+
<p>Today</p>
116+
</div>
117+
<div class="panel panel4">
118+
<p>Give</p>
119+
<p>All</p>
120+
<p>You can</p>
121+
</div>
122+
<div class="panel panel5">
123+
<p>Life</p>
124+
<p>In</p>
125+
<p>Motion</p>
126+
</div>
127+
</div>
56128

129+
<script>
130+
const panels = document.querySelectorAll('.panel');
131+
132+
function toggleOpen() {
133+
this.classList.toggle('open');
134+
}
135+
136+
function toggleActive(e) {
137+
console.log(e.propertyName);
138+
if (e.propertyName.includes('flex')) {
139+
this.classList.toggle('open-active');
140+
}
141+
}
142+
143+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
144+
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
57145
</script>
146+
58147
</body>
59148
</html>

0 commit comments

Comments
 (0)