From b7e40aaafa7daf1abf492a2a34fa5445b136b292 Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Mon, 6 Dec 2021 18:35:51 +0100 Subject: [PATCH 1/8] added addSound function to app.js --- 01 - JavaScript Drum Kit/app.js | 21 +++++++++++++++++++++ 01 - JavaScript Drum Kit/index-START.html | 6 +----- 01 - JavaScript Drum Kit/style.css | 1 + 3 files changed, 23 insertions(+), 5 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..9813f46279 --- /dev/null +++ b/01 - JavaScript Drum Kit/app.js @@ -0,0 +1,21 @@ +const keys = document.querySelector(".keys"); +keys.addEventListener("click", (e) => { + const keybtn = e.target.dataset.key; + console.log(keybtn); + if (keybtn) { + const audioSoundBtn = document.querySelectorAll("audio"); + const keycontainer = document.querySelectorAll(".key"); + keycontainer.forEach((key1) => { + key1.classList.remove("playing"); + if (key1.dataset.key == keybtn) { + key1.classList.add("playing"); + } + }); + audioSoundBtn.forEach((audioMy) => { + const btnSource = audioMy.dataset.key; + if (btnSource == keybtn) { + audioMy.play(); + } + }); + } +}); diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..8897a9899c 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -7,7 +7,6 @@ -
A @@ -57,10 +56,7 @@ - - + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index bfdba84312..7a172c8cba 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -30,6 +30,7 @@ body,html { color: white; background: rgba(0,0,0,0.4); text-shadow: 0 0 .5rem black; + z-index:10; } .playing { From c2cc14df7a4457f341590d6477868072bdd225c8 Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Mon, 6 Dec 2021 19:30:27 +0100 Subject: [PATCH 2/8] replaced obsolete keyCode with .key --- 01 - JavaScript Drum Kit/app.js | 39 ++++++++++++----------- 01 - JavaScript Drum Kit/index-START.html | 36 ++++++++++----------- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/01 - JavaScript Drum Kit/app.js b/01 - JavaScript Drum Kit/app.js index 9813f46279..6a079b268f 100644 --- a/01 - JavaScript Drum Kit/app.js +++ b/01 - JavaScript Drum Kit/app.js @@ -1,21 +1,22 @@ -const keys = document.querySelector(".keys"); -keys.addEventListener("click", (e) => { - const keybtn = e.target.dataset.key; - console.log(keybtn); - if (keybtn) { - const audioSoundBtn = document.querySelectorAll("audio"); - const keycontainer = document.querySelectorAll(".key"); - keycontainer.forEach((key1) => { - key1.classList.remove("playing"); - if (key1.dataset.key == keybtn) { - key1.classList.add("playing"); - } - }); - audioSoundBtn.forEach((audioMy) => { - const btnSource = audioMy.dataset.key; - if (btnSource == keybtn) { - audioMy.play(); - } - }); +const removeTransition = (e) => { + if (e.propertyName == "transform") { + e.target.classList.remove("playing"); } +}; + +const playSound = (e) => { + const audioSoundBtn = document.querySelector( + `audio[data-key="${e.key.toUpperCase()}"]` + ); + const key = document.querySelector(`div[data-key="${e.key.toUpperCase()}"]`); + if (audioSoundBtn) { + key.classList.add("playing"); + audioSoundBtn.currentTime = 0; + audioSoundBtn.play(); + } +}; +const keys = document.querySelectorAll(".key"); +keys.forEach((key) => { + key.addEventListener("transitionend", removeTransition); }); +window.addEventListener("keydown", playSound); diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8897a9899c..1e96a1e846 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -8,53 +8,53 @@
-
+
A clap
-
+
S hihat
-
+
D kick
-
+
F openhat
-
+
G boom
-
+
H ride
-
+
J snare
-
+
K tom
-
+
L tink
- - - - - - - - - + + + + + + + + + From 5fedd35172311cbd9b2547d6b549bedfaf39ef8d Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Tue, 7 Dec 2021 23:39:04 +0100 Subject: [PATCH 3/8] created function to move the clock --- 02 - JS and CSS Clock/app.js | 0 02 - JS and CSS Clock/index-START.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 02 - JS and CSS Clock/app.js diff --git a/02 - JS and CSS Clock/app.js b/02 - JS and CSS Clock/app.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..dfdb4918ec 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -66,7 +66,7 @@ - From 9daa6841671ea502079863b2269d595b893674a7 Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Tue, 7 Dec 2021 23:45:42 +0100 Subject: [PATCH 4/8] added moving functionality to the clock --- 02 - JS and CSS Clock/app.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/02 - JS and CSS Clock/app.js b/02 - JS and CSS Clock/app.js index e69de29bb2..35ece71365 100644 --- a/02 - JS and CSS Clock/app.js +++ b/02 - JS and CSS Clock/app.js @@ -0,0 +1,3 @@ +const moveClocks = () => { + const now = new Date(); +}; From a294f99a54d24a1c98311d7141c86144c0e0fb0d Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Fri, 10 Dec 2021 09:51:45 +0100 Subject: [PATCH 5/8] added final functionality to the clock --- 02 - JS and CSS Clock/app.js | 27 +++++++++++++++++++ .../{index-START.html => index.html} | 20 +++++++------- 2 files changed, 37 insertions(+), 10 deletions(-) rename 02 - JS and CSS Clock/{index-START.html => index.html} (80%) diff --git a/02 - JS and CSS Clock/app.js b/02 - JS and CSS Clock/app.js index 35ece71365..cb6f8a28a9 100644 --- a/02 - JS and CSS Clock/app.js +++ b/02 - JS and CSS Clock/app.js @@ -1,3 +1,30 @@ +const secondHand = document.querySelector(".second-hand"); +const minuteHand = document.querySelector(".min-hand"); +const hourHand = document.querySelector(".hour-hand"); + +console.log(secondHand); const moveClocks = () => { const now = new Date(); + const seconds = now.getSeconds(); + const secondsDegrees = (seconds / 60) * 360 + 90; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + if (seconds === 0) { + secondHand.style.transition = "all 0s"; + } + + const minute = now.getMinutes(); + const minutesDegrees = (minute / 60) * 360 + 90; + minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; + if (minutes === 0) { + minuteHand.style.transition = "all 0s"; + } + + const hour = now.getHours(); + const hoursDegrees = (hour / 60) * 360 + 90; + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; + if (hours === 0) { + hourHand.style.transition = "all 0s"; + } }; + +setInterval(moveClocks, 1000); diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index.html similarity index 80% rename from 02 - JS and CSS Clock/index-START.html rename to 02 - JS and CSS Clock/index.html index dfdb4918ec..8a93cf4101 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index.html @@ -5,8 +5,6 @@ JS + CSS Clock - -
@@ -43,9 +41,9 @@ position: relative; padding: 2rem; box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), - inset 0 0 0 3px #EFEFEF, - inset 0 0 10px black, + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); } @@ -61,14 +59,16 @@ height: 6px; background: black; position: absolute; + transition: all 0.1s; + transition-timing-function:cubic-bezier(0.5, 2.7, 0.58, 1); + transform: rotate(90deg); + transform-origin: 100%; top: 50%; } - - - + From 2bc31ab1a7fc6f7b6f897a3d4c1f1332c24488e2 Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Sat, 11 Dec 2021 10:59:07 +0100 Subject: [PATCH 6/8] added responsiveness to the style-controls --- 03 - CSS Variables/app.js | 14 ++++++++++++++ 03 - CSS Variables/index-START.html | 13 +++++++++++-- 2 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 03 - CSS Variables/app.js diff --git a/03 - CSS Variables/app.js b/03 - CSS Variables/app.js new file mode 100644 index 0000000000..cf6fd096ae --- /dev/null +++ b/03 - CSS Variables/app.js @@ -0,0 +1,14 @@ +const inputs = document.querySelectorAll(".controls input"); + +console.log(inputs); +const updateValues = (e) => { + console.log(e.target); + const suffix = e.target.dataset.sizing || ""; + document.documentElement.style.setProperty( + `--${e.target.name}`, + e.target.value + suffix + ); +}; + +inputs.forEach((input) => input.addEventListener("change", updateValues)); +inputs.forEach((input) => input.addEventListener("mousemove", updateValues)); diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..b827bc8747 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,7 +21,17 @@

Update CSS Variables with JS

- + From 9db5e750e30e84aec98701ead5d2c115cfc0cea0 Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Sun, 12 Dec 2021 09:28:14 +0100 Subject: [PATCH 7/8] solved challenges using array methods --- 04 - Array Cardio Day 1/index-START.html | 40 +++++++++++++++++++++--- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 21bec96e8c..8ae1cd93f3 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -34,32 +34,64 @@ 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' ]; - + // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const oldInventors = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1600) + + console.table(oldInventors) + // Array.prototype.map() // 2. Give us an array of the inventors first and last names + const firstLast = inventors.map(inventor => { + return `${inventor.first} ${inventor.last}` + }) + console.log(firstLast) // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const inventorSorted = inventors.sort((a,b) => a.year < b.year ? -1 : 1) + console.table(inventorSorted) // Array.prototype.reduce() // 4. How many years did all the inventors live all together? - + const inventorsLifes = inventors.reduce((total,inventor)=>{ + return total + (inventor.passed - inventor.year) + },0) + console.log(inventorsLifes) // 5. Sort the inventors by years lived - + const inventorsSortedByYears = inventors.sort((a,b)=>{ + const aYears = a.passed - a.year; + const bYears = b.passed - b.year; + return aYears > bYears ? -1 : 1; + }) + console.table(inventorsSortedByYears) // 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 + const peopleName = people.sort((a,b) => { + const Aname = a.slice(", "); + const Bname = b.slice(", "); + return Aname > Bname ? 1 : -1; + }) + console.log(peopleName) // 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 data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'walk', 'skateboard' ]; + const dataSummedUp = data.reduce((obj,item)=>{ + if(!obj[item]){ + obj[item] = 0; + } + obj[item]++; + return obj + },{}) + console.log(dataSummedUp) From 423fe8dd51fc97214fe909c49bbdcb0ae4ef6869 Mon Sep 17 00:00:00 2001 From: luciaharcegova Date: Mon, 13 Dec 2021 10:09:28 +0100 Subject: [PATCH 8/8] added open-functionality to panels --- 05 - Flex Panel Gallery/index-START.html | 36 ++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..622ef3c7ad 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -14,11 +14,11 @@ font-size: 20px; font-weight: 200; } - + body { margin: 0; } - + *, *:before, *:after { box-sizing: inherit; } @@ -26,6 +26,7 @@ .panels { min-height: 100vh; overflow: hidden; + display:flex; } .panel { @@ -43,6 +44,9 @@ font-size: 20px; background-size: cover; background-position: center; + flex:1; + display:flex; + flex-direction: column; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } @@ -56,7 +60,16 @@ margin: 0; width: 100%; transition: transform 0.5s; + display:flex; + justify-content: center; + align-items: center; + flex: 1 0 auto; + } + .panel > *:first-child {transform: translateY(-100%);} + .panel > *:last-child {transform: translateY(100%);} + .panel.open-active > *:first-child {transform: translateY(0);} + .panel.open-active > *:last-child {transform: translateY(0);} .panel p { text-transform: uppercase; @@ -64,13 +77,14 @@ text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 2em; } - + .panel p:nth-child(2) { font-size: 4em; } .panel.open { font-size: 40px; + flex:5; } @@ -105,6 +119,22 @@