Skip to content

Commit 1a4fde1

Browse files
author
Petra Gulicher
committed
Replaced START files and removed finished index files
1 parent 2a3afc0 commit 1a4fde1

File tree

31 files changed

+1634
-146
lines changed

31 files changed

+1634
-146
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ node_modules/
44
haters/
55

66
*-FINISHED.html
7-
*-START.html
7+
index.html

01 - JavaScript Drum Kit/index.html renamed to 01 - JavaScript Drum Kit/index-START.html

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -59,25 +59,8 @@
5959

6060
<script>
6161

62-
63-
function playSound(e) {
64-
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65-
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
66-
if (!audio) return; // stop the function from running all together
67-
audio.currentTime = 0; // rewind to the start
68-
audio.play();
69-
key.classList.add('playing');
70-
}
71-
function removeTransition(e) {
72-
if (e.propertyName !== 'transform') return; // skip it if it's not a transform
73-
this.classList.remove('playing');
74-
}
75-
76-
const keys = document.querySelectorAll('.key');
77-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78-
window.addEventListener('keydown', playSound);
79-
8062
</script>
8163

64+
8265
</body>
8366
</html>

02 - JS + CSS Clock/index.html renamed to 02 - JS + CSS Clock/index-START.html

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -61,36 +61,13 @@
6161
background:black;
6262
position: absolute;
6363
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);
6864
}
69-
</style>
7065

71-
<script>
72-
const secondHand = document.querySelector('.second-hand');
73-
const minsHand = document.querySelector('.min-hand');
74-
const hourHand = document.querySelector('.hour-hand');
66+
</style>
7567

76-
function setDate() {
77-
const now = new Date();
68+
<script>
7869

79-
const seconds = now.getSeconds();
80-
const secondsDegrees = ((seconds / 60) * 360) + 90;
81-
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
8270

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>
71+
</script>
9572
</body>
9673
</html>

‎03 - CSS Variables/index-START.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</head>
7+
<body>
8+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9+
10+
<div class="controls">
11+
<label for="spacing">Spacing:</label>
12+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13+
14+
<label for="blur">Blur:</label>
15+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
17+
<label for="base">Base Color</label>
18+
<input type="color" name="base" value="#ffc600">
19+
</div>
20+
21+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22+
23+
<style>
24+
25+
/*
26+
misc styles, nothing to do with CSS variables
27+
*/
28+
29+
body {
30+
text-align: center;
31+
}
32+
33+
body {
34+
background: #193549;
35+
color: white;
36+
font-family: 'helvetica neue', sans-serif;
37+
font-weight: 100;
38+
font-size: 50px;
39+
}
40+
41+
.controls {
42+
margin-bottom: 50px;
43+
}
44+
45+
input {
46+
width:100px;
47+
}
48+
</style>
49+
50+
<script>
51+
</script>
52+
53+
</body>
54+
</html>

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
// Get your shorts on - this is an array workout!
11+
// ## Array Cardio Day 1
12+
13+
// Some data we can work with
14+
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+
];
29+
30+
const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
31+
32+
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'];
33+
34+
// Array.prototype.filter()
35+
// 1. Filter the list of inventors for those who were born in the 1500's
36+
37+
// Array.prototype.map()
38+
// 2. Give us an array of the inventors' first and last names
39+
40+
// Array.prototype.sort()
41+
// 3. Sort the inventors by birthdate, oldest to youngest
42+
43+
// Array.prototype.reduce()
44+
// 4. How many years did all the inventors live?
45+
46+
// 5. Sort the inventors by years lived
47+
48+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
49+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
50+
51+
52+
// 7. sort Exercise
53+
// Sort the people alphabetically by last name
54+
55+
// 8. Reduce Exercise
56+
// Sum up the instances of each of these
57+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
58+
59+
</script>
60+
</body>
61+
</html>

‎05 - Flex Panel Gallery/index-START.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Flex Panels 💪</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
7+
</head>
8+
<body>
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+
}
23+
24+
.panels {
25+
min-height:100vh;
26+
overflow: hidden;
27+
}
28+
29+
.panel {
30+
background:#6B0F9C;
31+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
32+
color:white;
33+
text-align: center;
34+
align-items:center;
35+
/* Safari transitionend event.propertyName === flex */
36+
/* Chrome + FF transitionend event.propertyName === flex-grow */
37+
transition:
38+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
39+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
40+
background 0.2s;
41+
font-size: 20px;
42+
background-size:cover;
43+
background-position:center;
44+
}
45+
46+
47+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
48+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
49+
.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); }
50+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
51+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
52+
53+
.panel > * {
54+
margin:0;
55+
width: 100%;
56+
transition:transform 0.5s;
57+
}
58+
59+
.panel p {
60+
text-transform: uppercase;
61+
font-family: 'Amatic SC', cursive;
62+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
63+
font-size: 2em;
64+
}
65+
.panel p:nth-child(2) {
66+
font-size: 4em;
67+
}
68+
69+
.panel.open {
70+
font-size:40px;
71+
}
72+
73+
.cta {
74+
color:white;
75+
text-decoration: none;
76+
}
77+
78+
</style>
79+
80+
81+
<div class="panels">
82+
<div class="panel panel1">
83+
<p>Hey</p>
84+
<p>Let's</p>
85+
<p>Dance</p>
86+
</div>
87+
<div class="panel panel2">
88+
<p>Give</p>
89+
<p>Take</p>
90+
<p>Receive</p>
91+
</div>
92+
<div class="panel panel3">
93+
<p>Experience</p>
94+
<p>It</p>
95+
<p>Today</p>
96+
</div>
97+
<div class="panel panel4">
98+
<p>Give</p>
99+
<p>All</p>
100+
<p>You can</p>
101+
</div>
102+
<div class="panel panel5">
103+
<p>Life</p>
104+
<p>In</p>
105+
<p>Motion</p>
106+
</div>
107+
</div>
108+
109+
<script>
110+
111+
</script>
112+
113+
114+
115+
</body>
116+
</html>

‎06 - Type Ahead/index-START.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Type Ahead 👀</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<form class="search-form">
11+
<input type="text" class="search" placeholder="City or State">
12+
<ul class="suggestions">
13+
<li>Filter for a city</li>
14+
<li>or a state</li>
15+
</ul>
16+
</form>
17+
<script>
18+
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
19+
20+
</script>
21+
</body>
22+
</html>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
// Array.prototype.every() // is everyone 19?
30+
31+
// Array.prototype.find()
32+
// Find is like filter, but instead returns just the one you are looking for
33+
// find the comment with the ID of 823423
34+
35+
// Array.prototype.findIndex()
36+
// Find the comment with this ID
37+
// delete the comment with the ID of 823423
38+
39+
</script>
40+
</body>
41+
</html>

‎08 - Fun with HTML5 Canvas/index-START.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>

0 commit comments

Comments
 (0)