diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..9b1d551d79 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,22 @@ diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..d9b3496952 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,54 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } + .second-hand { + background-color: #00AAFF; + } + + .min-hand, .hour-hand { + background-color: #000; + } + + .hour-hand { + width: 30%; + left: 20%; + } + + .min-hand { + width: 40%; + left: 10%; + } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..a454d7cebf 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -9,7 +9,7 @@

Update CSS Variables with JS

- + @@ -21,6 +21,21 @@

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 317883a4c1..ae22304264 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,29 +31,53 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + console.log(inventors.filter(function (inventor) { + return inventor.year >= 1500 && inventor.year < 1600; + })); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + console.log(inventors.map(function (inventor) { + return inventor.first + ' ' + inventor.last; + })); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const orderedInventors = inventors.sort((a, b) => a.year - b.year); + console.log(JSON.parse(JSON.stringify(orderedInventors))); //tried to make a clone so, the logged value does not change through referencing // Array.prototype.reduce() // 4. How many years did all the inventors live? + console.log(inventors.reduce(function (inventorA, inventorB) { + return (!Number.isInteger(inventorA) ? (inventorA.passed - inventorA.year) : inventorA) + (inventorB.passed - inventorB.year); + })); // 5. Sort the inventors by years lived + console.log(inventors.sort(function (inventorA, inventorB) { + inventorA.livedFor = (inventorA.passed - inventorA.year); + inventorB.livedFor = (inventorB.passed - inventorB.year); + return inventorA.livedFor - inventorB.livedFor; + })); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris // 7. sort Exercise // Sort the people alphabetically by last name + console.log(people.sort(function (a, b) { + return a.split(', ')[0] > b.split(', ')[0] ? 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' ]; - + console.log(data.reduce(function (obj, item) { + obj[item] = obj[item] || 0; + obj[item]++; + return obj; + }, {})); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..4df4ca4d62 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,80 +1,122 @@ + Flex Panels 💪 + @@ -107,10 +149,23 @@
- + + \ No newline at end of file diff --git a/dist/array-cardio-1.html b/dist/array-cardio-1.html new file mode 100644 index 0000000000..f2e0d8e7fe --- /dev/null +++ b/dist/array-cardio-1.html @@ -0,0 +1,83 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/dist/boom.wav b/dist/boom.wav new file mode 100644 index 0000000000..8d6423bcdb Binary files /dev/null and b/dist/boom.wav differ diff --git a/dist/clap.wav b/dist/clap.wav new file mode 100644 index 0000000000..ef952e5eb4 Binary files /dev/null and b/dist/clap.wav differ diff --git a/dist/css-variables.html b/dist/css-variables.html new file mode 100644 index 0000000000..a454d7cebf --- /dev/null +++ b/dist/css-variables.html @@ -0,0 +1,78 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + diff --git a/dist/flex-panel-gallery.html b/dist/flex-panel-gallery.html new file mode 100644 index 0000000000..4df4ca4d62 --- /dev/null +++ b/dist/flex-panel-gallery.html @@ -0,0 +1,171 @@ + + + + + + Flex Panels 💪 + + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + + \ No newline at end of file diff --git a/dist/hihat.wav b/dist/hihat.wav new file mode 100644 index 0000000000..885cb196a3 Binary files /dev/null and b/dist/hihat.wav differ diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000000..9ffc2bc72b --- /dev/null +++ b/dist/index.html @@ -0,0 +1,95 @@ + + + + + 30 days of JS Coding with Wesbos + + +

Welcome to Javascript30

+ +

+ I have been working on wesbos' 30 days of JavaScript tutorials. Awesome Stuff, really. +

+

+ Herein lie my finished works. +

+
    +
  1. +

    + Day 1 - JavaScript Drum Kit +

    +
    2. +
  2. +

    + Day 2 - JS + CSS Clock +

    +
    3. +
  3. +

    + Day 3 - CSS Variables +

    +
    4. +
  4. +

    + Day 4 - Array Cardio 1 +

    +
    5. +
  5. +

    + Day 5 - Flex Panel Gallery +

    +
    6. +
+ + + + diff --git a/dist/javascript-drum-kit.html b/dist/javascript-drum-kit.html new file mode 100644 index 0000000000..23c4ced183 --- /dev/null +++ b/dist/javascript-drum-kit.html @@ -0,0 +1,148 @@ + + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/js-css-clock.html b/dist/js-css-clock.html new file mode 100644 index 0000000000..d9b3496952 --- /dev/null +++ b/dist/js-css-clock.html @@ -0,0 +1,114 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/dist/kick.wav b/dist/kick.wav new file mode 100644 index 0000000000..8fe46dea0c Binary files /dev/null and b/dist/kick.wav differ diff --git a/dist/openhat.wav b/dist/openhat.wav new file mode 100644 index 0000000000..50637521dc Binary files /dev/null and b/dist/openhat.wav differ diff --git a/dist/ride.wav b/dist/ride.wav new file mode 100644 index 0000000000..e5829dfef9 Binary files /dev/null and b/dist/ride.wav differ diff --git a/dist/snare.wav b/dist/snare.wav new file mode 100644 index 0000000000..c4edfc7534 Binary files /dev/null and b/dist/snare.wav differ diff --git a/dist/tink.wav b/dist/tink.wav new file mode 100644 index 0000000000..f907ea2c0e Binary files /dev/null and b/dist/tink.wav differ diff --git a/dist/tom.wav b/dist/tom.wav new file mode 100644 index 0000000000..9e2cdf691e Binary files /dev/null and b/dist/tom.wav differ