diff --git a/01 - JavaScript Drum Kit ~ completed/README.md b/01 - JavaScript Drum Kit ~ completed/README.md new file mode 100644 index 0000000000..ca76496fa2 --- /dev/null +++ b/01 - JavaScript Drum Kit ~ completed/README.md @@ -0,0 +1 @@ +Completed Drumkit For JS30 Course diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit ~ completed/index.html similarity index 79% rename from 01 - JavaScript Drum Kit/index.html rename to 01 - JavaScript Drum Kit ~ completed/index.html index 246639f990..9a896f0d81 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit ~ completed/index.html @@ -1,8 +1,8 @@ - + - JS Drum Kit + JS Drum Kit - Wes Bos @@ -58,26 +58,25 @@ + 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 ~ completed/style.css b/01 - JavaScript Drum Kit ~ completed/style.css new file mode 100644 index 0000000000..8856ecec4f --- /dev/null +++ b/01 - JavaScript Drum Kit ~ completed/style.css @@ -0,0 +1,48 @@ +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; + align-items: center; + justify-content: center; +} + +.key { + border: .4rem solid black; + border-radius: .5rem; + margin: 1rem; + font-size: 1.5rem; + padding: 1rem .5rem; + transition: all .07s; + width: 10rem; + text-align: center; + 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 1rem #ffc600; +} + +kbd { + display: block; + font-size: 4rem; +} + +.sound { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: .1rem; + color: #ffc600; +} diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.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 -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css deleted file mode 100644 index 3e0a320b37..0000000000 --- a/01 - JavaScript Drum Kit/style.css +++ /dev/null @@ -1,50 +0,0 @@ -html { - font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; - background-size: cover; -} -body,html { - margin: 0; - padding: 0; - font-family: sans-serif; -} - -.keys { - display:flex; - flex:1; - min-height:100vh; - align-items: center; - justify-content: center; -} - -.key { - border:4px solid black; - border-radius:5px; - margin:1rem; - font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; - text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; -} - -.playing { - transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; -} - -kbd { - display: block; - font-size: 40px; -} - -.sound { - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: 1px; - color:#ffc600; -} diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-completed.html similarity index 64% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS + CSS Clock/index-completed.html index d4cb3b56a8..81026aff8a 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-completed.html @@ -18,17 +18,18 @@ - + 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-FINISHED.html b/03 - CSS Variables/index ~ completed.html similarity index 67% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables/index ~ completed.html index c3217fc003..eb47c2df9b 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index ~ completed.html @@ -9,36 +9,42 @@

Update CSS Variables with JS

- + - + - +
+ - 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/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index ~ completed.html similarity index 62% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/index ~ completed.html index 4162bce339..adca0207d9 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index ~ completed.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); + 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/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/ index ~ completed.html similarity index 82% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/ index ~ completed.html index 243f8a221d..7336be4d99 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/ index ~ completed.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'); } 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/06 - Type Ahead ~ Completed/index.html b/06 - Type Ahead ~ Completed/index.html new file mode 100644 index 0000000000..bf0f8bb212 --- /dev/null +++ b/06 - Type Ahead ~ Completed/index.html @@ -0,0 +1,66 @@ + + + + + + Type Ahead 👀 + + + + + +
+ + +
+ + + + 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/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 👀 - - - - -
- - -
- - - 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 👀 - - - - -
- - -
- - - diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html deleted file mode 100644 index 206ec31aa0..0000000000 --- a/07 - Array Cardio Day 2/index-START.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - Array Cardio 💪💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-completed.html similarity index 55% rename from 07 - Array Cardio Day 2/index-FINISHED.html rename to 07 - Array Cardio Day 2/index-completed.html index c8e5b25d3b..4c13c138bb 100644 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-completed.html @@ -13,9 +13,11 @@ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, - { name: 'Lux', year: 2015 }, + { name: 'Lux', year: 2015 } ]; + + const comments = [ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, @@ -25,44 +27,49 @@ ]; // 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(); - // if(currentYear - person.year >= 19) { - // return true; - // } + // 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? + // .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}); - const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); - console.log({allAdults}); - - // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - - - const comment = comments.find(comment => comment.id === 823423); - - console.log(comment); + // 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 - // delete the comment with the ID of 823423 const index = comments.findIndex(comment => comment.id === 823423); - console.log(index); - - // comments.splice(index, 1); + //console.log(index); const newComments = [ - ...comments.slice(0, index), - ...comments.slice(index + 1) + ... comments.slice(0, index), + ... comments.slice(index + 1) ]; + // delete the comment with the ID of 823423 + diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html deleted file mode 100644 index 0791e17d0d..0000000000 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 37c148df07..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index-completed.html b/08 - Fun with HTML5 Canvas/index-completed.html new file mode 100644 index 0000000000..d582d45e58 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-completed.html @@ -0,0 +1,72 @@ + + + + + HTML5 Canvas + + + + + + + + diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html deleted file mode 100644 index 196fffd719..0000000000 --- a/09 - Dev Tools Domination/index-START.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - Console Tricks! - - - -

×BREAK×DOWN×

- - - - diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-completed.html similarity index 74% rename from 09 - Dev Tools Domination/index-FINISHED.html rename to 09 - Dev Tools Domination/index-completed.html index 55cd3a2f42..01d570dd8f 100644 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ b/09 - Dev Tools Domination/index-completed.html @@ -9,7 +9,7 @@

×BREAK×DOWN×

- - diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-completed.html similarity index 76% rename from 10 - Hold Shift and Check Checkboxes/index-START.html rename to 10 - Hold Shift and Check Checkboxes/index-completed.html index eb7ed310bb..b319d8d44e 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-completed.html @@ -104,6 +104,30 @@ 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 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/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

- - - - - 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-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-completed.html b/14 - JavaScript References VS Copying/index-completed.html new file mode 100644 index 0000000000..0c6209382b --- /dev/null +++ b/14 - JavaScript References VS Copying/index-completed.html @@ -0,0 +1,88 @@ + + + + + JS Reference VS Copy + + + + + + + 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-START.html b/15 - LocalStorage/index-START.html deleted file mode 100644 index d444f1d68b..0000000000 --- a/15 - LocalStorage/index-START.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - LocalStorage - - - - - - - -
    -

    LOCAL TAPAS

    -

    - -
    - - -
    -
    - - - - - - - diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index.html similarity index 92% rename from 15 - LocalStorage/index-FINISHED.html rename to 15 - LocalStorage/index.html index 2c492b1088..3afac19c6a 100644 --- a/15 - LocalStorage/index-FINISHED.html +++ b/15 - LocalStorage/index.html @@ -25,8 +25,9 @@

    LOCAL TAPAS

    - - 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; 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-START.html deleted file mode 100644 index cfaf3e0440..0000000000 --- a/17 - Sort Without Articles/index-START.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Sort Without Articles - - - - - - - - - - - diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index.html similarity index 58% rename from 17 - Sort Without Articles/index-FINISHED.html rename to 17 - Sort Without Articles/index.html index 5de851cbbd..ad242107c6 100644 --- a/17 - Sort Without Articles/index-FINISHED.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 deleted file mode 100644 index 3eaee0f3ef..0000000000 --- a/18 - Adding Up Times with Reduce/index-START.html +++ /dev/null @@ -1,187 +0,0 @@ - - - - - Videos - - -