From ad8db8e8288dc36441e74c41ea36405e3848cd3a Mon Sep 17 00:00:00 2001 From: yohans Date: Thu, 17 Apr 2025 12:06:53 -0800 Subject: [PATCH 01/14] save changes --- 01 - JavaScript Drum Kit/index-START.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..fedadd385a 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,9 +58,7 @@ - + From e1e61d764885fac04245cc15230169aaf2f145f3 Mon Sep 17 00:00:00 2001 From: john abrham Date: Sat, 19 Apr 2025 05:11:04 -0800 Subject: [PATCH 02/14] Day1 Finished --- .../{index-FINISHED.html => _index-FINISHED.html} | 0 01 - JavaScript Drum Kit/index-START.html | 2 +- 01 - JavaScript Drum Kit/script.js | 15 +++++++++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) rename 01 - JavaScript Drum Kit/{index-FINISHED.html => _index-FINISHED.html} (100%) create mode 100644 01 - JavaScript Drum Kit/script.js diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/_index-FINISHED.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/_index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index fedadd385a..1308f2cc6e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,7 @@ - + diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..0520e1b738 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,15 @@ +function playAudio (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'); + + setTimeout(() => key.classList.remove('playing'), 70); + +} +window.addEventListener("keydown", playAudio) \ No newline at end of file From 79ebd02a0b415c1527acc0b532dc82424787f6cc Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Sat, 19 Apr 2025 05:45:55 -0800 Subject: [PATCH 03/14] Day1 Finished --- .../{index-FINISHED.html => _index-FINISHED.html} | 0 01 - JavaScript Drum Kit/index-START.html | 2 +- 01 - JavaScript Drum Kit/script.js | 15 +++++++++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) rename 01 - JavaScript Drum Kit/{index-FINISHED.html => _index-FINISHED.html} (100%) create mode 100644 01 - JavaScript Drum Kit/script.js diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/_index-FINISHED.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/_index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index fedadd385a..1308f2cc6e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,7 @@ - + diff --git a/01 - JavaScript Drum Kit/script.js b/01 - JavaScript Drum Kit/script.js new file mode 100644 index 0000000000..0520e1b738 --- /dev/null +++ b/01 - JavaScript Drum Kit/script.js @@ -0,0 +1,15 @@ +function playAudio (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'); + + setTimeout(() => key.classList.remove('playing'), 70); + +} +window.addEventListener("keydown", playAudio) \ No newline at end of file From d38f8ea79ca8acef8c1d1744f2831a18539e7d1a Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Sun, 20 Apr 2025 10:40:41 -0800 Subject: [PATCH 04/14] Day2 Finished --- 02 - JS and CSS Clock/index-START.html | 65 ++------------------------ 02 - JS and CSS Clock/script.js | 22 +++++++++ 02 - JS and CSS Clock/style.css | 48 +++++++++++++++++++ 3 files changed, 75 insertions(+), 60 deletions(-) create mode 100644 02 - JS and CSS Clock/script.js create mode 100644 02 - JS and CSS Clock/style.css diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..50ef190fb6 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -4,72 +4,17 @@ JS + CSS Clock + - - -
+
-
+
-
- - - - - + diff --git a/02 - JS and CSS Clock/script.js b/02 - JS and CSS Clock/script.js new file mode 100644 index 0000000000..200db40538 --- /dev/null +++ b/02 - JS and CSS Clock/script.js @@ -0,0 +1,22 @@ +const secondHand = document.querySelector('.second-hand'); +const minuteHand = document.querySelector('.minute-hand'); +const hourHand = document.querySelector('.hour-hand'); + +function setDate(){ + const now = new Date(); // get the current date and time + + const seconds = now.getSeconds(); // get seconds + const secondDeg = (seconds/60) * 360 + 90; + secondHand.style = `transform: rotate(${secondDeg}deg)` + + const minutes = now.getMinutes(); //get minutes + const minuteDeg = (minutes/60) * 360 + ((seconds/60)*6) + 90; + minuteHand.style = `transform: rotate(${minuteDeg}deg)`; + + const hours = now.getHours(); //get hours + const hourDeg = (hours/12) * 360 + ((minutes/60)*30) + 90; + hourHand.style = `transform: rotate(${hourDeg}deg)`; + + +} +setInterval(setDate,1000) \ No newline at end of file diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..56d031236f --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,48 @@ +html { + background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5); + background-size: cover; + font-family: 'helvetica neue'; + text-align: center; + font-size: 10px; + } + + body { + margin: 0; + font-size: 2rem; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; + } + + .clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + 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 10px rgba(0,0,0,0.2); + } + + .clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); /* account for the height of the clock hands */ + } + + .hand { + width: 50%; + height: 6px; + background: black; + position: absolute; + transform-origin: 100%; + transform: rotate(90deg); + top: 50%; + } \ No newline at end of file From 7f03142abd946f3881f8be32d5af75cb8ce5b8ff Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Mon, 21 Apr 2025 10:08:57 -0800 Subject: [PATCH 05/14] Day3 Finished --- 03 - CSS Variables/index-START.html | 30 +++------------------------- 03 - CSS Variables/script.js | 9 +++++++++ 03 - CSS Variables/style.css | 31 +++++++++++++++++++++++++++++ 3 files changed, 43 insertions(+), 27 deletions(-) create mode 100644 03 - CSS Variables/script.js create mode 100644 03 - CSS Variables/style.css diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..26257541b6 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -4,6 +4,7 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

@@ -19,34 +20,9 @@

Update CSS Variables with JS

- + - - - + diff --git a/03 - CSS Variables/script.js b/03 - CSS Variables/script.js new file mode 100644 index 0000000000..b3d865fad2 --- /dev/null +++ b/03 - CSS Variables/script.js @@ -0,0 +1,9 @@ +function update(){ + const px = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + px); + +} +const inputs = document.querySelectorAll('input'); +inputs.forEach((input) => input.addEventListener('change', update)); +input.forEach((input) => input.addEventListener('mousemove', update)) + diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..80e8c0a458 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,31 @@ +:root{ + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; + } + + .controls { + margin-bottom: 50px; + } + + input { + width: 100px; + } + img{ + background: var(--base); + padding: var(--spacing); + filter: blur(var(--blur)); + border-radius: 1rem; + + } + span{ + color: var(--base); + } \ No newline at end of file From da8414ea9c88719578e53f3d3353e3a0e4eb8116 Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Thu, 24 Apr 2025 10:16:31 -0800 Subject: [PATCH 06/14] Day4 Finished --- 04 - Array Cardio Day 1/index-START.html | 59 ++-------------- 04 - Array Cardio Day 1/script.js | 87 ++++++++++++++++++++++++ 2 files changed, 91 insertions(+), 55 deletions(-) create mode 100644 04 - Array Cardio Day 1/script.js diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..834acac924 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,60 +7,9 @@

