JS + CSS Clock

From a99dea530b69b8fe9c2b6320c13adc09e6f0878a Mon Sep 17 00:00:00 2001 From: drabikowy Date: Tue, 3 Jan 2017 12:26:35 +0100 Subject: [PATCH 01/10] day 2 - DrumKit done! --- 01 - JavaScript Drum Kit/app.js | 22 ++++++++++++++++++++++ 01 - JavaScript Drum Kit/index-START.html | 4 +--- 2 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 01 - JavaScript Drum Kit/app.js diff --git a/01 - JavaScript Drum Kit/app.js b/01 - JavaScript Drum Kit/app.js new file mode 100644 index 0000000000..d69e0bdc0f --- /dev/null +++ b/01 - JavaScript Drum Kit/app.js @@ -0,0 +1,22 @@ +function playSound(e){ + + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + if(!audio) return; + + audio.currentTime = 0; + audio.play(); + + key.classList.add('playing'); +} + +window.addEventListener('keydown', playSound); + +function removeTransition(e){ + if (e.propertyName !== 'transform') return; + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); + +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..53ee3acf24 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,10 +57,8 @@

- + From e1b566326421ca8578bb7cd0849f975779d77cc1 Mon Sep 17 00:00:00 2001 From: drabikowy Date: Tue, 3 Jan 2017 14:32:06 +0100 Subject: [PATCH 02/10] day 2 - JS Clock done! --- 02 - JS + CSS Clock/index-START.html | 77 +++++++++++++++++++--------- 1 file changed, 52 insertions(+), 25 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..3762c36d9d 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,39 +1,39 @@ - - JS + CSS Clock + + JS + CSS Clock -

- + transform: rotate(90deg); + transform-origin: right; + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.01, 1.14, 1, 1.08); + } - + From d6a38d62583c3adce1361450475407585a56ffbb Mon Sep 17 00:00:00 2001 From: drabikowy Date: Fri, 6 Jan 2017 00:36:11 +0100 Subject: [PATCH 03/10] day 3 - css variables update --- 03 - CSS Variables/index-START.html | 74 ++++++++++++++++++----------- 1 file changed, 47 insertions(+), 27 deletions(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..b46ecd9121 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,54 +1,74 @@ - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS -

Update CSS Variables with JS

- Spacing: - +

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

+ Base Color + +

- + } + - + From 89a320d9b8e2949055e51cc967e01111b4bfeb70 Mon Sep 17 00:00:00 2001 From: drabikowy Date: Sun, 8 Jan 2017 12:50:16 +0100 Subject: [PATCH 04/10] day 4 - array methods cardio! --- 04 - Array Cardio Day 1/index-START.html | 102 ++++++++++++++++------- 1 file changed, 74 insertions(+), 28 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..00aa69ae6b 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,18 +1,18 @@ - - Array Cardio 💪 + + Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

- + console.table(sortedLived); + + // 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 list = Array.from(document.querySelector('.mw-category').querySelectorAll('a')); + // const streetNames = list.map(link => link.textContent); + // console.log(streetNames); + // const filterStreet = streetNames.filter(element => element.includes('de')); + + + // 7. sort Exercise + // Sort the people alphabetically by last name + + const sortedPeople = people.sort(function(a,b){ + let [a_lastName, a_firstName] = a.split(', '); + let [b_lastName, b_firstName] = b.split(', '); + + return a_lastName > b_lastName ? 1 : -1; + + }); + console.log(sortedPeople); + + // 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 transportation = data.reduce(function(object, item){ + + if (!object[item]) { + object[item] = 0; + } + object[item]++; + return object; + },{}); + console.log(transportation); + + From caecf808aed038252073f907897af4c079f1937d Mon Sep 17 00:00:00 2001 From: drabikowy Date: Sun, 8 Jan 2017 14:06:54 +0100 Subject: [PATCH 05/10] day 5 - super flex gallery! --- 05 - Flex Panel Gallery/index-START.html | 262 ++++++++++++++--------- 1 file changed, 156 insertions(+), 106 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..cbe585d925 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,114 +1,164 @@ - - Flex Panels 💪 - + + Flex Panels 💪 + - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + From 7fb28fa8f4612420cb0fb51f95179e04eb3add2b Mon Sep 17 00:00:00 2001 From: drabikowy Date: Sun, 8 Jan 2017 15:41:58 +0100 Subject: [PATCH 06/10] day 6 - typeSuggestions, FETCH PROMISSES! --- 06 - Type Ahead/index-START.html | 75 +++++++++++++++++++++++++------- 1 file changed, 60 insertions(+), 15 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..fbd15ac60a 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,22 +1,67 @@ - - Type Ahead 👀 - + + Type Ahead 👀 + - - - + + + From e00e1ca4cc38825f25f6787ddd8c997cfdf36104 Mon Sep 17 00:00:00 2001 From: drabikowy Date: Mon, 9 Jan 2017 11:26:03 +0100 Subject: [PATCH 07/10] day 7 - array cardio 2 --- 07 - Array Cardio Day 2/index-START.html | 28 ++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..f4b836a190 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,44 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + + const isAdult = people.some(person => { + const currentYear = (new Date()).getFullYear(); + + return currentYear - person.year>=19; + }); + + console.log({isAdult}); // Array.prototype.every() // is everyone 19? + const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + + console.log(allAdults); + // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 + const findId = (id, array) => array.find(records => records.id === id); + + findId(823423, comments); + + // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + const index = comments.findIndex(record => record.id === 823423); + + comments.splice(index, 1); + + const newComments = [ + ...comments.slice(0,index), + ...comments.slice(index+1) + ]; + + // in slice() method without second argument it goes to the end of an array + From 2b8548a35be5a93f279c5ec1285ccfbd3ea8256c Mon Sep 17 00:00:00 2001 From: drabikowy Date: Wed, 11 Jan 2017 10:47:17 +0100 Subject: [PATCH 08/10] day 8 - fun with canvas! --- 08 - Fun with HTML5 Canvas/index-START.html | 70 +++++++++++++++++---- 1 file changed, 59 insertions(+), 11 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..6b98522980 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,19 +1,67 @@ - - HTML5 Canvas + + HTML5 Canvas -

