Codestin Search App

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 @@ - - - - - Codestin Search App - - - - - -

- 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 index 4070d32767..bcb8d2cb4f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,24 @@

diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html deleted file mode 100644 index 37436ed1ca..0000000000 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - Codestin Search App - - - - -

- - - - - - - diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..3370555206 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,12 +62,41 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.5s; } - + .hour-hand { + background: red; + } + + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html deleted file mode 100644 index c931959a74..0000000000 --- a/03 - CSS Variables/index-FINISHED.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - Codestin Search App - - -

Update CSS Variables with JS

- -

- Spacing: - - - Blur: - - - Base Color - -

- -

- - - - - - - - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..250c253239 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -22,6 +22,21 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html deleted file mode 100644 index ede883f1f9..0000000000 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - Codestin Search App - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..bdd0defad9 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,32 +27,70 @@ { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } ]; - 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']; + 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']; // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const names = inventors.map(inventor => inventor.first + ' ' + inventor.last); + console.log(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(sorted); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + console.log(totalYears); // 5. Sort the inventors by years lived + const yearsLived = inventors.sort((a, b) => (a.passed - a.year) > (b.passed - b.year) ? -1 : 1); + console.table(yearsLived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + /*const category = document.querySelector('.mw-category'); + const links = [...category.querySelectorAll('a')]; + const de = links + .map(link => link.textContent) + .filter(streetName => streetName.includes('de'));*/ // 7. sort Exercise // Sort the people alphabetically by last name + const alphabeticalSort = people.sort((a, b) => { + const [aLast, aFirst] = a.split(', '); + const [bLast, bFirst] = b.split(', '); + return aLast > bLast ? 1 : -1; + }); + console.log(alphabeticalSort); // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const sum = data.reduce(function(obj, item) { + if(!obj[item]){ + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + + console.log(sum); diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html deleted file mode 100644 index f703fed6ae..0000000000 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - Codestin Search App - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index c6509bed02..1da1d9b35d 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,6 +60,26 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel.open-active > *:first-child { + transform: translateY(0); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -68,6 +94,7 @@ .panel.open { font-size:40px; + flex: 5; } @@ -102,7 +129,21 @@ 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 @@ - - - - - Codestin Search App - - - - - - - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..f1ef0a28d1 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,44 @@ diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html deleted file mode 100644 index c8e5b25d3b..0000000000 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - Codestin Search App - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..aa41c94a6b 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -5,7 +5,7 @@ Codestin Search App -

Psst: have a look at the JavaScript Console 💁

Psst: have a look at the JavaScript Console

diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html deleted file mode 100644 index 0791e17d0d..0000000000 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Codestin Search App - - -

- - - - - - diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..3f2c11c7b6 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,54 @@