JS Drum Kit

diff --git a/01 - JavaScript Drum Kit/background.jpg b/01 - JavaScript Drum Kit/background.jpg new file mode 100644 index 0000000000..c000b3586f Binary files /dev/null and b/01 - JavaScript Drum Kit/background.jpg differ diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare -

- K - tom -

- L - tink -

- -

- - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - JS Drum Kit - - - - - -

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare -

- K - tom -

- L - tink -

- -

- - - - - - diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..420abad101 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -3,7 +3,7 @@ JS Drum Kit - + @@ -59,25 +59,46 @@ + diff --git a/01 - JavaScript Drum Kit/myStyle.css b/01 - JavaScript Drum Kit/myStyle.css new file mode 100644 index 0000000000..056e9d6d04 --- /dev/null +++ b/01 - JavaScript Drum Kit/myStyle.css @@ -0,0 +1,55 @@ +html { + font-size: 10px; + background: url("./background.jpg") no-repeat center center fixed; + background-size: cover; +} + +body,html { + margin: 0; + padding: 0; + font-family: sans-serif; +} + +/* Made all the keys aligned on the middle of verticle axis */ +.keys { + display: flex; + flex: 1; + min-height: 100vh; + justify-content: center; + align-items: center; +} + +/* Style each box */ +.key { + border: solid black 2px; + border-radius: 5px; + margin: 1rem; + font-size: 1.5rem; + padding: 1rem .5rem; + width: 100px; + text-align: center; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 5px black; + transition:all .07s; +} + +/* Put class .playing to .key for animation */ +.playing { + transform:scale(1.1); + border-color:#ffc600; + box-shadow: 0 0 10px #ffc600; +} + +.sound { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 1px; + color:#ffc600; +} + +/* Made all the key on a different line */ +kbd { + display: block; + font-size: 40px; +} \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css deleted file mode 100644 index 3e0a320b37..0000000000 --- a/01 - JavaScript Drum Kit/style.css +++ /dev/null @@ -1,50 +0,0 @@ -html { - font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; - background-size: cover; -} -body,html { - margin: 0; - padding: 0; - font-family: sans-serif; -} - -.keys { - display:flex; - flex:1; - min-height:100vh; - align-items: center; - justify-content: center; -} - -.key { - border:4px solid black; - border-radius:5px; - margin:1rem; - font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; - text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; -} - -.playing { - transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; -} - -kbd { - display: block; - font-size: 40px; -} - -.sound { - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 1px; - color:#ffc600; -} diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index fb1080dc9c..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Document - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 240705d8fe..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Document - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index d5c9ec9596..696cba028f 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -36,7 +36,7 @@ .clock { width: 30rem; height: 30rem; - border:20px solid white; + border:5px solid white; border-radius:50%; margin:50px auto; position: relative; @@ -56,41 +56,55 @@ } .hand { - width:50%; - height:6px; - background:black; + width: 50%; + height: 3px; + background: black; position: absolute; - top:50%; - transform-origin: 100%; + top: 50%; + transform-origin: 0% 100%; transform: rotate(90deg); - transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transition: .5s; + transition-timing-function: cubic-bezier(0, 2.2, 0.58, 1); + left: 50%; } - - + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index bf0f33e3ba..06ac69b94a 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,9 +22,23 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6e28e357d0..750d76e8b4 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,24 +27,47 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + // Filter takes a function returning either true or false. Filter out all items that give a false in the function. + const middleInventors = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600); + // console.table(middleInventors); // Array.prototype.map() // 2. Give us an array of the inventory first and last names + const names = inventors.map((inventor) => `${inventor.first} ${inventor.last}`); + // console.table(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + // compare a and b. if a is older than b, then a should be before b -> -1 + // 0 means same + const descendingAges = inventors.sort((iA, iB) => iB.year - iA.year); + // console.table(descendingAges); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalAge = inventors.reduce((accumulator, currentInventor) => { + return accumulator + (currentInventor.passed - currentInventor.year + 1); + }, 0); + // console.log(totalAge); // 5. Sort the inventors by years lived + const ascendingYearsLived = inventors.sort((iA, iB) => { + + const yearsLivedA = iA.passed - iA.year + 1; + const yearsLivedB = iB.passed - iB.year + 1; + + return yearsLivedA - yearsLivedB; + + }); + // console.table(ascendingYearsLived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris - + // USE querySelector on the page to select everything // 7. sort Exercise // Sort the people alphabetically by last name + // 8. Reduce Exercise // Sum up the instances of each of these diff --git a/05 - Flex Panel Gallery/images/creamy.jpg b/05 - Flex Panel Gallery/images/creamy.jpg new file mode 100644 index 0000000000..90bd713f14 Binary files /dev/null and b/05 - Flex Panel Gallery/images/creamy.jpg differ diff --git a/05 - Flex Panel Gallery/images/dark.jpg b/05 - Flex Panel Gallery/images/dark.jpg new file mode 100644 index 0000000000..8f2900d6d7 Binary files /dev/null and b/05 - Flex Panel Gallery/images/dark.jpg differ diff --git a/05 - Flex Panel Gallery/images/darkmilk.jpg b/05 - Flex Panel Gallery/images/darkmilk.jpg new file mode 100644 index 0000000000..450ae4eddb Binary files /dev/null and b/05 - Flex Panel Gallery/images/darkmilk.jpg differ diff --git a/05 - Flex Panel Gallery/images/frap.jpg b/05 - Flex Panel Gallery/images/frap.jpg new file mode 100644 index 0000000000..050bd108ec Binary files /dev/null and b/05 - Flex Panel Gallery/images/frap.jpg differ diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html deleted file mode 100644 index e1d643ad5c..0000000000 --- a/05 - Flex Panel Gallery/index-START.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - - - diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..0e28456f46 --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,60 @@ + + + + Cool Sliding Show + + + + + +

+ +

A cup of

Dark

Coffee

+ +

A cup of

Milk

Coffee

+ +

A cup of

Creamy

Coffee

+ +

A cup of

Frap

Coffee

+ +

+ + + + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..706227a50d --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,86 @@ +html { + box-sizing: border-box; /* The width and height properties (and min/max properties) includes content, padding and border, but not the margin */ + background: #000000; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} + +body { + + margin: 0; +} + +.panels { + min-height: 100vh; + overflow: hidden; + border: 5px solid #3e3e3c; + + display: flex; +} + +/* Images within the panels */ +.panel { + background: #6B0F9C; /* Placeholder for the images to load */ + box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); + background-size: cover; + background-position: center; + /* align-items: center; */ + + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + + /* Arrange the texts within each panel */ + display: flex; + flex: 1; + justify-content: center; + flex-direction: column; +} + +/* Texts within the panels */ +.panel p { + text-transform: uppercase; + text-align: center; + color: white; + text-shadow: 1px 1px black; + font-size: 1.2em; + margin:0; /*remove the margin of

*/ +} + +.panel p:nth-child(2) { + font-size: 2.5em; +} + +/* All panels */ +.panel > * { + /*width: 100%;*/ + + transition:transform 0.5s; + + /* Arrange the texts in the middle */ + display: flex; + flex: 1 0 auto; + justify-content: center; + align-items: center; +} + +/* Hide away the texts */ +.panel > *:first-child { transform: translateY(-100%); } +.panel > *:last-child { transform: translateY(100%); } + +/* Reappear */ +.panel.open-active > *:first-child { transform: translateY(0); } +.panel.open-active > *:last-child { transform: translateY(0); } + +/* Selected slide */ +.panel.open { + flex: 5; + font-size:40px; +} + +.panel--1 { background-image: url(https://images.unsplash.com/photo-1415065063214-b36374daf153); } +.panel--2 { background-image: url(https://images.unsplash.com/photo-1478192013110-1203b3616b75); } +.panel--3 { background-image: url(https://images.unsplash.com/photo-1472973681244-f5bcc808ad47?dpr=2&auto=format&fit=crop&w=767&h=509&q=80&cs=tinysrgb&crop=); } +.panel--4 { background-image: url(https://images.unsplash.com/photo-1477662044606-ae290bae2bab); } \ No newline at end of file diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html deleted file mode 100644 index 5902b43936..0000000000 --- a/06 - Type Ahead/index-FINISHED.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Type Ahead 👀 - - - - -

- - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 1436886918..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Type Ahead 👀 - - - - - - - - diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..c3b2df0a42 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/06 - Type Ahead/myStyle.css b/06 - Type Ahead/myStyle.css new file mode 100644 index 0000000000..29b80afc36 --- /dev/null +++ b/06 - Type Ahead/myStyle.css @@ -0,0 +1,56 @@ +html { + font-family: 'helvetica neue'; +} + +/* Style the filter box */ +input { + box-sizing: border-box; /* So the width would also compute the border length */ + width: 100%; + padding: 10px; + margin: 0px; +} + +/* Style the text inside the filter box */ +input.search-filter-box { + font-size: 30px; + font-weight: lighter; + text-align: center; + color: grey; + border: 10px outset #efe6e6; + border-radius: 3px; +} + +/* Style the whole suggestions section */ +.suggestions { + list-style: none; + position: relative; + width: 80%; + left: 10%; + padding: 0px; + margin: 0px; +} + +/* Style each suggestion */ +.suggestions li { + padding: 15px; + box-shadow: 0px 1px 2px gray; + + font-size: 14px; + text-transform: uppercase; + + display: flex; + justify-content: space-between; +} + +span.population { + font-size: 12px; +} + +.hl { + background:#ffc600; +} + +.search-form { + max-width: 400px; + margin: 50px auto; /* center the search form */ +} \ No newline at end of file diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css deleted file mode 100644 index 36dc55f30e..0000000000 --- a/06 - Type Ahead/style.css +++ /dev/null @@ -1,87 +0,0 @@ - html { - box-sizing: border-box; - background:#ffc600; - font-family:'helvetica neue'; - font-size: 20px; - font-weight: 200; - } - *, *:before, *:after { - box-sizing: inherit; - } - input { - width: 100%; - padding:20px; - } - - .search-form { - max-width:400px; - margin:50px auto; - } - - input.search { - margin: 0; - text-align: center; - outline:0; - border: 10px solid #F7F7F7; - width: 120%; - left: -10%; - position: relative; - top: 10px; - z-index: 2; - border-radius: 5px; - font-size: 40px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); - } - - - .suggestions { - margin: 0; - padding: 0; - position: relative; - /*perspective:20px;*/ - } - .suggestions li { - background:white; - list-style: none; - border-bottom: 1px solid #D8D8D8; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); - margin:0; - padding:20px; - transition:background 0.2s; - display:flex; - justify-content:space-between; - text-transform: capitalize; - } - - .suggestions li:nth-child(even) { - transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); - } - .suggestions li:nth-child(odd) { - transform: perspective(100px) rotateX(-3deg) translateY(3px); - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); - } - - span.population { - font-size: 15px; - } - - - .details { - text-align: center; - font-size: 15px; - } - - .hl { - background:#ffc600; - } - - .love { - text-align: center; - } - - a { - color:black; - background:rgba(0,0,0,0.1); - text-decoration: none; - } diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html new file mode 100644 index 0000000000..77af8dd476 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -0,0 +1,76 @@ + + + + Checkboxes + + + + +

+ +

Banana

+ +

Melon Melon Melon Melon Melon Melon Melon Melon Melon Melon

+ +

Apple

+ +

Lemon

+ +

Bread

+ +

Egg

+ +

+ + + + + \ No newline at end of file diff --git a/10 - Hold Shift and Check Checkboxes/style.css b/10 - Hold Shift and Check Checkboxes/style.css new file mode 100644 index 0000000000..cfd476d2c6 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/style.css @@ -0,0 +1,43 @@ +html { + font-size: 20px; + font-family: 'helvetica neue'; + background: #ffc600; +} + +.todo { + display: flex; + flex-direction: column; + + max-width: 350px; + margin: 50px auto; + padding: 10px; + background: white; + box-shadow:10px 10px 0 rgba(0,0,0,0.1); + border-radius: 5px; +} + +.item { + display: flex; + align-items: center; + border-bottom: 1px solid #F1F1F1; +} + +input:checked + p { + background: #F9F9F9; + text-decoration: line-through; +} + +.item:last-child { + border-bottom:0; +} + +.item p { + margin: 0px; + padding: 13px; + flex: 1; + border-left: 1px solid #D1E2FF; +} + +.item input[type="checkbox"] { + margin: 10px; +} \ No newline at end of file