From aed97156758f4b2028ecfdece7c5bbdd8259dbce Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:12:54 -0500 Subject: [PATCH 01/48] Completed it --- 01 - JavaScript Drum Kit/index-FINISHED.html | 29 ++++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..9a896f0d81 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -1,8 +1,8 @@ - + - JS Drum Kit + JS Drum Kit - Wes Bos @@ -58,23 +58,22 @@ From ec24f71b791c6768eec3768a24b1e22daf7eec94 Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:23:06 -0500 Subject: [PATCH 02/48] Updated repo --- 01 - JavaScript Drum Kit/index-START.html | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..9a896f0d81 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,8 +1,8 @@ - + - JS Drum Kit + JS Drum Kit - Wes Bos @@ -58,7 +58,23 @@ From 1f54b5da951c3303168b49bb391a48e5059d5d2e Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:24:17 -0500 Subject: [PATCH 03/48] Updated Css --- 01 - JavaScript Drum Kit/style.css | 46 ++++++++++++++---------------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320b37..8856ecec4f 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,50 +1,48 @@ -html { - font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; - background-size: cover; -} -body,html { +html, body { margin: 0; padding: 0; font-family: sans-serif; + font-size: 10px; + background: url("https://images.pexels.com/photos/167636/pexels-photo-167636.jpeg?cs=srgb&dl=applause-audience-band-167636.jpg&fm=jpg") bottom center; + background-size: cover; } .keys { - display:flex; - flex:1; - min-height:100vh; + display: flex; + flex: 1; + min-height: 100vh; align-items: center; justify-content: center; } .key { - border:4px solid black; - border-radius:5px; - margin:1rem; + border: .4rem solid black; + border-radius: .5rem; + margin: 1rem; font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; + padding: 1rem .5rem; + transition: all .07s; + width: 10rem; text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 .5rem black; } .playing { - transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; } kbd { display: block; - font-size: 40px; + font-size: 4rem; } .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: 1px; - color:#ffc600; + letter-spacing: .1rem; + color: #ffc600; } From d2bc686c18eae6bf23b9127e04bee797f3a5308d Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:24:42 -0500 Subject: [PATCH 04/48] Delete index.html --- 01 - JavaScript Drum Kit/index.html | 83 ----------------------------- 1 file changed, 83 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html deleted file mode 100644 index 246639f990..0000000000 --- a/01 - JavaScript Drum Kit/index.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 -
-
- - - - - - - - - - - - - - - From 833ff37e2808f737cdcda57aab2da4e1ddd755a4 Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:24:58 -0500 Subject: [PATCH 05/48] Delete index-FINISHED.html --- 01 - JavaScript Drum Kit/index-FINISHED.html | 82 -------------------- 1 file changed, 82 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 9a896f0d81..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - - JS Drum Kit - Wes Bos - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - From a6e4f0194983b6d3d1a1bfd329966dd6e32a768d Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:25:30 -0500 Subject: [PATCH 06/48] Rename index-START.html to index.html --- 01 - JavaScript Drum Kit/{index-START.html => index.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename 01 - JavaScript Drum Kit/{index-START.html => index.html} (100%) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/index.html From af28205be77ab52e6b4cb92ea53ce978a17e3f0a Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Tue, 31 Dec 2019 19:27:17 -0500 Subject: [PATCH 07/48] Create README.md --- 01 - JavaScript Drum Kit/README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 01 - JavaScript Drum Kit/README.md diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md new file mode 100644 index 0000000000..ca76496fa2 --- /dev/null +++ b/01 - JavaScript Drum Kit/README.md @@ -0,0 +1 @@ +Completed Drumkit For JS30 Course From 0244231f24dd8ae29d6d0b036c9bbcd6cc623daf Mon Sep 17 00:00:00 2001 From: Nerando Johnson Date: Thu, 2 Jan 2020 21:13:08 -0500 Subject: [PATCH 08/48] Completed my turn --- 02 - JS + CSS Clock/index-START.html | 64 ++++++++++++++++++++++------ 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..81026aff8a 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -18,17 +18,18 @@ From 2b3ae1c697aa3625999e4e2de629a350bef75950 Mon Sep 17 00:00:00 2001 From: Nerajno Date: Sat, 4 Jan 2020 15:00:01 -0500 Subject: [PATCH 09/48] Completed Day 3v3 --- 03 - CSS Variables/index-START.html | 54 ------------------- .../{index-FINISHED.html => index.html} | 30 ++++++----- 2 files changed, 18 insertions(+), 66 deletions(-) delete mode 100644 03 - CSS Variables/index-START.html rename 03 - CSS Variables/{index-FINISHED.html => index.html} (67%) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html deleted file mode 100644 index 7171607a8b..0000000000 --- a/03 - CSS Variables/index-START.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index.html similarity index 67% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables/index.html index c3217fc003..eb47c2df9b 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index.html @@ -9,36 +9,42 @@

Update CSS Variables with JS

- + - + - +
+ - From 74389191531f7c3ef35bda3f5a7fc726b1840226 Mon Sep 17 00:00:00 2001 From: github username Date: Mon, 20 Jan 2020 09:31:12 -0500 Subject: [PATCH 10/48] completed arrays --- 02 - JS + CSS Clock/index-FINISHED.html | 98 ---------------- 04 - Array Cardio Day 1/index-FINISHED.html | 106 ------------------ .../{index-START.html => index.html} | 56 ++++++++- 3 files changed, 55 insertions(+), 205 deletions(-) delete mode 100644 02 - JS + CSS Clock/index-FINISHED.html delete mode 100644 04 - Array Cardio Day 1/index-FINISHED.html rename 04 - Array Cardio Day 1/{index-START.html => index.html} (62%) diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index d4cb3b56a8..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html deleted file mode 100644 index e61b94c006..0000000000 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - Array Cardio 💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index.html similarity index 62% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/index.html index 4162bce339..adca0207d9 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index.html @@ -33,28 +33,82 @@ // 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); // give a table of of an array of objects. // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + // console.log(fullNames); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + // const ageRange = inventors.sort(function(a,b){ + // if(a.year > b.year){ + // return 1; + // }else{ + // return -1; + // } + // }); + + const orderedAgeRange = inventors.sort((a,b) => a.year > b.year ? 1 : -1); + // console.log(ageRange); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year); + }, 0); + + // console.log(totalYears); + + // 5. Sort the inventors by years lived + const oldestLived = inventors.sort(function(a,b){ + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -1 : 1; + }); + // console.table(oldestLived); + // 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 targetPage = `https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris`; + // const category = document.querySelector('.mw-category'); + // const links = Array.from(category.querySelectorAll('a')); + // const de = links + // .map(link => link.textContent) + // .filter(streetName => streetName.includes('de')); + // Need to figure out how to use the website as a variable. // 7. sort Exercise // Sort the people alphabetically by last name + const sortedPeople = people.sort((lastOne, nextOne) =>{ + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 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(obj, item){ + if(!obj[item]){ + obj[item]= 0; + } + // shouldn't there be an "else()" here ? + obj[item]++; + return obj; + },{}); + + console.log(transportation); + From a9acbcd8b7e6fb5f04a81969b24a6fbbbbb8b26b Mon Sep 17 00:00:00 2001 From: github username Date: Tue, 21 Jan 2020 10:27:14 -0500 Subject: [PATCH 11/48] Completed the 5th challenge --- 05 - Flex Panel Gallery/index-START.html | 116 ------------------ .../{index-FINISHED.html => index.html} | 46 +++---- 2 files changed, 23 insertions(+), 139 deletions(-) delete mode 100644 05 - Flex Panel Gallery/index-START.html rename 05 - Flex Panel Gallery/{index-FINISHED.html => index.html} (82%) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html deleted file mode 100644 index e1d643ad5c..0000000000 --- a/05 - Flex Panel Gallery/index-START.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - - - diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index.html similarity index 82% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/index.html index 243f8a221d..7336be4d99 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index.html @@ -9,30 +9,32 @@ @@ -126,12 +128,10 @@ const panels = document.querySelectorAll('.panel'); function toggleOpen() { - console.log('Hello'); this.classList.toggle('open'); } function toggleActive(e) { - console.log(e.propertyName); if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); } From d3340ed622d8e50d4b53dd51e83c66b03061de53 Mon Sep 17 00:00:00 2001 From: github username Date: Wed, 22 Jan 2020 21:00:22 -0500 Subject: [PATCH 12/48] Completed Day/ Challenge 6 --- 06 - Type Ahead/index-FINISHED.html | 61 -------------------------- 06 - Type Ahead/index-START.html | 22 ---------- 06 - Type Ahead/index.html | 66 +++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 83 deletions(-) delete mode 100644 06 - Type Ahead/index-FINISHED.html delete mode 100644 06 - Type Ahead/index-START.html create mode 100644 06 - Type Ahead/index.html diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html deleted file mode 100644 index 5902b43936..0000000000 --- a/06 - Type Ahead/index-FINISHED.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Type Ahead 👀 - - - - -
- -
    -
  • Filter for a city
    • -
  • or a state
    • -
-
- - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 1436886918..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Type Ahead 👀 - - - - -
- -
    -
  • Filter for a city
    • -
  • or a state
    • -
-
- - - diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..bf0f8bb212 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,66 @@ + + + + + + Type Ahead 👀 + + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + + From 4b974138b50b03aeba1204bd773ce877680e3aa0 Mon Sep 17 00:00:00 2001 From: github username Date: Mon, 17 Aug 2020 07:45:13 -0400 Subject: [PATCH 13/48] Js again --- 07 - Array Cardio Day 2/index-FINISHED.html | 68 --------------------- 07 - Array Cardio Day 2/index-START.html | 16 +++++ 2 files changed, 16 insertions(+), 68 deletions(-) delete mode 100644 07 - Array Cardio Day 2/index-FINISHED.html diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html deleted file mode 100644 index c8e5b25d3b..0000000000 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - Array Cardio 💪💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..243563f4fb 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -16,6 +16,8 @@ { name: 'Lux', year: 2015 } ]; + + const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, @@ -26,7 +28,21 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19? + // const isAdult = people.some(function(person){ + // const currentYear = (new Date()).getFullYear(); + // if(currentYear - person.year >= 19){ + // return true; + // } + // }); + + const isAdult = people.some(person => ((new Date()). + getFullYear()) - 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 From 404d4a22810a52e8452bc111e4cfc2646ce13fa1 Mon Sep 17 00:00:00 2001 From: nerajno Date: Mon, 23 Nov 2020 22:15:52 -0500 Subject: [PATCH 14/48] cardio array --- 07 - Array Cardio Day 2/index-START.html | 34 ++++++++++++++++++------ 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 243563f4fb..4c13c138bb 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -27,6 +27,8 @@ ]; // Some and Every Checks + + // .some() Solution A // Array.prototype.some() // is at least one person 19? // const isAdult = people.some(function(person){ // const currentYear = (new Date()).getFullYear(); @@ -35,21 +37,37 @@ // } // }); - const isAdult = people.some(person => ((new Date()). - getFullYear()) - person.year >= 19); - console.log({isAdult}); + // .some() Solution B + // const isAdult = people.some(person => ((new Date()). + // getFullYear()) - 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.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 + // Array.prototype.find() + // const comment = comments.find(function(comment){ + // if(comment.id === 823423){ + // return true; + // } + // }); + // console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID + const index = comments.findIndex(comment => comment.id === 823423); + //console.log(index); + + const newComments = [ + ... comments.slice(0, index), + ... comments.slice(index + 1) + ]; + // delete the comment with the ID of 823423 From 4590286e7b3d1668a4e06103dc829fb21efc0823 Mon Sep 17 00:00:00 2001 From: nerajno Date: Sat, 28 Nov 2020 01:08:33 -0500 Subject: [PATCH 15/48] almost there --- 08 - Fun with HTML5 Canvas/index-START.html | 43 ++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..2edf1988a1 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,8 +7,49 @@ + const canvas = document.querySelector('#draw'); + const ctx = canvas.getContext('2d'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + ctx.strokeStyle = '#BADA55'; + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + ctx.lineWidth = 70; + // ctx.globalCompositeOperation = 'multiply'; + + let isDrawing = false; + let lastX = 0; + let lastY = 0; + let hue = 0; + + function draw(e) { + if(!isDrawing) return; + + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + // start from + ctx.moveTo(lastX, lastY); + // go to + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, e.offsetY]; + hue++; + if( hue >= 360){ + hue = 0; + } + } + + canvas.addEventListener('mousedown', (e) => { + isDrawing = true; + [lastX, lastX] = [ e.offsetX, e.offsetY]; + }); + + canvas.addEventListener('mousemove', draw); + canvas.addEventListener('mouseup', () => isDrawing = false); + canvas.addEventListener('mouseout', () => isDrawing = false); + + - - - diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-completedhtml similarity index 62% rename from 08 - Fun with HTML5 Canvas/index-START.html rename to 08 - Fun with HTML5 Canvas/index-completedhtml index 2edf1988a1..d582d45e58 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-completedhtml @@ -18,30 +18,42 @@ // ctx.globalCompositeOperation = 'multiply'; let isDrawing = false; - let lastX = 0; - let lastY = 0; + let lastX ; + let lastY ; let hue = 0; + let direction = true; function draw(e) { - if(!isDrawing) return; - - ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; - ctx.beginPath(); - // start from - ctx.moveTo(lastX, lastY); - // go to - ctx.lineTo(e.offsetX, e.offsetY); - ctx.stroke(); - [lastX, lastY] = [e.offsetX, e.offsetY]; - hue++; - if( hue >= 360){ + if(!isDrawing) return; + + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + // start from + ctx.moveTo(lastX, lastY); + // go to + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, e.offsetY]; + + hue++; + if ( hue >= 360){ hue = 0; } + + if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1){ + direction = !direction; + } + + if (direction){ + ctx.lineWidth++; + } else { + ctx.lineWidth--; + } } canvas.addEventListener('mousedown', (e) => { - isDrawing = true; + isDrawing = true; //flag [lastX, lastX] = [ e.offsetX, e.offsetY]; }); From 0d3c346f6b5860805ba594059801ceadfc3ebf1f Mon Sep 17 00:00:00 2001 From: nerajno Date: Wed, 9 Dec 2020 22:18:17 -0500 Subject: [PATCH 17/48] My brain is blank --- 09 - Dev Tools Domination/index-FINISHED.html | 89 ------------------- 09 - Dev Tools Domination/index-START.html | 53 +++++++++-- 2 files changed, 44 insertions(+), 98 deletions(-) delete mode 100644 09 - Dev Tools Domination/index-FINISHED.html diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html deleted file mode 100644 index 55cd3a2f42..0000000000 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - Console Tricks! - - - -

×BREAK×DOWN×

- - - - diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..20210c190e 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -9,7 +9,7 @@

×BREAK×DOWN×

From 5e782053a28653f66fa8ea2c00c5ad112f3b9e45 Mon Sep 17 00:00:00 2001 From: nerajno Date: Mon, 14 Jun 2021 10:14:53 -0400 Subject: [PATCH 18/48] intial commit on new maching --- .../README.md | 0 .../index.html | 0 .../sounds/boom.wav | Bin .../sounds/clap.wav | Bin .../sounds/hihat.wav | Bin .../sounds/kick.wav | Bin .../sounds/openhat.wav | Bin .../sounds/ride.wav | Bin .../sounds/snare.wav | Bin .../sounds/tink.wav | Bin .../sounds/tom.wav | Bin .../style.css | 0 ...{index-START.html => index-completed.html} | 0 02 - JS + CSS Clock/index.html | 96 ------------ .../{index.html => index ~ completed.html} | 0 .../{index.html => index ~ completed.html} | 0 .../{index.html => index ~ completed.html} | 0 .../index.html | 0 .../style.css | 0 ...{index-START.html => index-completed.html} | 0 ...dex-completedhtml => index-completed.html} | 0 ...{index-START.html => index-completed.html} | 0 .../index-FINISHED.html | 137 ------------------ .../index-START.html | 24 +++ 24 files changed, 24 insertions(+), 233 deletions(-) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/README.md (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/index.html (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/boom.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/clap.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/hihat.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/kick.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/openhat.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/ride.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/snare.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/tink.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/sounds/tom.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum Kit ~ completed}/style.css (100%) rename 02 - JS + CSS Clock/{index-START.html => index-completed.html} (100%) delete mode 100644 02 - JS + CSS Clock/index.html rename 03 - CSS Variables/{index.html => index ~ completed.html} (100%) rename 04 - Array Cardio Day 1/{index.html => index ~ completed.html} (100%) rename 05 - Flex Panel Gallery/{index.html => index ~ completed.html} (100%) rename {06 - Type Ahead => 06 - Type Ahead ~ Completed}/index.html (100%) rename {06 - Type Ahead => 06 - Type Ahead ~ Completed}/style.css (100%) rename 07 - Array Cardio Day 2/{index-START.html => index-completed.html} (100%) rename 08 - Fun with HTML5 Canvas/{index-completedhtml => index-completed.html} (100%) rename 09 - Dev Tools Domination/{index-START.html => index-completed.html} (100%) delete mode 100644 10 - Hold Shift and Check Checkboxes/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit ~ completed/README.md similarity index 100% rename from 01 - JavaScript Drum Kit/README.md rename to 01 - JavaScript Drum Kit ~ completed/README.md diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit ~ completed/index.html similarity index 100% rename from 01 - JavaScript Drum Kit/index.html rename to 01 - JavaScript Drum Kit ~ completed/index.html diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav b/01 - JavaScript Drum Kit ~ completed/sounds/boom.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/boom.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/boom.wav diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav b/01 - JavaScript Drum Kit ~ completed/sounds/clap.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/clap.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/clap.wav diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav b/01 - JavaScript Drum Kit ~ completed/sounds/hihat.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/hihat.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/hihat.wav diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav b/01 - JavaScript Drum Kit ~ completed/sounds/kick.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/kick.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/kick.wav diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav b/01 - JavaScript Drum Kit ~ completed/sounds/openhat.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/openhat.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/openhat.wav diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav b/01 - JavaScript Drum Kit ~ completed/sounds/ride.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/ride.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/ride.wav diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav b/01 - JavaScript Drum Kit ~ completed/sounds/snare.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/snare.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/snare.wav diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum Kit ~ completed/sounds/tink.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/tink.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/tink.wav diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav b/01 - JavaScript Drum Kit ~ completed/sounds/tom.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/tom.wav rename to 01 - JavaScript Drum Kit ~ completed/sounds/tom.wav diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit ~ completed/style.css similarity index 100% rename from 01 - JavaScript Drum Kit/style.css rename to 01 - JavaScript Drum Kit ~ completed/style.css diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-completed.html similarity index 100% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS + CSS Clock/index-completed.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html deleted file mode 100644 index 1c777557da..0000000000 --- a/02 - JS + CSS Clock/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index ~ completed.html similarity index 100% rename from 03 - CSS Variables/index.html rename to 03 - CSS Variables/index ~ completed.html diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index ~ completed.html similarity index 100% rename from 04 - Array Cardio Day 1/index.html rename to 04 - Array Cardio Day 1/index ~ completed.html diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/ index ~ completed.html similarity index 100% rename from 05 - Flex Panel Gallery/index.html rename to 05 - Flex Panel Gallery/ index ~ completed.html diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead ~ Completed/index.html similarity index 100% rename from 06 - Type Ahead/index.html rename to 06 - Type Ahead ~ Completed/index.html diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead ~ Completed/style.css similarity index 100% rename from 06 - Type Ahead/style.css rename to 06 - Type Ahead ~ Completed/style.css diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-completed.html similarity index 100% rename from 07 - Array Cardio Day 2/index-START.html rename to 07 - Array Cardio Day 2/index-completed.html diff --git a/08 - Fun with HTML5 Canvas/index-completedhtml b/08 - Fun with HTML5 Canvas/index-completed.html similarity index 100% rename from 08 - Fun with HTML5 Canvas/index-completedhtml rename to 08 - Fun with HTML5 Canvas/index-completed.html diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-completed.html similarity index 100% rename from 09 - Dev Tools Domination/index-START.html rename to 09 - Dev Tools Domination/index-completed.html diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html deleted file mode 100644 index 3ce296cc4b..0000000000 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - Document - - - - -
-
- -

This is an inbox layout.

-
-
- -

Check one item

-
-
- -

Hold down your Shift key

-
-
- -

Check a lower item

-
-
- -

Everything inbetween should also be set to checked

-
-
- -

Try do it with out any libraries

-
-
- -

Just regular JavaScript

-
-
- -

Good Luck!

-
-
- -

Don't forget to tweet your result!

-
-
- - - - diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..b319d8d44e 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -104,6 +104,30 @@ From caf7a5a23853902b2702ed3c95e298d1559f791c Mon Sep 17 00:00:00 2001 From: nerajno Date: Mon, 14 Jun 2021 12:24:08 -0400 Subject: [PATCH 19/48] revamping new commits --- .../{index-completedhtml => index-completed.html} | 0 09 - Dev Tools Domination/index-START.html | 1 - 2 files changed, 1 deletion(-) rename 08 - Fun with HTML5 Canvas/{index-completedhtml => index-completed.html} (100%) diff --git a/08 - Fun with HTML5 Canvas/index-completedhtml b/08 - Fun with HTML5 Canvas/index-completed.html similarity index 100% rename from 08 - Fun with HTML5 Canvas/index-completedhtml rename to 08 - Fun with HTML5 Canvas/index-completed.html diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 20210c190e..01d570dd8f 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -65,7 +65,6 @@ console.count('Steve'); // timing - console.time('fetching data');// timing started fetch('https://api.github.com/users/wesbos') .then(data => data.json()) From f8f2c2210257a594f011412ba0b48591c713b501 Mon Sep 17 00:00:00 2001 From: nerajno Date: Wed, 16 Jun 2021 08:57:52 -0400 Subject: [PATCH 20/48] completed video player --- ...{index-START.html => index-completed.html} | 0 .../index.html | 3 +- 11 - Custom Video Player completed/scripts.js | 66 +++++++++++++++++++ .../style.css | 0 11 - Custom Video Player/scripts-FINISHED.js | 55 ---------------- 11 - Custom Video Player/scripts.js | 0 6 files changed, 68 insertions(+), 56 deletions(-) rename 10 - Hold Shift and Check Checkboxes/{index-START.html => index-completed.html} (100%) rename {11 - Custom Video Player => 11 - Custom Video Player completed}/index.html (86%) create mode 100644 11 - Custom Video Player completed/scripts.js rename {11 - Custom Video Player => 11 - Custom Video Player completed}/style.css (100%) delete mode 100644 11 - Custom Video Player/scripts-FINISHED.js delete mode 100644 11 - Custom Video Player/scripts.js diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-completed.html similarity index 100% rename from 10 - Hold Shift and Check Checkboxes/index-START.html rename to 10 - Hold Shift and Check Checkboxes/index-completed.html diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player completed/index.html similarity index 86% rename from 11 - Custom Video Player/index.html rename to 11 - Custom Video Player completed/index.html index fe2b55b394..40e7a3889f 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player completed/index.html @@ -18,7 +18,8 @@ - + + diff --git a/11 - Custom Video Player completed/scripts.js b/11 - Custom Video Player completed/scripts.js new file mode 100644 index 0000000000..ac7d1e0757 --- /dev/null +++ b/11 - Custom Video Player completed/scripts.js @@ -0,0 +1,66 @@ +// Get Elemments +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(".player__slider"); +const screenSize = player.querySelector(".fullscreen"); + +// Build Functions +function togglePlay(){ + const method = video.paused ? 'play' : 'pause'; + video[method](); +} + +function updateBtn(){ + const icon = this.paused ? '►' : '❚❚'; + toggle.textContent = icon; +} + +function skip(){ + video.currentTime += parseFloat(this.dataset.skip); +} + +function handleRangeUpdate(){ + video[this.name] = this.value; +} + +function handleProgress() { + const percent = (video.currentTime/ video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} + +function scrub(e) { + // e.preventDefault(); + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + // console.log(scrubTime); + video.currentTime = scrubTime; +} +// ToDo ~> Complete this +function toggleScreen(e) { + console.log(e, "clicked"); + document.getElementsByClassName("player").style = "maxWidth:100vh"; +} + +// Connect the Event Listeners +video.addEventListener('click', togglePlay); + +video.addEventListener('play', updateBtn); +video.addEventListener('pause', updateBtn); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); +skipButtons.forEach(button => button.addEventListener('click', skip)); +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); +ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); + +let mousedown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', scrub); +progress.addEventListener('mousemove', () => mousedown && scrub(e)); +progress.addEventListener('mousedown', () => mousedown = true); +progress.addEventListener('mouseup', () => mousedown = false); + +screenSize.addEventListener('click', toggleScreen); \ No newline at end of file diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player completed/style.css similarity index 100% rename from 11 - Custom Video Player/style.css rename to 11 - Custom Video Player completed/style.css diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js deleted file mode 100644 index cedacf2f68..0000000000 --- a/11 - Custom Video Player/scripts-FINISHED.js +++ /dev/null @@ -1,55 +0,0 @@ -/* Get Our Elements */ -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('.player__slider'); - -/* Build out functions */ -function togglePlay() { - const method = video.paused ? 'play' : 'pause'; - video[method](); -} - -function updateButton() { - const icon = this.paused ? '►' : '❚ ❚'; - console.log(icon); - toggle.textContent = icon; -} - -function skip() { - video.currentTime += parseFloat(this.dataset.skip); -} - -function handleRangeUpdate() { - video[this.name] = this.value; -} - -function handleProgress() { - const percent = (video.currentTime / video.duration) * 100; - progressBar.style.flexBasis = `${percent}%`; -} - -function scrub(e) { - const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; - video.currentTime = scrubTime; -} - -/* Hook up the event listners */ -video.addEventListener('click', togglePlay); -video.addEventListener('play', updateButton); -video.addEventListener('pause', updateButton); -video.addEventListener('timeupdate', handleProgress); - -toggle.addEventListener('click', togglePlay); -skipButtons.forEach(button => button.addEventListener('click', skip)); -ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); -ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); - -let mousedown = false; -progress.addEventListener('click', scrub); -progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); -progress.addEventListener('mousedown', () => mousedown = true); -progress.addEventListener('mouseup', () => mousedown = false); diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js deleted file mode 100644 index e69de29bb2..0000000000 From 63dc2c7e413164fecbfac33a879ad978d37b2236 Mon Sep 17 00:00:00 2001 From: nerajno Date: Wed, 16 Jun 2021 09:29:13 -0400 Subject: [PATCH 21/48] completed keylogger --- .../index-FINISHED.html | 25 ------------------- 12 - Key Sequence Detection/index-START.html | 12 --------- .../index-completed.html | 24 ++++++++++++++++++ readme.md | 4 +++ 4 files changed, 28 insertions(+), 37 deletions(-) delete mode 100644 12 - Key Sequence Detection/index-FINISHED.html delete mode 100644 12 - Key Sequence Detection/index-START.html create mode 100644 12 - Key Sequence Detection/index-completed.html diff --git a/12 - Key Sequence Detection/index-FINISHED.html b/12 - Key Sequence Detection/index-FINISHED.html deleted file mode 100644 index 562127a0d2..0000000000 --- a/12 - Key Sequence Detection/index-FINISHED.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html deleted file mode 100644 index 8cab786140..0000000000 --- a/12 - Key Sequence Detection/index-START.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/12 - Key Sequence Detection/index-completed.html b/12 - Key Sequence Detection/index-completed.html new file mode 100644 index 0000000000..3502dbb9c4 --- /dev/null +++ b/12 - Key Sequence Detection/index-completed.html @@ -0,0 +1,24 @@ + + + + + Key Detection + + + + + + diff --git a/readme.md b/readme.md index 5a1eaa18c8..04fbd05dc9 100644 --- a/readme.md +++ b/readme.md @@ -15,3 +15,7 @@ These are meant to be 1:1 copies of what is done in the video. If you found a be The starter files + solutions will be updated if/when the videos are updated. Thanks! + +Todos +- [ ] Fix onHover Feature for Custom video player. +- [ ] Add fullScreen onCligit \ No newline at end of file From 8c12894ae6c5fb1e5786b71c756f670774dce9bf Mon Sep 17 00:00:00 2001 From: nerajno Date: Thu, 17 Jun 2021 21:37:15 -0400 Subject: [PATCH 22/48] commits from 1 laptop --- 11 - Custom Video Player/scripts-FINISHED.js | 55 -------------------- 1 file changed, 55 deletions(-) delete mode 100644 11 - Custom Video Player/scripts-FINISHED.js diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js deleted file mode 100644 index cedacf2f68..0000000000 --- a/11 - Custom Video Player/scripts-FINISHED.js +++ /dev/null @@ -1,55 +0,0 @@ -/* Get Our Elements */ -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('.player__slider'); - -/* Build out functions */ -function togglePlay() { - const method = video.paused ? 'play' : 'pause'; - video[method](); -} - -function updateButton() { - const icon = this.paused ? '►' : '❚ ❚'; - console.log(icon); - toggle.textContent = icon; -} - -function skip() { - video.currentTime += parseFloat(this.dataset.skip); -} - -function handleRangeUpdate() { - video[this.name] = this.value; -} - -function handleProgress() { - const percent = (video.currentTime / video.duration) * 100; - progressBar.style.flexBasis = `${percent}%`; -} - -function scrub(e) { - const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; - video.currentTime = scrubTime; -} - -/* Hook up the event listners */ -video.addEventListener('click', togglePlay); -video.addEventListener('play', updateButton); -video.addEventListener('pause', updateButton); -video.addEventListener('timeupdate', handleProgress); - -toggle.addEventListener('click', togglePlay); -skipButtons.forEach(button => button.addEventListener('click', skip)); -ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); -ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); - -let mousedown = false; -progress.addEventListener('click', scrub); -progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); -progress.addEventListener('mousedown', () => mousedown = true); -progress.addEventListener('mouseup', () => mousedown = false); From 8be63e61d9cb0b6eca139657aa4321f1d4801c08 Mon Sep 17 00:00:00 2001 From: nerajno Date: Tue, 22 Jun 2021 13:01:32 -0400 Subject: [PATCH 23/48] completed before --- .../index..html | 10 +- 13 - Slide in on Scroll/index-FINISHED.html | 140 ------------------ 2 files changed, 5 insertions(+), 145 deletions(-) rename 13 - Slide in on Scroll/index-START.html => 13 - Slide in on Scroll ~ completed/index..html (98%) delete mode 100644 13 - Slide in on Scroll/index-FINISHED.html diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll ~ completed/index..html similarity index 98% rename from 13 - Slide in on Scroll/index-START.html rename to 13 - Slide in on Scroll ~ completed/index..html index 12591bad30..aafc2d5600 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll ~ completed/index..html @@ -43,15 +43,15 @@

Slide in on Scroll

- - - - - From 051e9e9f1e1469d6dd359a8028867676161d6e43 Mon Sep 17 00:00:00 2001 From: nerajno Date: Sun, 27 Jun 2021 22:40:04 -0400 Subject: [PATCH 24/48] References vs copying --- .../index-START.html | 52 ------------- .../index.html | 74 +++++++++++++++++++ 2 files changed, 74 insertions(+), 52 deletions(-) delete mode 100644 14 - JavaScript References VS Copying/index-START.html create mode 100644 14 - JavaScript References VS Copying/index.html diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html deleted file mode 100644 index 4da1bac2ea..0000000000 --- a/14 - JavaScript References VS Copying/index-START.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - JS Reference VS Copy - - - - - - - diff --git a/14 - JavaScript References VS Copying/index.html b/14 - JavaScript References VS Copying/index.html new file mode 100644 index 0000000000..879818f74d --- /dev/null +++ b/14 - JavaScript References VS Copying/index.html @@ -0,0 +1,74 @@ + + + + + JS Reference VS Copy + + + + + + + From 784cf3ede025c75788884e65b04c40f68521dc80 Mon Sep 17 00:00:00 2001 From: nerajno Date: Mon, 28 Jun 2021 10:35:34 -0400 Subject: [PATCH 25/48] growing trees --- .../index-FINISHED.html | 99 ------------------- .../{index.html => index-completed.html} | 14 +++ .../{index-START.html => index.html} | 27 +++++ 15 - LocalStorage/style.css | 2 +- 4 files changed, 42 insertions(+), 100 deletions(-) delete mode 100644 14 - JavaScript References VS Copying/index-FINISHED.html rename 14 - JavaScript References VS Copying/{index.html => index-completed.html} (87%) rename 15 - LocalStorage/{index-START.html => index.html} (79%) diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html deleted file mode 100644 index be6d1b7646..0000000000 --- a/14 - JavaScript References VS Copying/index-FINISHED.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - JS Reference VS Copy - - - - - - - diff --git a/14 - JavaScript References VS Copying/index.html b/14 - JavaScript References VS Copying/index-completed.html similarity index 87% rename from 14 - JavaScript References VS Copying/index.html rename to 14 - JavaScript References VS Copying/index-completed.html index 879818f74d..0c6209382b 100644 --- a/14 - JavaScript References VS Copying/index.html +++ b/14 - JavaScript References VS Copying/index-completed.html @@ -66,8 +66,22 @@ console.log(cap23); // We will hopefully soon see the object ...spread + const ner = { + name: 'Nerajno', + age: 100, + social: { + twitter: "@nerajno", + fb: "nope" + } + } + + console.log(ner); // Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it. + console.clear(); + const nerdrando = Object.assign({}, ner); + nerdrando.social.twitter = "oldtype"; + console.log(nerdrando); diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index.html similarity index 79% rename from 15 - LocalStorage/index-START.html rename to 15 - LocalStorage/index.html index d444f1d68b..b00910195a 100644 --- a/15 - LocalStorage/index-START.html +++ b/15 - LocalStorage/index.html @@ -30,6 +30,33 @@

LOCAL TAPAS

const itemsList = document.querySelector('.plates'); const items = []; + function addItem(e){ + e.preventDefault(); + const inputText = (this.querySelector('[name=item]')).value; + const item = { + text: inputText, + done: false + } + items.push(item); + populateList(items, itemsList); + //console.log(item); => use for debugging + this.reset(); + } + + function populateList( dishes = [], platesList){ + platesList.innerHTML = dishes.map((dish, i) => { + return ` +
  • + + +
    • + `; + }).join(''); + } + + + addItems.addEventListener('submit', addItem) + diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css index ea5bab179c..2b85947582 100644 --- a/15 - LocalStorage/style.css +++ b/15 - LocalStorage/style.css @@ -1,7 +1,7 @@ html { box-sizing: border-box; - background:url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat; + background:url('https://images.pexels.com/photos/1581384/pexels-photo-1581384.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') center no-repeat; background-size:cover; min-height:100vh; display:flex; From 41f68b1b7e339cae1d062250acdd6f2f5f17216f Mon Sep 17 00:00:00 2001 From: nerajno Date: Mon, 28 Jun 2021 18:02:15 -0400 Subject: [PATCH 26/48] completed 15 --- 15 - LocalStorage/app.js | 41 ++++++++++++++ 15 - LocalStorage/index-FINISHED.html | 77 --------------------------- 15 - LocalStorage/index.html | 47 ++++++++++------ readme.md | 4 +- 4 files changed, 74 insertions(+), 95 deletions(-) create mode 100644 15 - LocalStorage/app.js delete mode 100644 15 - LocalStorage/index-FINISHED.html diff --git a/15 - LocalStorage/app.js b/15 - LocalStorage/app.js new file mode 100644 index 0000000000..76bc04e41e --- /dev/null +++ b/15 - LocalStorage/app.js @@ -0,0 +1,41 @@ +const addItems = document.querySelector('.add-items'); + const itemsList = document.querySelector('.plates'); + const items = JSON.parse(localStorage.getItem('items')) || []; + + function addItem(e) { + e.preventDefault(); + const text = (this.querySelector('[name=item]')).value; + const item = { + text, + done: false + }; + + items.push(item); + populateList(items, itemsList); + localStorage.setItem('items', JSON.stringify(items)); + this.reset(); + } + + function populateList(plates = [], platesList) { + platesList.innerHTML = plates.map((plate, i) => { + return ` +
  • + + +
    • + `; + }).join(''); + } + + function toggleDone(e){ + if(!e.target.matches('input')) return; + const el = e.target; + const index = el.dataset.index; + items[index].done = !items[index].done; + populateList(items, itemsList); + localStorage.setItem('items', JSON.stringify(items)); + } + + addItems.addEventListener('submit', addItem); + itemsList.addEventListener('click', toggleDone); + populateList(items, itemsList); diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html deleted file mode 100644 index 2c492b1088..0000000000 --- a/15 - LocalStorage/index-FINISHED.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - LocalStorage - - - - - - - -
    -

    LOCAL TAPAS

    -

    -
      -
    • Loading Tapas...
      • -
    -
    - - -
    -
    - - - - - - - diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.html index b00910195a..3afac19c6a 100644 --- a/15 - LocalStorage/index.html +++ b/15 - LocalStorage/index.html @@ -25,41 +25,54 @@

    LOCAL TAPAS

    - - diff --git a/readme.md b/readme.md index 04fbd05dc9..3003854de3 100644 --- a/readme.md +++ b/readme.md @@ -18,4 +18,6 @@ Thanks! Todos - [ ] Fix onHover Feature for Custom video player. -- [ ] Add fullScreen onCligit \ No newline at end of file +- [ ] Add fullScreen onClick +- [ ] Review all project and make notes/ discussion notes. +- [ ] Build 3 - 5 projects that take into considereation concepts that were taught. \ No newline at end of file From 39a93a2804d23d877272f33a45de136c7db45e07 Mon Sep 17 00:00:00 2001 From: nerajno Date: Tue, 29 Jun 2021 11:11:08 -0400 Subject: [PATCH 27/48] completed 17 --- 16 - Mouse Move Shadow - completed/index.html | 63 +++++++++++++++++++ 16 - Mouse Move Shadow/index-finished.html | 63 ------------------- 16 - Mouse Move Shadow/index-start.html | 36 ----------- .../{index-START.html => index.html} | 14 ++++- 4 files changed, 76 insertions(+), 100 deletions(-) create mode 100644 16 - Mouse Move Shadow - completed/index.html delete mode 100644 16 - Mouse Move Shadow/index-finished.html delete mode 100644 16 - Mouse Move Shadow/index-start.html rename 17 - Sort Without Articles/{index-START.html => index.html} (62%) diff --git a/16 - Mouse Move Shadow - completed/index.html b/16 - Mouse Move Shadow - completed/index.html new file mode 100644 index 0000000000..3a0649093a --- /dev/null +++ b/16 - Mouse Move Shadow - completed/index.html @@ -0,0 +1,63 @@ + + + + + Mouse Shadow + + + +
    +

    🔥Flames!

    +
    + + + + + + diff --git a/16 - Mouse Move Shadow/index-finished.html b/16 - Mouse Move Shadow/index-finished.html deleted file mode 100644 index 4328eaf6ab..0000000000 --- a/16 - Mouse Move Shadow/index-finished.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - Mouse Shadow - - - -
    -

    🔥WOAH!

    -
    - - - - - - diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html deleted file mode 100644 index 58a9bba861..0000000000 --- a/16 - Mouse Move Shadow/index-start.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Mouse Shadow - - - -
    -

    🔥WOAH!

    -
    - - - - - - diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index.html similarity index 62% rename from 17 - Sort Without Articles/index-START.html rename to 17 - Sort Without Articles/index.html index cfaf3e0440..43ef1f6aac 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index.html @@ -43,8 +43,20 @@
      From 2c455a52243fa53108691200e71602fd70dede9d Mon Sep 17 00:00:00 2001 From: nerajno Date: Thu, 1 Jul 2021 18:56:03 -0400 Subject: [PATCH 28/48] 1/2 way there --- .../index-FINISHED.html | 64 ------------------- 17 - Sort Without Articles/index.html | 32 ++++++---- .../index-START.html | 10 +++ 3 files changed, 28 insertions(+), 78 deletions(-) delete mode 100644 17 - Sort Without Articles/index-FINISHED.html diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index-FINISHED.html deleted file mode 100644 index 5de851cbbd..0000000000 --- a/17 - Sort Without Articles/index-FINISHED.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - Sort Without Articles - - - - - -
        - - - - - diff --git a/17 - Sort Without Articles/index.html b/17 - Sort Without Articles/index.html index 43ef1f6aac..4c5d3dff7d 100644 --- a/17 - Sort Without Articles/index.html +++ b/17 - Sort Without Articles/index.html @@ -1,9 +1,11 @@ + Sort Without Articles +
          - + document.querySelector('#bands').innerHTML = sortedBands + .map(band => `
        • ${band}
          • `) + .join(''); + + diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..d850d34855 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,16 @@ From c3852d093c4f6559f114fe4a0f6db0470c54c823 Mon Sep 17 00:00:00 2001 From: nerajno Date: Fri, 2 Jul 2021 07:13:58 -0400 Subject: [PATCH 29/48] rebasing to complete problem --- .../index-FINISHED.html | 64 ------------------- 17 - Sort Without Articles/index.html | 2 +- 2 files changed, 1 insertion(+), 65 deletions(-) delete mode 100644 17 - Sort Without Articles/index-FINISHED.html diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index-FINISHED.html deleted file mode 100644 index 5de851cbbd..0000000000 --- a/17 - Sort Without Articles/index-FINISHED.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - Sort Without Articles - - - - - -
            - - - - - diff --git a/17 - Sort Without Articles/index.html b/17 - Sort Without Articles/index.html index 43ef1f6aac..c2867381b0 100644 --- a/17 - Sort Without Articles/index.html +++ b/17 - Sort Without Articles/index.html @@ -52,7 +52,7 @@ } const sortedBands = bands.sort(( a,b) => strip(a) > strip(b) ? 1 : -1); - +console.log(sortedBands); document.querySelector('#bands').innerHTML = sortedBands .map(band => `
          • ${band}
            • `) From eaa08f64e79d9a2f7e1a377333eebf918ba4d5f3 Mon Sep 17 00:00:00 2001 From: nerajno Date: Fri, 2 Jul 2021 22:18:27 -0400 Subject: [PATCH 30/48] slow down and stuck --- .../{index-START.html => index.html} | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) rename 18 - Adding Up Times with Reduce/{index-START.html => index.html} (83%) diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index.html similarity index 83% rename from 18 - Adding Up Times with Reduce/index-START.html rename to 18 - Adding Up Times with Reduce/index.html index d850d34855..bf2277a750 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index.html @@ -181,6 +181,8 @@ Video 58 +
            + From 91d56f1c1278e6d2f2960875bf10aeed4e996c71 Mon Sep 17 00:00:00 2001 From: nerajno Date: Fri, 2 Jul 2021 22:18:45 -0400 Subject: [PATCH 31/48] slow down and stuck --- .../index-FINISHED.html | 207 ------------------ 1 file changed, 207 deletions(-) delete mode 100644 18 - Adding Up Times with Reduce/index-FINISHED.html diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18 - Adding Up Times with Reduce/index-FINISHED.html deleted file mode 100644 index 9dcbb3d396..0000000000 --- a/18 - Adding Up Times with Reduce/index-FINISHED.html +++ /dev/null @@ -1,207 +0,0 @@ - - - - - Videos - - -