- - - +

+ + + From a3f25d5f404136a7110a7194681b17fa1f1ab88d Mon Sep 17 00:00:00 2001 From: drabikowy Date: Wed, 11 Jan 2017 23:32:25 +0100 Subject: [PATCH 09/10] day 9 nice console.log and more exapless --- 09 - Dev Tools Domination/index-START.html | 43 ++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..55cd3a2f42 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -18,28 +18,71 @@ } // Regular + console.log('hello'); // Interpolated + console.log('Hello I am a %s string!', '💩'); // Styled + // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue') // warning! + console.warn('OH NOOO'); // Error :| + console.error('Shit!'); // Info + console.info('Crocodiles eat 3-4 people per year'); // Testing + const p = document.querySelector('p'); + + console.assert(p.classList.contains('ouch'), 'That is wrong!'); // clearing + console.clear(); // Viewing DOM Elements + console.log(p); + console.dir(p); + + console.clear(); // Grouping together + dogs.forEach(dog => { + console.groupCollapsed(`${dog.name}`); + console.log(`This is ${dog.name}`); + console.log(`${dog.name} is ${dog.age} years old`); + console.log(`${dog.name} is ${dog.age * 7} dog years old`); + console.groupEnd(`${dog.name}`); + }); // counting + console.count('Wes'); + console.count('Wes'); + console.count('Steve'); + console.count('Steve'); + console.count('Wes'); + console.count('Steve'); + console.count('Wes'); + console.count('Steve'); + console.count('Steve'); + console.count('Steve'); + console.count('Steve'); + console.count('Steve'); + // timing + console.time('fetching data'); + fetch('https://api.github.com/users/wesbos') + .then(data => data.json()) + .then(data => { + console.timeEnd('fetching data'); + console.log(data); + }); + + console.table(dogs); From 91e16a89a2c6396048dd057c2071561544695bf2 Mon Sep 17 00:00:00 2001 From: drabikowy Date: Fri, 13 Jan 2017 13:10:28 +0100 Subject: [PATCH 10/10] day 10 - checking boxes with shift! --- 10 - Hold Shift and Check Checkboxes/app.js | 35 +++++++++++++++++++ .../index-START.html | 4 +-- 2 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 10 - Hold Shift and Check Checkboxes/app.js diff --git a/10 - Hold Shift and Check Checkboxes/app.js b/10 - Hold Shift and Check Checkboxes/app.js new file mode 100644 index 0000000000..0942f98ac2 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/app.js @@ -0,0 +1,35 @@ +(function(){ + + const checkboxes = document.querySelectorAll('[type="checkbox"]'); + + let lastChecked; + + function selectBox(event){ + + let inBetween = false; + if (event.shiftKey && this.checked) { + + checkboxes.forEach(box => { + if (box === this || box === lastChecked) { + inBetween = !inBetween; + }; + + if (inBetween){ + box.checked = true; + } + }); + } + + lastChecked = this; + }; + + checkboxes.forEach(box => { + box.addEventListener('click', selectBox); + }); + + + + + + +})(); diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..62f3ed7920 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -103,7 +103,7 @@ - + +