Psst: have a look at the JavaScript Console 💁

- +
+ list +
+ diff --git a/04 - Array Cardio Day 1/script.js b/04 - Array Cardio Day 1/script.js new file mode 100644 index 0000000000..f7c58a42f2 --- /dev/null +++ b/04 - Array Cardio Day 1/script.js @@ -0,0 +1,87 @@ +// Get your shorts on - this is an array workout! + // ## Array Cardio Day 1 + + // Some data we can work with + const inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } + ]; + + const people = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + '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 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 fullName = inventors.map(inventor => inventor.first +' '+ inventor.last); + console.log(fullName); + + + // Array.prototype.sort() + // 3. Sort the inventors by birthdate, oldest to youngest + const birthdate = inventors.sort((a,b) => a.year - b.year); + console.table(birthdate); + // Array.prototype.reduce() + // 4. How many years did all the inventors live all together? + const total = inventors.reduce((total,inventor) => { return total + inventor.passed - inventor.year},0); + console.log(total); + + // 5. Sort the inventors by years lived + const oldest = inventors.sort((a,b)=>{ + const last = a.passed - a.year; + const next = b.passed - b.year; + return last-next; + }) + console.table(oldest); + + + // 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 = Array.from(Category.querySelectorAll('a')); + //const deList = links.map(link => link.textContent).filter(streetName => streetName.includes('de')); + + + // 7. sort Exercise + // Sort the people alphabetically by last name + people.sort((a,b) =>{ + const last = a.split(' ').slice(-1)[0].toLowerCase(); + const first = b.split(' ').slice(-1)[0].toLowerCase(); + + return last.localeCompare(first); + }) + console.log(people); + + + // 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', 'pogostick']; + + const i = data.reduce((obj,item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++ + + return obj; + },{}); + console.log(i); + From 52b8ce77befdd18386d2cabc900be4f8a9a5f1b2 Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Fri, 25 Apr 2025 10:46:45 -0800 Subject: [PATCH 07/14] Day5 Finished --- 05 - Flex Panel Gallery/index-START.html | 77 ++-------------------- 05 - Flex Panel Gallery/script.js | 13 ++++ 05 - Flex Panel Gallery/style.css | 82 ++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 73 deletions(-) create mode 100644 05 - Flex Panel Gallery/script.js create mode 100644 05 - Flex Panel Gallery/style.css diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 88a4f1d1e2..f06b3676cf 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -5,78 +5,9 @@ Flex Panels 💪 + - - -

