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 a18f2bc2ca..b832646d26 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -47,35 +47,26 @@ - - - - - - - - - + + + + + + + + + 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-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..c5e4269b67 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,32 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.0 5s; + transition-timing-function: cubic-bezier(0.6, -0.28, 0.74, 0.05); +} } diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 089352c8a6..f87b5b8243 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -27,29 +27,52 @@ // 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) // Array.prototype.map() // 2. Give us an array of the inventory first and last names - + const names = inventors.map((inventor)=> `${inventor.first} ${inventor.last}`); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - + const sortBirth = inventors.sort((a,b)=> a.year > b.year ? 1 : -1); + console.log(sortBirth); // Array.prototype.reduce() // 4. How many years did all the inventors live? - + totalYears = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0); + console.log(totalYears); // 5. Sort the inventors by years lived - + const sortYears = inventors.sort((a,b) => (a.passed - a.year) > (b.passed - b.year) ? 1: -1); + console.table(sortYears); // 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 array = Array.from(links); + + // let de = array.filter((item) => item.textContent.includes('de')); // 7. sort Exercise // Sort the people alphabetically by last name + + let alpha = people.sort(function(lastOne, nextOne){ + let part1 = lastOne.split(', ')[0]; + let part2 = nextOne.split(', ')[0]; + return part1 > part2 ? 1 : -1; + + }); // 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' ]; - + listObject = data.reduce((obj, item)=>{ + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log(listObject);