Hey

@@ -105,9 +36,9 @@
- + + + diff --git a/05 - Flex Panel Gallery/script.js b/05 - Flex Panel Gallery/script.js new file mode 100644 index 0000000000..4732d748c7 --- /dev/null +++ b/05 - Flex Panel Gallery/script.js @@ -0,0 +1,13 @@ +const panels = document.querySelectorAll('.panel'); + +function openToggle(){ + this.classList.toggle('open'); +} +function activeToggle(e){ + if(e.propertyName === "flex-grow" && "flex"){ + this.classList.toggle('open-active'); + } + return +} +panels.forEach(panel => panel.addEventListener('click',openToggle)) +panels.forEach(panel => panel.addEventListener('transitionend',activeToggle)) \ No newline at end of file diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..5ad673d750 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,82 @@ +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; + } + + body { + margin: 0; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + .panels { + min-height: 100vh; + overflow: hidden; + display: flex; + + } + + .panel { + background: #6B0F9C; + cursor: pointer; + box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); + color: white; + text-align: center; + align-items: center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size: cover; + background-position: center; + display: flex; + flex-direction: column; + justify-content: center; + flex: 1; + } + + .panel1 { background-image:url(https://wallpaperaccess.com/full/9841995.jpg); } + .panel2 { background-image:url(https://wallpaperaccess.com/full/9841985.jpg); } + .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } + .panel4 { background-image:url(https://wallpaperaccess.com/full/9842007.jpg); } + .panel5 { background-image:url(https://wallpaperaccess.com/full/9841998.jpg); } + + /* Flex Children */ + .panel > * { + margin: 0; + width: 100%; + transition: transform 0.5s; + display: flex; + flex: 1 0 auto; + align-items: center; + justify-content: 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 { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + 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; + } \ No newline at end of file From 7b77dd8479bc67d11d15ba63c1bd49699f20548c Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Sun, 27 Apr 2025 09:37:22 -0800 Subject: [PATCH 08/14] Day6 Finished --- 06 - Type Ahead/index-START.html | 9 +++---- 06 - Type Ahead/script.js | 41 ++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 6 deletions(-) create mode 100644 06 - Type Ahead/script.js diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..c776da770e 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -9,15 +9,12 @@
- -
    + +
    • Filter for a city
    • or a state
    - + diff --git a/06 - Type Ahead/script.js b/06 - Type Ahead/script.js new file mode 100644 index 0000000000..30f622dc0d --- /dev/null +++ b/06 - Type Ahead/script.js @@ -0,0 +1,41 @@ +const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; +const cities = [] +fetch(endpoint) +.then(response => response.json()) +.then(data => { + cities.push(...data); +}); +function FindMatch(word, cities){ + return cities.filter(place => { + const Regex = new RegExp(word, 'gi'); + return place.city.match(Regex) || place.state.match(Regex); + }) +} +function addCommas(number) { + return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } +function DisplayMatch(){ + const matches = FindMatch(this.value, cities); + const result = matches.map(place => { + const Regex = RegExp(this.value, 'gi'); + const cityName = place.city.replace(Regex, `${this.value}`); + const stateName = place.state.replace(Regex, `${this.value}`); + const population = place.population.replace(Regex, `${this.value}`); + + return ` +
  • + ${cityName}, ${stateName} + ${addCommas(population)} +
    • + + + + ` + }).join('') + suggestions.innerHTML = result; + +} +const searchInput = document.getElementById('search'); +const suggestions = document.getElementById('suggestions'); +searchInput.addEventListener('change', DisplayMatch); +suggestions.addEventListener('keyup', DisplayMatch); \ No newline at end of file From 0ba9a05520e687d7e8067e2a015ed9f487498e97 Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Thu, 8 May 2025 10:45:20 -0800 Subject: [PATCH 09/14] Day7 Finished --- 07 - Array Cardio Day 2/index-START.html | 32 +---------------- 07 - Array Cardio Day 2/script.js | 45 ++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 31 deletions(-) create mode 100644 07 - Array Cardio Day 2/script.js diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..7318aed2f6 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -7,36 +7,6 @@

    Psst: have a look at the JavaScript Console 💁

    - + diff --git a/07 - Array Cardio Day 2/script.js b/07 - Array Cardio Day 2/script.js new file mode 100644 index 0000000000..65f12fe2d2 --- /dev/null +++ b/07 - Array Cardio Day 2/script.js @@ -0,0 +1,45 @@ + // ## Array Cardio Day 2 + + const people = [ + { name: 'Wes', year: 1988 }, + { name: 'Kait', year: 1986 }, + { name: 'Irv', year: 1970 }, + { name: 'Lux', year: 2015 } + ]; + + const comments = [ + { text: 'Love this!', id: 523423 }, + { text: 'Super good', id: 823423 }, + { text: 'You are the best', id: 2039842 }, + { text: 'Ramen is my fav food ever', id: 123523 }, + { text: 'Nice Nice Nice!', id: 542328 } + ]; + + + // Some and Every Checks + // Array.prototype.some() // is at least one person 19 or older? + const hasAdult = people.some(person => 2025 - person.year >= 19); + console.log(hasAdult); + + + // Array.prototype.every() // is everyone 19 or older? + const hasAlladult = people.every(person => 2025 - person.year >= 19); + console.log(hasAlladult); + + + // 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 FindComment = comments.find(comment => comment.id === 823423); + console.table(FindComment); + + + // Array.prototype.findIndex() + // Find the comment with this ID + const indexToDelete = comments.findIndex(comment => comment.id === 823423); + console.log(indexToDelete); + // delete the comment with the ID of 823423 + + comments.splice(indexToDelete,1); + console.table(comments); + \ No newline at end of file From e6efb7b6527ba4bc317dd7bdbe1c18c273ff8eeb Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Fri, 9 May 2025 10:52:24 -0800 Subject: [PATCH 10/14] Day8 Finished --- 08 - Fun with HTML5 Canvas/index-START.html | 5 +-- 08 - Fun with HTML5 Canvas/script.js | 41 +++++++++++++++++++++ 2 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 08 - Fun with HTML5 Canvas/script.js diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index f70ad2059b..cbbc15689b 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,14 +7,13 @@ - + - diff --git a/08 - Fun with HTML5 Canvas/script.js b/08 - Fun with HTML5 Canvas/script.js new file mode 100644 index 0000000000..c6562cc6db --- /dev/null +++ b/08 - Fun with HTML5 Canvas/script.js @@ -0,0 +1,41 @@ +const canvas = document.getElementById('draw'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +const ctx = canvas.getContext('2d'); +ctx.strokeStyle = "black"; +ctx.lineJoin = 'round'; +ctx.lineCap = 'round'; +ctx.lineWidth = 100; + +let isDrawing = false; +let x = 0; +let y = 0; +let hue = 0; +let direction = true; +let isErasing = false; +function draw(e){ + if(!isDrawing) return; + ctx.strokeStyle = `hsl(${hue},100%,50%)`; + ctx.lineWidth = hue; + ctx.beginPath(); + ctx.moveTo(x,y); + ctx.lineTo(e.offsetX,e.offsetY); + ctx.stroke(); + + [x,y] = [e.offsetX,e.offsetY]; + hue++; + if(hue >= 360) hue = 0; + if(direction >= 100 || ctx.lineWidth <= 1) direction = !direction; + direction ? ctx.lineWidth++ : ctx.lineWidth--; + ctx.lineWidth++; +} + +window.addEventListener('mousemove', draw); +window.addEventListener('mousedown', (e) => { + isDrawing = true; + [x,y] = [e.offsetX,e.offsetY]; +}); +window.addEventListener('mouseout',() => isDrawing = false); +window.addEventListener('mouseup', () => isDrawing = false); From 4d1d4c0a5c6dd469b7b4cd297321e1199e76ab8b Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Sat, 10 May 2025 10:47:13 -0800 Subject: [PATCH 11/14] Day9 Finished --- 09 - Dev Tools Domination/index-START.html | 35 +----------- 09 - Dev Tools Domination/script.js | 62 ++++++++++++++++++++++ 2 files changed, 63 insertions(+), 34 deletions(-) create mode 100644 09 - Dev Tools Domination/script.js diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index c061d01cda..d3b57c18dd 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -9,39 +9,6 @@

    ×BREAK×DOWN×

    - + diff --git a/09 - Dev Tools Domination/script.js b/09 - Dev Tools Domination/script.js new file mode 100644 index 0000000000..6950d5bcec --- /dev/null +++ b/09 - Dev Tools Domination/script.js @@ -0,0 +1,62 @@ + const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]; + + function makeGreen() { + const p = document.querySelector('p'); + p.style.color = '#BADA55'; + p.style.fontSize = '50px'; + } + + // Regular + console.log('this is a regular message') + // Interpolated + console.log('this is a %s message', '👉🏾interpolated'); + // Style + console.log('%cthis is a styled message', 'font-size: 20px; color: blue; text-shadow: 0 0 5px #000'); + + + // warning! + console.warn('this is a warning'); + + // Error :| + console.error('this is an error'); + + // Info + console.info('this is an info'); + // Testing + console.assert(12 > 20, 'this is incorrect'); + // clearing + //console.clear(); + // Viewing DOM Elements + const p = document.querySelector('p'); + console.dir(p); + console.log(p); + + + // Grouping together + dogs.forEach(dog => { + console.group(`${dog.name}`); + console.log(`This is ${dog.name}`); + console.log(`${dog.name} is ${dog.age} years old`); + console.log(`${dog.name} is a good boy`); + console.groupEnd(`${dog.name}`); + }) + // counting + console.count('hello'); + console.count('hello'); + console.count('world'); + console.count('hello'); + console.count('world'); + + + + + // timing + console.time('fetching data') + fetch('https://api.github.com/users/johnabrham438') + .then(response => response.json()) + .then(data => { + console.timeEnd('fetching data'); + console.log(data); + + }) + \ No newline at end of file From 12d5be5a3aaf5257565ca89536e9a3d3d569d357 Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Sun, 11 May 2025 09:58:14 -0800 Subject: [PATCH 12/14] Day10 Finished --- .../index-START.html | 3 +-- .../script.js | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) create mode 100644 10 - Hold Shift and Check Checkboxes/script.js diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index 25df6ad31e..029bb1a7c8 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -96,7 +96,6 @@ - + diff --git a/10 - Hold Shift and Check Checkboxes/script.js b/10 - Hold Shift and Check Checkboxes/script.js new file mode 100644 index 0000000000..25d63a404f --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/script.js @@ -0,0 +1,21 @@ +const Checkboxes = document.querySelectorAll('input[type="checkbox"]'); +let lastChecked; +function Handle(e){ + let isBetween = false; + if(e.shiftKey && this.checked){ + Checkboxes.forEach(checkbox => { + console.log(checkbox); + if(checkbox === this){ + isBetween = !isBetween; + + } + if(isBetween){ + checkbox.checked = true; + } + + }) + + } + +} +Checkboxes.forEach( Checkbox => Checkbox.addEventListener('click', Handle)); From c02c6b52776edb5749220a1ba673c5aa87ad31ca Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Mon, 12 May 2025 10:20:32 -0800 Subject: [PATCH 13/14] day11 finished --- 11 - Custom Video Player/scripts.js | 47 +++++++++++++++++++++++++++++ 11 - Custom Video Player/style.css | 2 +- 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..5a37315186 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,47 @@ +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('input'); + +function play(){ + video[video.paused ? 'play' : 'pause']() + +} +function toogleButton(){ + toggle.textContent = video.paused ? '▶' : '⏸'; +} +function skip(){ + video.currentTime += parseFloat(this.dataset.skip); + + +} +function updateRange(){ + video[this.name] = this.value; + +} +function updateProgress(){ + progressBar.style.flexBasis = `${(video.currentTime / video.duration) * 100}%`; +} +function scrub(e){ + video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration; +} +let isMouseDown = false; +video.addEventListener('click',play); +video.addEventListener('play', toogleButton); +video.addEventListener('pause', toogleButton); +video.addEventListener('timeupdate', updateProgress); + + +toggle.addEventListener('click',play); +skipButtons.forEach(button => button.addEventListener('click', skip)) +ranges.forEach(range => range.addEventListener('change',updateRange)) +ranges.forEach(range => range.addEventListener('mousemove',updateRange)) +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e) => isMouseDown && scrub(e)); +progress.addEventListener('mousedown',() => isMouseDown = true); +progress.addEventListener('mouseup',() => isMouseDown = false); +window.addEventListener('keydown', (e) => {if(e.key === ' ') play()}) + diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index f2420cdf32..8d8a9485fb 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -94,7 +94,7 @@ body { height: 5px; transition: height 0.3s; background: rgba(0,0,0,0.5); - cursor: ew-resize; + cursor: pointer; } .progress__filled { From 93f5da60d1e5aefa8e3d877afad97fcfe93d9f11 Mon Sep 17 00:00:00 2001 From: johnabrham438 Date: Tue, 13 May 2025 08:23:12 -0800 Subject: [PATCH 14/14] day12 finished --- 12 - Key Sequence Detection/index-START.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 6ca54bf60c..b32f6ccaca 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -7,6 +7,19 @@ - +