From 0f1b75d18c7bc4ad77fc7f17db428a0a2804acbd Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 9 Dec 2016 11:34:18 -0700 Subject: [PATCH 01/45] Removed old ones --- 01 - JavaScript Drum Kit/index-FINISHED.html | 83 -------------------- 01 - JavaScript Drum Kit/index-START.html | 66 ---------------- 2 files changed, 149 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-FINISHED.html delete mode 100644 01 - JavaScript Drum Kit/index-START.html 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 -
-
- - - - - - - - - - - - - - - - From 6f804d128aa1dd060d9aa0134194cc4520221a69 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 9 Dec 2016 11:34:31 -0700 Subject: [PATCH 02/45] Initial Commit - key codes --- 01 - JavaScript Drum Kit/index.html | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..7f2994d4c1 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,26 +58,11 @@ + From 86401c826fd64a7a6decd4d39d5698e8f7fefdc7 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 9 Dec 2016 12:05:28 -0700 Subject: [PATCH 03/45] Finished day 1 --- 01 - JavaScript Drum Kit/drumBeat.js | 18 ++++++++++++++++++ 01 - JavaScript Drum Kit/index.html | 7 +------ 2 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 01 - JavaScript Drum Kit/drumBeat.js diff --git a/01 - JavaScript Drum Kit/drumBeat.js b/01 - JavaScript Drum Kit/drumBeat.js new file mode 100644 index 0000000000..204a3b99c7 --- /dev/null +++ b/01 - JavaScript Drum Kit/drumBeat.js @@ -0,0 +1,18 @@ +function playSound (e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + if (!audio) return; + audio.currentTime = 0; + audio.play(); + key.classList.add('playing'); +} + +function removeTransition (e) { + if (e.propertyName !== 'transform') return; + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + +window.addEventListener('keydown', playSound); diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 7f2994d4c1..34b387982a 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -57,12 +57,7 @@ - - + From 515b9478d83923366a41b8ee80807cbdf163f6f9 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Sat, 10 Dec 2016 10:30:11 -0700 Subject: [PATCH 04/45] Finished day 2 --- 02 - JS + CSS Clock/clock.js | 21 ++++++ 02 - JS + CSS Clock/index-FINISHED.html | 98 ------------------------- 02 - JS + CSS Clock/index-START.html | 73 ------------------ 02 - JS + CSS Clock/index.html | 38 ++-------- 4 files changed, 29 insertions(+), 201 deletions(-) create mode 100644 02 - JS + CSS Clock/clock.js delete mode 100644 02 - JS + CSS Clock/index-FINISHED.html delete mode 100644 02 - JS + CSS Clock/index-START.html diff --git a/02 - JS + CSS Clock/clock.js b/02 - JS + CSS Clock/clock.js new file mode 100644 index 0000000000..8869324bef --- /dev/null +++ b/02 - JS + CSS Clock/clock.js @@ -0,0 +1,21 @@ +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); +const secondHand = document.querySelector('.second-hand'); + +function setDate () { + const now = new Date(); + const seconds = now.getSeconds(); + const secondsDegrees = (((seconds / 60) * 360) + 90); + + const minutes = now.getMinutes() + seconds / 60; + const minutesDegrees = (((minutes / 60) * 360) + 90); + + const hours = now.getHours() + minutes / 60; + const hoursDegrees = ((hours / 12) * 360 + 90); + + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; +} + +setInterval(setDate, 1000); \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index fb1080dc9c..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - Document - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 240705d8fe..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Document - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index d5c9ec9596..dfc8dc5334 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -2,7 +2,7 @@ - Document + JS + CSS Clock @@ -24,7 +24,6 @@ text-align: center; font-size: 10px; } - body { font-size: 2rem; display:flex; @@ -32,7 +31,6 @@ min-height: 100vh; align-items: center; } - .clock { width: 30rem; height: 30rem; @@ -47,14 +45,12 @@ 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; @@ -64,33 +60,15 @@ transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); - } - - - + From 6e775633ea5feca6bf7e8ea1b736d92ab3d3b09f Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Sat, 10 Dec 2016 10:49:16 -0700 Subject: [PATCH 05/45] Added gulp --- 02 - JS + CSS Clock/gulpfile.js | 16 ++++++++++++++++ 02 - JS + CSS Clock/package.json | 15 +++++++++++++++ 02 - JS + CSS Clock/{ => src}/clock.js | 0 02 - JS + CSS Clock/{ => src}/index.html | 0 4 files changed, 31 insertions(+) create mode 100644 02 - JS + CSS Clock/gulpfile.js create mode 100644 02 - JS + CSS Clock/package.json rename 02 - JS + CSS Clock/{ => src}/clock.js (100%) rename 02 - JS + CSS Clock/{ => src}/index.html (100%) diff --git a/02 - JS + CSS Clock/gulpfile.js b/02 - JS + CSS Clock/gulpfile.js new file mode 100644 index 0000000000..0320a4bbe1 --- /dev/null +++ b/02 - JS + CSS Clock/gulpfile.js @@ -0,0 +1,16 @@ +const gulp = require('gulp'); +const browserSync = require('browser-sync').create(); + +gulp.task('default', ['browser-sync']); + +gulp.task('browser-sync', ['watch'], function() { + return browserSync.init({ server: { baseDir: './src' } }); +}); + +gulp.task('watch', function() { + return gulp.watch('./src/**/*', ['refresh']); +}); + +gulp.task('refresh', function() { + return browserSync.reload(); +}); diff --git a/02 - JS + CSS Clock/package.json b/02 - JS + CSS Clock/package.json new file mode 100644 index 0000000000..71a211ed82 --- /dev/null +++ b/02 - JS + CSS Clock/package.json @@ -0,0 +1,15 @@ +{ + "name": "2", + "version": "1.0.0", + "description": "", + "main": "clock.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "browser-sync": "^2.18.2", + "gulp": "^3.9.1" + } +} diff --git a/02 - JS + CSS Clock/clock.js b/02 - JS + CSS Clock/src/clock.js similarity index 100% rename from 02 - JS + CSS Clock/clock.js rename to 02 - JS + CSS Clock/src/clock.js diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/src/index.html similarity index 100% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS + CSS Clock/src/index.html From c68aaba06deabb43889ae35c8fbeec2f2cf87f7a Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Mon, 12 Dec 2016 08:32:09 -0700 Subject: [PATCH 06/45] Added gulp --- 03 - CSS Variables/.gitignore | 1 + 03 - CSS Variables/gulpfile.js | 16 ++++ 03 - CSS Variables/index-FINISHED.html | 84 ------------------- 03 - CSS Variables/package.json | 15 ++++ .../{index-START.html => src/index.html} | 3 +- 03 - CSS Variables/src/variables.js | 0 6 files changed, 33 insertions(+), 86 deletions(-) create mode 100644 03 - CSS Variables/.gitignore create mode 100644 03 - CSS Variables/gulpfile.js delete mode 100644 03 - CSS Variables/index-FINISHED.html create mode 100644 03 - CSS Variables/package.json rename 03 - CSS Variables/{index-START.html => src/index.html} (96%) create mode 100644 03 - CSS Variables/src/variables.js diff --git a/03 - CSS Variables/.gitignore b/03 - CSS Variables/.gitignore new file mode 100644 index 0000000000..30bc162798 --- /dev/null +++ b/03 - CSS Variables/.gitignore @@ -0,0 +1 @@ +/node_modules \ No newline at end of file diff --git a/03 - CSS Variables/gulpfile.js b/03 - CSS Variables/gulpfile.js new file mode 100644 index 0000000000..0320a4bbe1 --- /dev/null +++ b/03 - CSS Variables/gulpfile.js @@ -0,0 +1,16 @@ +const gulp = require('gulp'); +const browserSync = require('browser-sync').create(); + +gulp.task('default', ['browser-sync']); + +gulp.task('browser-sync', ['watch'], function() { + return browserSync.init({ server: { baseDir: './src' } }); +}); + +gulp.task('watch', function() { + return gulp.watch('./src/**/*', ['refresh']); +}); + +gulp.task('refresh', function() { + return browserSync.reload(); +}); diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html deleted file mode 100644 index 9401d7b339..0000000000 --- a/03 - CSS Variables/index-FINISHED.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - - diff --git a/03 - CSS Variables/package.json b/03 - CSS Variables/package.json new file mode 100644 index 0000000000..9decdd0b29 --- /dev/null +++ b/03 - CSS Variables/package.json @@ -0,0 +1,15 @@ +{ + "name": "2", + "version": "1.0.0", + "description": "", + "main": "variables.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "browser-sync": "^2.18.2", + "gulp": "^3.9.1" + } +} \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/src/index.html similarity index 96% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/src/index.html index bf0f33e3ba..c57b31946a 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/src/index.html @@ -52,8 +52,7 @@

Update CSS Variables with JS

} - + diff --git a/03 - CSS Variables/src/variables.js b/03 - CSS Variables/src/variables.js new file mode 100644 index 0000000000..e69de29bb2 From a05e4368c75eb954798831f87d660cef5c630dc8 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Mon, 12 Dec 2016 08:56:37 -0700 Subject: [PATCH 07/45] finished day 3 --- 03 - CSS Variables/src/index.html | 18 +++++++++++++++--- 03 - CSS Variables/src/variables.js | 11 +++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/03 - CSS Variables/src/index.html b/03 - CSS Variables/src/index.html index c57b31946a..15bed1edbb 100644 --- a/03 - CSS Variables/src/index.html +++ b/03 - CSS Variables/src/index.html @@ -21,10 +21,22 @@

Update CSS Variables with JS

- - -
-
-

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-START.html b/05 - Flex Panel Gallery/index.html similarity index 82% rename from 05 - Flex Panel Gallery/index-START.html rename to 05 - Flex Panel Gallery/index.html index e1d643ad5c..b152af73cb 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,8 +60,18 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: 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; @@ -67,6 +83,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -106,7 +123,7 @@ - From d288fd76fdfac2990fc8a35f83bb48c2a3d85eca Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 16 Dec 2016 14:08:43 -0700 Subject: [PATCH 11/45] Finished day 6 --- 06 - Type Ahead/index-FINISHED.html | 61 ------------------- .../{index-START.html => index.html} | 4 +- 06 - Type Ahead/type.js | 43 +++++++++++++ 3 files changed, 44 insertions(+), 64 deletions(-) delete mode 100644 06 - Type Ahead/index-FINISHED.html rename 06 - Type Ahead/{index-START.html => index.html} (71%) create mode 100644 06 - Type Ahead/type.js 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.html similarity index 71% rename from 06 - Type Ahead/index-START.html rename to 06 - Type Ahead/index.html index 1436886918..2a2a183be9 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index.html @@ -14,9 +14,7 @@
  • or a state
    • - diff --git a/06 - Type Ahead/type.js b/06 - Type Ahead/type.js new file mode 100644 index 0000000000..e9a1b7d459 --- /dev/null +++ b/06 - Type Ahead/type.js @@ -0,0 +1,43 @@ +const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + +const cities = []; + +fetch(endpoint) + .then(blob => blob.json()) + .then(data => cities.push(...data)); + +function findMatches(wordToMatch, cities) { + return cities.filter(place => { + const regex = new RegExp(wordToMatch, 'gi'); + return place.city.match(regex) || place.state.match(RegExp); + }) +} + +function numberWithCommas(number) { + return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); +} + +function displayMatches () { + const matchArray = findMatches(this.value, cities); + const html = matchArray.map(place => { + const regex = new RegExp(this.value, 'gi'); + + const cityName = place.city.replace(regex, `${this.value}`) + const stateName = place.state.replace(regex, `${this.value}`) + const population = numberWithCommas(place.population) + + return ` +
  • + ${cityName}, ${stateName} + ${population} +
    • + `; + }).join(''); + suggestions.innerHTML = html; +} + +const searchInput = document.querySelector('.search'); +const suggestions = document.querySelector('.suggestions'); + +searchInput.addEventListener('change', displayMatches); +searchInput.addEventListener('keyup', displayMatches); From 9a85b974671dafee207501fdd753c0c2a1723e09 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 16 Dec 2016 14:43:10 -0700 Subject: [PATCH 12/45] Finished day 7 --- .../{index-START.html => cardio.js} | 66 +++++++++++------- 07 - Array Cardio Day 2/index-FINISHED.html | 67 ------------------- 07 - Array Cardio Day 2/index.html | 12 ++++ 3 files changed, 53 insertions(+), 92 deletions(-) rename 07 - Array Cardio Day 2/{index-START.html => cardio.js} (57%) delete mode 100644 07 - Array Cardio Day 2/index-FINISHED.html create mode 100644 07 - Array Cardio Day 2/index.html diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/cardio.js similarity index 57% rename from 07 - Array Cardio Day 2/index-START.html rename to 07 - Array Cardio Day 2/cardio.js index bdf6c44415..ea69e79f11 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/cardio.js @@ -1,67 +1,83 @@ - - - - - Document - - - - - + console.table(newComments) + + + + + + + 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 e39d35f79a..0000000000 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - Document - - - - - diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html new file mode 100644 index 0000000000..5b2b107a20 --- /dev/null +++ b/07 - Array Cardio Day 2/index.html @@ -0,0 +1,12 @@ + + + + + Document + + + + + From d67496750ce6121e2fd92c6157d569c1ea6beaad Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Sat, 17 Dec 2016 16:17:01 -0700 Subject: [PATCH 13/45] Finished day 8 --- .../{index-FINISHED.html => canvas.js} | 50 ++++++------------- .../{index-START.html => index.html} | 2 +- 2 files changed, 17 insertions(+), 35 deletions(-) rename 08 - Fun with HTML5 Canvas/{index-FINISHED.html => canvas.js} (57%) rename 08 - Fun with HTML5 Canvas/{index-START.html => index.html} (90%) diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/canvas.js similarity index 57% rename from 08 - Fun with HTML5 Canvas/index-FINISHED.html rename to 08 - Fun with HTML5 Canvas/canvas.js index 0791e17d0d..0f3716be71 100644 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ b/08 - Fun with HTML5 Canvas/canvas.js @@ -1,21 +1,13 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index.html similarity index 90% rename from 08 - Fun with HTML5 Canvas/index-START.html rename to 08 - Fun with HTML5 Canvas/index.html index 37c148df07..372be250cc 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index.html @@ -6,7 +6,7 @@ - - -
    -
    - -

    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.html similarity index 98% rename from 10 - Hold Shift and Check Checkboxes/index-START.html rename to 10 - Hold Shift and Check Checkboxes/index.html index eb7ed310bb..7e2bb2591b 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -103,7 +103,7 @@ - From 9634ce79cce50568cd35fe9bacccc8495e0b346d Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Tue, 20 Dec 2016 09:19:07 -0700 Subject: [PATCH 17/45] Finished day 11 --- 11 - Custom Video Player/scripts.js | 63 +++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..ce5b6bd185 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,63 @@ +//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 our functions +function togglePlay () { + const method = video.paused ? 'play' : 'pause'; + video[method](); +} + +function updateButton () { + 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) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; +} + +//Hook up eventListeners +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); + + +//Next Up - Make the fullscreen button work! From acfcd260bafdde17e21377de05e848dce1f5b0d6 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Tue, 20 Dec 2016 09:53:35 -0700 Subject: [PATCH 18/45] Basic attempt at fullscreen --- 11 - Custom Video Player/index.html | 1 + 11 - Custom Video Player/scripts.js | 13 +++++++++++++ 11 - Custom Video Player/style.css | 2 +- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index fe2b55b394..9c3b8ee1b9 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -19,6 +19,7 @@ + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index ce5b6bd185..f3290eba24 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -6,6 +6,8 @@ const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player.querySelectorAll('[data-skip]'); const ranges = player.querySelectorAll('.player__slider'); +const fullScreenButton = player.querySelector('.fullscreen') +console.log(fullScreenButton) //Build our functions function togglePlay () { @@ -36,6 +38,16 @@ function scrub (e) { video.currentTime = scrubTime; } +function changeScreenSize () { + if (video.requestFullscreen) { + video.requestFullscreen(); + } else if (video.mozRequestFullScreen) { + video.mozRequestFullScreen(); + } else if (video.webkitRequestFullscreen) { + video.webkitRequestFullscreen(); + } +} + //Hook up eventListeners video.addEventListener('click', togglePlay); video.addEventListener('play', updateButton); @@ -45,6 +57,7 @@ video.addEventListener('timeupdate', handleProgress); toggle.addEventListener('click', togglePlay); skipButtons.forEach(button => button.addEventListener('click', skip)); +fullScreenButton.addEventListener('click', changeScreenSize); ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c1c0..b6253af905 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -89,7 +89,7 @@ body { width:50%; background:#ffc600; flex:0; - flex-basis:50%; + flex-basis:0%; } /* unholy css to style input type="range" */ From a47109d44e2494dfead0b7017da513f3f1a9dfd6 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Thu, 22 Dec 2016 10:56:53 -0700 Subject: [PATCH 19/45] Finished day 12 --- .../index-FINISHED.html | 25 ------------------- .../{index-START.html => index.html} | 2 +- 12 - Key Sequence Detection/seq.js | 20 +++++++++++++++ 3 files changed, 21 insertions(+), 26 deletions(-) delete mode 100644 12 - Key Sequence Detection/index-FINISHED.html rename 12 - Key Sequence Detection/{index-START.html => index.html} (91%) create mode 100644 12 - Key Sequence Detection/seq.js 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.html similarity index 91% rename from 12 - Key Sequence Detection/index-START.html rename to 12 - Key Sequence Detection/index.html index 8cab786140..d193e6b825 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index.html @@ -6,7 +6,7 @@ - diff --git a/12 - Key Sequence Detection/seq.js b/12 - Key Sequence Detection/seq.js new file mode 100644 index 0000000000..ae59b7ee9f --- /dev/null +++ b/12 - Key Sequence Detection/seq.js @@ -0,0 +1,20 @@ +const pressed = []; +const secretCode = 'wesbos'; + +window.addEventListener('keyup', (e) => { + pressed.push(e.key); + pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); + + if (pressed.join('').includes(secretCode)) { + console.log('DING DING!') + } +}) + + +//Starts at the end - goes -7 + +//Pressed +//["w", "e", "s", "b", "o", "s", "i"] + +//Spliced Press +//["e", "s", "b", "o", "s", "i"] \ No newline at end of file From d72e824225585a0133d0d0aef58443c8755ede67 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Thu, 22 Dec 2016 10:58:25 -0700 Subject: [PATCH 20/45] updated video player --- 11 - Custom Video Player/index.html | 2 +- 11 - Custom Video Player/scripts.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index 9c3b8ee1b9..48b948c65f 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -19,7 +19,7 @@ - + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index f3290eba24..4827cb310d 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -38,13 +38,13 @@ function scrub (e) { video.currentTime = scrubTime; } -function changeScreenSize () { - if (video.requestFullscreen) { - video.requestFullscreen(); - } else if (video.mozRequestFullScreen) { - video.mozRequestFullScreen(); - } else if (video.webkitRequestFullscreen) { +function changeScreenSize() { + if(document.webkitFullscreenElement) { + document.webkitCancelFullScreen() + } else { video.webkitRequestFullscreen(); + video.style.width = window.screen.width; + video.style.height = window.screen.height; } } From ea4b0d5fa405875dd882255026e208baadc6ad92 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Thu, 22 Dec 2016 11:00:29 -0700 Subject: [PATCH 21/45] Updated file --- 13 - Slide in on Scroll/index-FINISHED.html | 140 ------------------ .../{index-START.html => index.html} | 2 +- 13 - Slide in on Scroll/scroll.js | 0 3 files changed, 1 insertion(+), 141 deletions(-) delete mode 100644 13 - Slide in on Scroll/index-FINISHED.html rename 13 - Slide in on Scroll/{index-START.html => index.html} (99%) create mode 100644 13 - Slide in on Scroll/scroll.js diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13 - Slide in on Scroll/index-FINISHED.html deleted file mode 100644 index bbaf0b6f22..0000000000 --- a/13 - Slide in on Scroll/index-FINISHED.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - Document - - - -
    - -

    Slide in on Scroll

    - -

    Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

    -

    Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    -

    Adipisicing elit. Tempore tempora rerum..

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    - - - -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

    - - - -

    at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

    - - - -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis

    - - -

    laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    - - - -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    - - - - -
    - - - - - - - diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index.html similarity index 99% rename from 13 - Slide in on Scroll/index-START.html rename to 13 - Slide in on Scroll/index.html index 12591bad30..11eeb22f93 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index.html @@ -42,7 +42,7 @@

    Slide in on Scroll

    - - - - 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..5187e1522a --- /dev/null +++ b/14 - JavaScript References VS Copying/index.html @@ -0,0 +1,13 @@ + + + + + JS Reference VS Copy + + + + + + + diff --git a/14 - JavaScript References VS Copying/ref.js b/14 - JavaScript References VS Copying/ref.js new file mode 100644 index 0000000000..ec9705bb58 --- /dev/null +++ b/14 - JavaScript References VS Copying/ref.js @@ -0,0 +1,117 @@ +// start with strings, numbers and booleans +// let age = 100; +// let age2 = age; +// console.log(age, age2); +// age = 200; +// console.log(age, age2); + +// let name = 'Wes'; +// let name2 = name; +// console.log(name, name2); +// name = 'Wesley' +// console.log(name, name2); + +// Let's say we have an array +const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; + +// and we want to make a copy of it. + +// const team = players; +// console.log(players, team); + +// You might think we can just do something like this: + +// team[3] = 'Lux'; + +//IT WILL ALWAYS GO BACK TO THE REFERENCE + +// however what happens when we update that array? + +// now here is the problem! + +// oh no - we have edited the original array too! + +// Why? It's because that is an array reference, not an array copy. They both point to the same array! + +// So, how do we fix this? We take a copy instead! + +const team2 = players.slice(); +const team3 = [].concat(players); +const team4 = [...players]; +const team5 = Array.from(players); + +// one day + +// or create a new array and concat the old one in + +// or use the new ES6 Spread + +// now when we update it, the original one isn't changed + +// The same thing goes for objects, let's say we have a person object + +// with Objects + +const person = { + name: 'Bret', + age: 28 +}; + + + +// and think we make a copy: + +// const captain = person; +// captain.age = 99; + +// how do we take a copy instead? + +const captain = Object.assign({}, person, { age: 99}) + +// We will hopefully soon see the object ...spread + +// 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. + +// const cap3 = {...person}; + +const bret = { + name: 'Bret', + age: 28, + social: { + twitter: 'abc', + facebook: 'cde' + } +} + +console.log(bret); + +const dev = Object.assign({}, bret); + +//poor mans deep clone - can be expensive on the browser +const dev2 = JSON.parse(JSON.stringify(bret)) + + + + + + + + + + + + + + + + + + + + + + + + + + From 0b53fdce64866992251d3f4a624fb102bf3dda14 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Sat, 24 Dec 2016 09:58:34 -0500 Subject: [PATCH 23/45] Finished day 15 --- 15 - LocalStorage/index-FINISHED.html | 77 ------------------- .../{index-START.html => index.html} | 6 +- 15 - LocalStorage/local.js | 44 +++++++++++ 3 files changed, 46 insertions(+), 81 deletions(-) delete mode 100644 15 - LocalStorage/index-FINISHED.html rename 15 - LocalStorage/{index-START.html => index.html} (94%) create mode 100644 15 - LocalStorage/local.js 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-START.html b/15 - LocalStorage/index.html similarity index 94% rename from 15 - LocalStorage/index-START.html rename to 15 - LocalStorage/index.html index d444f1d68b..6026a9bba8 100644 --- a/15 - LocalStorage/index-START.html +++ b/15 - LocalStorage/index.html @@ -25,10 +25,8 @@

    LOCAL TAPAS

    - diff --git a/15 - LocalStorage/local.js b/15 - LocalStorage/local.js new file mode 100644 index 0000000000..8792dba9be --- /dev/null +++ b/15 - LocalStorage/local.js @@ -0,0 +1,44 @@ +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 (items = [], itemsList) { + itemsList.innerHTML = items.map((item, i) => { + return ` +
  • + + +
    • + `; + }).join(''); +} + +//event delegation +function toggleDone (e) { + if (!e.target.matches('input')) return; //skip this unless it's an input + const el = e.target; + const index = el.dataset.index; + items[index].done = !items[index].done; + localStorage.setItem('items', JSON.stringify(items)); + populateList(items, itemsList); +} + +addItems.addEventListener('submit', addItem); +itemsList.addEventListener('click', toggleDone); +populateList(items, itemsList); + + + From 7e764c63d74982c4e295bc2b5f43b96f2c8d6155 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Sat, 24 Dec 2016 10:21:34 -0500 Subject: [PATCH 24/45] Added clear all --- 15 - LocalStorage/index.html | 1 + 15 - LocalStorage/local.js | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.html index 6026a9bba8..fd9c1c1e90 100644 --- a/15 - LocalStorage/index.html +++ b/15 - LocalStorage/index.html @@ -23,6 +23,7 @@

    LOCAL TAPAS

    + - - diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html new file mode 100644 index 0000000000..bc20a47c21 --- /dev/null +++ b/16 - Mouse Move Shadow/index.html @@ -0,0 +1,37 @@ + + + + + Mouse Shadow + + + +
    +

    πŸ”₯WOAH!

    +
    + + + + + + diff --git a/16 - Mouse Move Shadow/mouse.js b/16 - Mouse Move Shadow/mouse.js new file mode 100644 index 0000000000..004c6339e7 --- /dev/null +++ b/16 - Mouse Move Shadow/mouse.js @@ -0,0 +1,69 @@ +const hero = document.querySelector('.hero'); +const text = hero.querySelector('h1'); +const walk = 100; //px + +function shadow (e) { + const { offsetWidth: width, offsetHeight: height } = hero; + let { offsetX: x, offsetY: y } = e; + + if (this !== e.target) { + x = x + e.target.offsetLeft; + y = y + e.target.offsetTop; + } + + const xWalk = Math.round(( x / width * walk ) - ( walk / 2 )); + const yWalk = Math.round(( y / height * walk ) - ( walk / 2 )); + + text.style.textShadow = ` + ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7), + ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7), + ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7), + ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7) + `; + +} + +hero.addEventListener('mousemove', shadow); + + + + + + + + + + + + + + + + + + // const hero = document.querySelector('.hero'); + // const text = hero.querySelector('h1'); + // const walk = 500; // 100px + + // function shadow(e) { + // const { offsetWidth: width, offsetHeight: height } = hero; + // let { offsetX: x, offsetY: y } = e; + + // if (this !== e.target) { + // x = x + e.target.offsetLeft; + // y = y + e.target.offsetTop; + // } + + // const xWalk = Math.round((x / width * walk) - (walk / 2)); + // const yWalk = Math.round((y / height * walk) - (walk / 2)); + + // text.style.textShadow = ` + // ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7), + // ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7), + // ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7), + // ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7) + // `; + + // } + + // hero.addEventListener('mousemove', shadow); \ No newline at end of file From 0824610cf2577175ed90136525ae490b636052e2 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Mon, 26 Dec 2016 10:44:30 -0500 Subject: [PATCH 29/45] Finished day 17 --- .../index-FINISHED.html | 64 ------------------- .../{index-START.html => index.html} | 5 +- 17 - Sort Without Articles/sorting.js | 14 ++++ 3 files changed, 15 insertions(+), 68 deletions(-) delete mode 100644 17 - Sort Without Articles/index-FINISHED.html rename 17 - Sort Without Articles/{index-START.html => index.html} (76%) create mode 100644 17 - Sort Without Articles/sorting.js 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-START.html b/17 - Sort Without Articles/index.html similarity index 76% rename from 17 - Sort Without Articles/index-START.html rename to 17 - Sort Without Articles/index.html index cfaf3e0440..139f973d6a 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index.html @@ -42,10 +42,7 @@
        - diff --git a/17 - Sort Without Articles/sorting.js b/17 - Sort Without Articles/sorting.js new file mode 100644 index 0000000000..ed59e9288b --- /dev/null +++ b/17 - Sort Without Articles/sorting.js @@ -0,0 +1,14 @@ +const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog']; + +function strip(bandName) { + return bandName.replace(/^(a |the |an )/i, '').trim(); +} + +const sortedBands = bands.sort((firstBand, secondBand) => strip(firstBand) > strip(secondBand) ? 1 : -1); + +document.querySelector('#bands').innerHTML = sortedBands +.map(band => `
      • ${band}
        • `) +.join(''); + + +console.log(sortedBands) From b5904eca7fe4e7e6c9a8c1c0756dcf67a342182c Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Wed, 28 Dec 2016 21:03:07 -0500 Subject: [PATCH 30/45] Finished day 18 --- 18 - Adding Up Times with Reduce/adding.js | 22 ++ .../index-FINISHED.html | 207 ------------------ .../{index-START.html => index.html} | 2 +- 3 files changed, 23 insertions(+), 208 deletions(-) create mode 100644 18 - Adding Up Times with Reduce/adding.js delete mode 100644 18 - Adding Up Times with Reduce/index-FINISHED.html rename 18 - Adding Up Times with Reduce/{index-START.html => index.html} (99%) diff --git a/18 - Adding Up Times with Reduce/adding.js b/18 - Adding Up Times with Reduce/adding.js new file mode 100644 index 0000000000..8e85f868cb --- /dev/null +++ b/18 - Adding Up Times with Reduce/adding.js @@ -0,0 +1,22 @@ +const timeNodes = Array.from(document.querySelectorAll('[data-time]')); + + +//try putting this all in one reduce; + + +const seconds = timeNodes + .map(node => node.dataset.time) + .map(timeCode => { + const [mins, secs] = timeCode.split(':').map(parseFloat); + return (mins * 60) + secs; + }) + .reduce((total, vidSeconds) => total + vidSeconds) + +let secondsLeft = seconds; +const hours = Math.floor(secondsLeft / 3600); +secondsLeft = secondsLeft % 3600; + +const mins = Math.floor(secondsLeft/ 60); +secondsLeft = secondsLeft % 60; + +console.log(hours, mins, secondsLeft); 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 - - -
          -
        • - Video 1 -
          • -
        • - Video 2 -
          • -
        • - Video 3 -
          • -
        • - Video 4 -
          • -
        • - Video 5 -
          • -
        • - Video 6 -
          • -
        • - Video 7 -
          • -
        • - Video 8 -
          • -
        • - Video 9 -
          • -
        • - Video 10 -
          • -
        • - Video 11 -
          • -
        • - Video 12 -
          • -
        • - Video 13 -
          • -
        • - Video 14 -
          • -
        • - Video 15 -
          • -
        • - Video 16 -
          • -
        • - Video 17 -
          • -
        • - Video 18 -
          • -
        • - Video 19 -
          • -
        • - Video 20 -
          • -
        • - Video 21 -
          • -
        • - Video 22 -
          • -
        • - Video 23 -
          • -
        • - Video 24 -
          • -
        • - Video 25 -
          • -
        • - Video 26 -
          • -
        • - Video 27 -
          • -
        • - Video 28 -
          • -
        • - Video 29 -
          • -
        • - Video 30 -
          • -
        • - Video 31 -
          • -
        • - Video 32 -
          • -
        • - Video 33 -
          • -
        • - Video 34 -
          • -
        • - Video 35 -
          • -
        • - Video 36 -
          • -
        • - Video 37 -
          • -
        • - Video 38 -
          • -
        • - Video 39 -
          • -
        • - Video 40 -
          • -
        • - Video 41 -
          • -
        • - Video 42 -
          • -
        • - Video 43 -
          • -
        • - Video 44 -
          • -
        • - Video 45 -
          • -
        • - Video 46 -
          • -
        • - Video 47 -
          • -
        • - Video 48 -
          • -
        • - Video 49 -
          • -
        • - Video 50 -
          • -
        • - Video 51 -
          • -
        • - Video 52 -
          • -
        • - Video 53 -
          • -
        • - Video 54 -
          • -
        • - Video 55 -
          • -
        • - Video 56 -
          • -
        • - Video 57 -
          • -
        • - Video 58 -
          • - - - - diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index.html similarity index 99% rename from 18 - Adding Up Times with Reduce/index-START.html rename to 18 - Adding Up Times with Reduce/index.html index 3eaee0f3ef..c4567bd002 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index.html @@ -181,7 +181,7 @@ Video 58 - From 08dac3fe44fcb46ec310d609d31fd2e31c204922 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Thu, 29 Dec 2016 12:02:02 -0700 Subject: [PATCH 31/45] Finished day 19 --- 19 - Webcam Fun/scripts-FINISHED.js | 102 ---------------------------- 19 - Webcam Fun/scripts.js | 95 ++++++++++++++++++++++++++ 2 files changed, 95 insertions(+), 102 deletions(-) delete mode 100755 19 - Webcam Fun/scripts-FINISHED.js diff --git a/19 - Webcam Fun/scripts-FINISHED.js b/19 - Webcam Fun/scripts-FINISHED.js deleted file mode 100755 index 0d62c8dc23..0000000000 --- a/19 - Webcam Fun/scripts-FINISHED.js +++ /dev/null @@ -1,102 +0,0 @@ -const video = document.querySelector('.player'); -const canvas = document.querySelector('.photo'); -const ctx = canvas.getContext('2d'); -const strip = document.querySelector('.strip'); -const snap = document.querySelector('.snap'); - -function getVideo() { - navigator.mediaDevices.getUserMedia({ video: true, audio: false }) - .then(localMediaStream => { - console.log(localMediaStream); - video.src = window.URL.createObjectURL(localMediaStream); - video.play(); - }) - .catch(err => { - console.error(`OH NO!!!`, err); - }); -} - -function paintToCanavas() { - const width = video.videoWidth; - const height = video.videoHeight; - canvas.width = width; - canvas.height = height; - - return setInterval(() => { - ctx.drawImage(video, 0, 0, width, height); - // take the pixels out - let pixels = ctx.getImageData(0, 0, width, height); - // mess with them - // pixels = redEffect(pixels); - - pixels = rgbSplit(pixels); - // ctx.globalAlpha = 0.8; - - // pixels = greenScreen(pixels); - // put them back - ctx.putImageData(pixels, 0, 0); - }, 16); -} - -function takePhoto() { - // played the sound - snap.currentTime = 0; - snap.play(); - - // take the data out of the canvas - const data = canvas.toDataURL('image/jpeg'); - const link = document.createElement('a'); - link.href = data; - link.setAttribute('download', 'handsome'); - link.innerHTML = `Handsome Man`; - strip.insertBefore(link, strip.firsChild); -} - -function redEffect(pixels) { - for(let i = 0; i < pixels.data.length; i+=4) { - pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED - pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN - pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue - } - return pixels; -} - -function rgbSplit(pixels) { - for(let i = 0; i < pixels.data.length; i+=4) { - pixels.data[i - 150] = pixels.data[i + 0]; // RED - pixels.data[i + 500] = pixels.data[i + 1]; // GREEN - pixels.data[i - 550] = pixels.data[i + 2]; // Blue - } - return pixels; -} - -function greenScreen(pixels) { - const levels = {}; - - document.querySelectorAll('.rgb input').forEach((input) => { - levels[input.name] = input.value; - }); - - for (i = 0; i < pixels.data.length; i = i + 4) { - red = pixels.data[i + 0]; - green = pixels.data[i + 1]; - blue = pixels.data[i + 2]; - alpha = pixels.data[i + 3]; - - if (red >= levels.rmin - && green >= levels.gmin - && blue >= levels.bmin - && red <= levels.rmax - && green <= levels.gmax - && blue <= levels.bmax) { - // take it out! - pixels.data[i + 3] = 0; - } - } - - return pixels; -} - -getVideo(); - -video.addEventListener('canplay', paintToCanavas); diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..08521c2aec 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,98 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + +function getVideo () { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(localMediaStream => { + video.src = window.URL.createObjectURL(localMediaStream); + video.play(); + }) + .catch(err => { + console.error(`Please allow your webcam!`, err); + }); +} + +function paintToCanvas () { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + //take pixels out + let pixels = ctx.getImageData(0, 0, width, height); + + //mess with them + //pixels = redEffect(pixels); + // pixels = rgbSplit(pixels); + pixels = greenScreen(pixels); + + // ctx.globalAlpha = 0.1; + //put them out + ctx.putImageData(pixels, 0, 0); + }, 16); +} + +function takePhoto () { + snap.currentTime = 0; + snap.play(); + + //take the data out of the canvas + const data = canvas.toDataURL('image/jpeg'); + //this is base64 - text based representation of the photo + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.innerHTML =`Hansome man` + strip.insertBefore(link, strip.firstChild) +} + +function redEffect(pixels) { + for(let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i + 0] = pixels.data[i + 0] * 100; //r + pixels.data[i + 1] = pixels.data[i + 1] - 50; //g + pixels.data[i + 2] = pixels.data[i + 2] * 0.5; //b + } + return pixels; +} + +function rgbSplit(pixels) { + for(let i = 0; i < pixels.data.length; i+=4) { + pixels.data[i - 150] = pixels.data[i + 0]; //r + pixels.data[i + 100] = pixels.data[i + 1]; //g + pixels.data[i - 150] = pixels.data[i + 2]; //b + } + return pixels; +} + +function greenScreen(pixels) { + const levels = {}; + + document.querySelectorAll('.rgb input').forEach((input) => { + levels[input.name] = input.value; + }); + + for (i = 0; i < pixels.data.length; i = i + 4) { + red = pixels.data[i + 0]; + green = pixels.data[i + 1]; + blue = pixels.data[i + 2]; + alpha = pixels.data[i + 3]; + + if (red >= levels.rmin + && green >= levels.gmin + && blue >= levels.bmin + && red <= levels.rmax + && green <= levels.gmax + && blue <= levels.bmax) { + // take it out! + pixels.data[i + 3] = 0; + } + } + + return pixels; +} +getVideo(); + +video.addEventListener('canplay', paintToCanvas); \ No newline at end of file From 7cf291d330b6e11b471d9387fa46babd85a14c72 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 30 Dec 2016 10:54:38 -0700 Subject: [PATCH 32/45] Finished day 20 --- 20 - Speech Detection/index-FINISHED.html | 85 ------------------- .../{index-START.html => index.html} | 4 +- 20 - Speech Detection/speech.js | 33 +++++++ 3 files changed, 35 insertions(+), 87 deletions(-) delete mode 100644 20 - Speech Detection/index-FINISHED.html rename 20 - Speech Detection/{index-START.html => index.html} (91%) create mode 100644 20 - Speech Detection/speech.js diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html deleted file mode 100644 index 413c3eeaaf..0000000000 --- a/20 - Speech Detection/index-FINISHED.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - Speech Detection - - - -
          -
          - - - - - - - - diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index.html similarity index 91% rename from 20 - Speech Detection/index-START.html rename to 20 - Speech Detection/index.html index d3395cca35..505faccf0b 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index.html @@ -9,8 +9,8 @@
          - diff --git a/20 - Speech Detection/speech.js b/20 - Speech Detection/speech.js new file mode 100644 index 0000000000..1e825c996c --- /dev/null +++ b/20 - Speech Detection/speech.js @@ -0,0 +1,33 @@ +window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; + +const recognition = new SpeechRecognition(); +recognition.interimResults = true; + +let p = document.createElement('p'); +const words = document.querySelector('.words'); +words.appendChild(p); + +recognition.addEventListener('result', e => { + + const transcript = Array.from(e.results) + .map(result => result[0]) + .map(result => result.transcript) + .join('') + + p.textContent = transcript; + if (e.results[0].isFinal) { + p = document.createElement('p'); + words.appendChild(p); + } + + console.log(transcript); + + if(transcript.includes('get the weather')) { + console.log("Yes Bret getting the weather"); + //hook to external weather apis! + } +}); + +recognition.addEventListener('end', recognition.start); + +recognition.start(); From bb0445ab11a5043d54cb58b3b40abefebbd9030f Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 30 Dec 2016 11:22:31 -0700 Subject: [PATCH 33/45] finsihed day 21 --- 21 - Geolocation/.gitignore | 1 + 21 - Geolocation/index-START.html | 74 ------------------- .../{index-FINISHED.html => index.html} | 11 +-- 21 - Geolocation/speed.js | 11 +++ 4 files changed, 13 insertions(+), 84 deletions(-) create mode 100644 21 - Geolocation/.gitignore delete mode 100644 21 - Geolocation/index-START.html rename 21 - Geolocation/{index-FINISHED.html => index.html} (94%) create mode 100644 21 - Geolocation/speed.js diff --git a/21 - Geolocation/.gitignore b/21 - Geolocation/.gitignore new file mode 100644 index 0000000000..07e6e472cc --- /dev/null +++ b/21 - Geolocation/.gitignore @@ -0,0 +1 @@ +/node_modules diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html deleted file mode 100644 index d794c144ba..0000000000 --- a/21 - Geolocation/index-START.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - Document - - - - - - -

          - 0 - KM/H -

          - - - - - diff --git a/21 - Geolocation/index-FINISHED.html b/21 - Geolocation/index.html similarity index 94% rename from 21 - Geolocation/index-FINISHED.html rename to 21 - Geolocation/index.html index 0f2ddecf2a..ab2677fddf 100644 --- a/21 - Geolocation/index-FINISHED.html +++ b/21 - Geolocation/index.html @@ -56,17 +56,8 @@

          } /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/ - diff --git a/21 - Geolocation/speed.js b/21 - Geolocation/speed.js new file mode 100644 index 0000000000..7e73e6b0c2 --- /dev/null +++ b/21 - Geolocation/speed.js @@ -0,0 +1,11 @@ +const arrow = document.querySelector('.arrow'); +const speed = document.querySelector('.speed-value'); + +navigator.geolocation.watchPosition((data) => { + console.log(data); + speed.textContent = data.coords.speed; + arrow.style.transform = `rotate(${data.coords.heading}deg)`; +}, (err) => { + console.err(err); + alert('HEY! YOU GOTTA ALLOW THAT TO HAPPEN!!!'); +}); From 01f8100e3c464227ae52dde747d2f9e38d25bbd3 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Sat, 31 Dec 2016 14:43:52 -0700 Subject: [PATCH 34/45] Finished day 22 --- .../index-FINISHED.html | 55 ------------------- .../{index-START.html => index.html} | 2 +- 22 - Follow Along Link Highlighter/link.js | 22 ++++++++ 3 files changed, 23 insertions(+), 56 deletions(-) delete mode 100644 22 - Follow Along Link Highlighter/index-FINISHED.html rename 22 - Follow Along Link Highlighter/{index-START.html => index.html} (98%) create mode 100644 22 - Follow Along Link Highlighter/link.js diff --git a/22 - Follow Along Link Highlighter/index-FINISHED.html b/22 - Follow Along Link Highlighter/index-FINISHED.html deleted file mode 100644 index 74bd06e321..0000000000 --- a/22 - Follow Along Link Highlighter/index-FINISHED.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - πŸ‘€πŸ‘€πŸ‘€Follow Along Nav - - - - - - -
          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

          -

          Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

          -

          Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

          -

          Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

          -

          Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

          -
          - - - - - diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index.html similarity index 98% rename from 22 - Follow Along Link Highlighter/index-START.html rename to 22 - Follow Along Link Highlighter/index.html index 8476112b5e..84dc665838 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index.html @@ -25,7 +25,7 @@

          Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

          - diff --git a/22 - Follow Along Link Highlighter/link.js b/22 - Follow Along Link Highlighter/link.js new file mode 100644 index 0000000000..cf85c4fea2 --- /dev/null +++ b/22 - Follow Along Link Highlighter/link.js @@ -0,0 +1,22 @@ +const triggers = document.querySelectorAll('a'); +const highlight = document.createElement('span'); +highlight.classList.add('highlight'); +document.body.append(highlight); + +function highlightLink () { + const linkCoords = this.getBoundingClientRect(); + + const coords = { + width: linkCoords.width, + height: linkCoords.height, + top: linkCoords.top + window.scrollY, + left: linkCoords.left + window.scrollX + }; + + console.log(linkCoords); + highlight.style.width = `${coords.width}px`; + highlight.style.height = `${coords.height}px`; + highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)` +} + +triggers.forEach(a => a.addEventListener('mouseenter', highlightLink)); From 48f607cd64bb9e0e313cfa152626f73ba26ae6a7 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Tue, 3 Jan 2017 19:47:41 -0700 Subject: [PATCH 35/45] Finished 24 and 25 --- .../capture.js | 18 ++++++ .../index-FINISHED.html | 64 ------------------- .../{index-START.html => index.html} | 2 +- 3 files changed, 19 insertions(+), 65 deletions(-) create mode 100644 25 - Event Capture, Propagation, Bubbling and Once/capture.js delete mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html rename 25 - Event Capture, Propagation, Bubbling and Once/{index-START.html => index.html} (95%) diff --git a/25 - Event Capture, Propagation, Bubbling and Once/capture.js b/25 - Event Capture, Propagation, Bubbling and Once/capture.js new file mode 100644 index 0000000000..9b54016b2a --- /dev/null +++ b/25 - Event Capture, Propagation, Bubbling and Once/capture.js @@ -0,0 +1,18 @@ +const divs = document.querySelectorAll('div'); + +function logText (e) { + + // e.stopPropagation(); + console.log(this.classList.value); +} + +divs.forEach(div => div.addEventListener('click', logText, { + capture: false, + once: true +})); + +// button.addEventListener('click', () => { +// console.log('Click'); +// }, { +// once: true +// }) \ No newline at end of file diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html b/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html deleted file mode 100644 index 8856df9d89..0000000000 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - Understanding JavaScript's Capture - - - -
          -
          -
          -
          -
          -
          - - - - - - - diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index.html similarity index 95% rename from 25 - Event Capture, Propagation, Bubbling and Once/index-START.html rename to 25 - Event Capture, Propagation, Bubbling and Once/index.html index 98f5e070c4..424828d2c3 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index.html @@ -38,7 +38,7 @@ - From fea4f3b260ddc11442134d4352307b1fa65383dc Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Tue, 3 Jan 2017 19:49:58 -0700 Subject: [PATCH 36/45] Updated files --- 23 - Speech Synthesis/index-FINISHED.html | 75 ------------------- .../{index-START.html => index.html} | 8 +- 23 - Speech Synthesis/speech.js | 6 ++ 3 files changed, 7 insertions(+), 82 deletions(-) delete mode 100644 23 - Speech Synthesis/index-FINISHED.html rename 23 - Speech Synthesis/{index-START.html => index.html} (71%) create mode 100644 23 - Speech Synthesis/speech.js diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23 - Speech Synthesis/index-FINISHED.html deleted file mode 100644 index 5ea9a4a8e7..0000000000 --- a/23 - Speech Synthesis/index-FINISHED.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - Speech Synthesis - - - - - -
          - -

          The Voiceinator 5000

          - - - - - - - - - - - - - -
          - - - - - diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index.html similarity index 71% rename from 23 - Speech Synthesis/index-START.html rename to 23 - Speech Synthesis/index.html index e890008d36..83f0251839 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index.html @@ -28,13 +28,7 @@

          The Voiceinator 5000

          - diff --git a/23 - Speech Synthesis/speech.js b/23 - Speech Synthesis/speech.js new file mode 100644 index 0000000000..56b32e4db1 --- /dev/null +++ b/23 - Speech Synthesis/speech.js @@ -0,0 +1,6 @@ + const msg = new SpeechSynthesisUtterance(); + let voices = []; + const voicesDropdown = document.querySelector('[name="voice"]'); + const options = document.querySelectorAll('[type="range"], [name="text"]'); + const speakButton = document.querySelector('#speak'); + const stopButton = document.querySelector('#stop'); \ No newline at end of file From 85ffb3c90e8ac6b0e58980d9aa633ce0d74a9f7c Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Tue, 3 Jan 2017 19:50:22 -0700 Subject: [PATCH 37/45] Finished day 24 --- 24 - Sticky Nav/index-FINISHED.html | 67 ------------ .../{index-START.html => index.html} | 30 +++--- 24 - Sticky Nav/nav.js | 15 +++ 24 - Sticky Nav/style-FINISHED.css | 100 ------------------ 24 - Sticky Nav/style-START.css | 2 +- 5 files changed, 31 insertions(+), 183 deletions(-) delete mode 100644 24 - Sticky Nav/index-FINISHED.html rename 24 - Sticky Nav/{index-START.html => index.html} (96%) create mode 100644 24 - Sticky Nav/nav.js delete mode 100644 24 - Sticky Nav/style-FINISHED.css diff --git a/24 - Sticky Nav/index-FINISHED.html b/24 - Sticky Nav/index-FINISHED.html deleted file mode 100644 index 2e5961192c..0000000000 --- a/24 - Sticky Nav/index-FINISHED.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - - Document - - - - -
          -

          A story about getting lost.

          -
          - - - -
          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

          - -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

          - -

          at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

          - -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

          -

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

          -
          - - - - - - diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index.html similarity index 96% rename from 24 - Sticky Nav/index-START.html rename to 24 - Sticky Nav/index.html index 4982537eea..93606c59eb 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index.html @@ -53,21 +53,21 @@

          A story about getting lost.

          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

          - diff --git a/24 - Sticky Nav/nav.js b/24 - Sticky Nav/nav.js new file mode 100644 index 0000000000..4f86450ac5 --- /dev/null +++ b/24 - Sticky Nav/nav.js @@ -0,0 +1,15 @@ +const nav = document.querySelector('#main'); +const topOfNav = nav.offsetTop; + +function fixNav() { + console.log(topOfNav); + if(window.scrollY > topOfNav) { + document.body.style.paddingTop = nav.offsetHeight + 'px'; + document.body.classList.add('fixed-nav'); + } else { + document.body.style.paddingTop = 0; + document.body.classList.remove('fixed-nav'); + } +} + +window.addEventListener('scroll', fixNav); diff --git a/24 - Sticky Nav/style-FINISHED.css b/24 - Sticky Nav/style-FINISHED.css deleted file mode 100644 index b551473357..0000000000 --- a/24 - Sticky Nav/style-FINISHED.css +++ /dev/null @@ -1,100 +0,0 @@ -html { - box-sizing: border-box; - background:#eeeeee; - font-family:'helvetica neue'; - font-size: 20px; - font-weight: 200; -} -body { - margin: 0; -} -*, *:before, *:after { - box-sizing: inherit; -} - -.site-wrap { - max-width: 700px; - margin: 70px auto; - background:white; - padding:40px; - text-align: justify; - box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); - transform: scale(0.98); - transition: transform 0.5s; -} - -body.fixed-nav .site-wrap { - transform: scale(1); -} - - -header { - text-align: center; - height:50vh; - background:url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat; - background-size:cover; - display:flex; - align-items:center; - justify-content: center; -} - -h1 { - color:white; - font-size: 7vw; - text-shadow: 3px 4px 0 rgba(0,0,0,0.2) -} - -nav { - background:black; - top:0; - width: 100%; - transition:all 0.5s; - position: relative; - z-index: 1; -} - -body.fixed-nav nav { - position: fixed; - box-shadow:0 5px 0 rgba(0,0,0,0.1); -} - -nav ul { - margin: 0; - padding:0; - list-style: none; - display:flex; -} - -nav li { - flex:1; - text-align: center; - display: flex; - justify-content: center; - align-items: center; -} - -li.logo { - max-width:0; - overflow: hidden; - background: white; - transition: all 0.5s; - font-weight: 600; - font-size: 30px; -} - -li.logo a { - color:black; -} - -.fixed-nav li.logo { - max-width:500px; -} - -nav a { - text-decoration: none; - padding:20px; - display: inline-block; - color:white; - transition:all 0.2s; - text-transform: uppercase; -} diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index 19961112b4..866a4e1bda 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -76,7 +76,7 @@ li.logo { max-width:0; overflow: hidden; background: white; - transition: all .5s; + transition: all 2s; font-weight: 600; font-size: 30px; } From 5a114db8fafc5daff8dd3f79ae3799c9bf0c4f78 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Wed, 4 Jan 2017 08:50:49 -0700 Subject: [PATCH 38/45] Finished day 23 --- 23 - Speech Synthesis/index.html | 4 +-- 23 - Speech Synthesis/speech.js | 48 ++++++++++++++++++++++++++++---- 2 files changed, 44 insertions(+), 8 deletions(-) diff --git a/23 - Speech Synthesis/index.html b/23 - Speech Synthesis/index.html index 83f0251839..735cda9ce4 100644 --- a/23 - Speech Synthesis/index.html +++ b/23 - Speech Synthesis/index.html @@ -10,7 +10,7 @@
          -

          The Voiceinator 5000

          +

          The Bricelynator 5000

          - + diff --git a/23 - Speech Synthesis/speech.js b/23 - Speech Synthesis/speech.js index 56b32e4db1..10fe918296 100644 --- a/23 - Speech Synthesis/speech.js +++ b/23 - Speech Synthesis/speech.js @@ -1,6 +1,42 @@ - const msg = new SpeechSynthesisUtterance(); - let voices = []; - const voicesDropdown = document.querySelector('[name="voice"]'); - const options = document.querySelectorAll('[type="range"], [name="text"]'); - const speakButton = document.querySelector('#speak'); - const stopButton = document.querySelector('#stop'); \ No newline at end of file +const msg = new SpeechSynthesisUtterance(); +let voices = []; +const voicesDropdown = document.querySelector('[name="voice"]'); +const options = document.querySelectorAll('[type="range"], [name="text"]'); +const speakButton = document.querySelector('#speak'); +const stopButton = document.querySelector('#stop'); + +msg.text = document.querySelector('[name="text"]').value; + + +function populateVoices() { + voices = this.getVoices(); + voicesDropdown.innerHTML = voices + .filter(voice => voice.lang.includes('en')) + .map(voice => ``) + .join('') +} + +function setVoice () { + msg.voice = voices.find(voice => voice.name === this.value); + toggle(); +} + +function toggle (startOver = true) { + speechSynthesis.cancel(); + if(startOver) { + speechSynthesis.speak(msg); + } +} + +function setOption () { + console.log(this.name, this.value); + msg[this.name] = this.value; + toggle(); +} + +speechSynthesis.addEventListener('voiceschanged', populateVoices); +voicesDropdown.addEventListener('change', setVoice); +options.forEach(option => option.addEventListener('change', setOption)); +speakButton.addEventListener('click', toggle); +// stopButton.addEventListener('click', toggle.bind(null, false)); +stopButton.addEventListener('click', () => toggle(false)); From b65ea0593ca7d37d51f0ad77397a412a3408d274 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Wed, 4 Jan 2017 09:14:45 -0700 Subject: [PATCH 39/45] cleaned up code --- 23 - Speech Synthesis/speech.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/23 - Speech Synthesis/speech.js b/23 - Speech Synthesis/speech.js index 10fe918296..a0a6fa79fc 100644 --- a/23 - Speech Synthesis/speech.js +++ b/23 - Speech Synthesis/speech.js @@ -7,7 +7,6 @@ const stopButton = document.querySelector('#stop'); msg.text = document.querySelector('[name="text"]').value; - function populateVoices() { voices = this.getVoices(); voicesDropdown.innerHTML = voices @@ -38,5 +37,4 @@ speechSynthesis.addEventListener('voiceschanged', populateVoices); voicesDropdown.addEventListener('change', setVoice); options.forEach(option => option.addEventListener('change', setOption)); speakButton.addEventListener('click', toggle); -// stopButton.addEventListener('click', toggle.bind(null, false)); stopButton.addEventListener('click', () => toggle(false)); From 0ca261988ba5a01a91c299544b0b2f2aaea24b06 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Wed, 4 Jan 2017 09:59:54 -0700 Subject: [PATCH 40/45] Finished day 26 --- .../index-FINISHED.html | 246 ------------------ .../{index-START.html => index.html} | 4 +- 26 - Stripe Follow Along Nav/nav.js | 33 +++ 3 files changed, 34 insertions(+), 249 deletions(-) delete mode 100644 26 - Stripe Follow Along Nav/index-FINISHED.html rename 26 - Stripe Follow Along Nav/{index-START.html => index.html} (99%) create mode 100644 26 - Stripe Follow Along Nav/nav.js diff --git a/26 - Stripe Follow Along Nav/index-FINISHED.html b/26 - Stripe Follow Along Nav/index-FINISHED.html deleted file mode 100644 index 9cf05f388d..0000000000 --- a/26 - Stripe Follow Along Nav/index-FINISHED.html +++ /dev/null @@ -1,246 +0,0 @@ - - - - - Follow Along Nav - - -

          Cool

          - - - - - - - - diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index.html similarity index 99% rename from 26 - Stripe Follow Along Nav/index-START.html rename to 26 - Stripe Follow Along Nav/index.html index 9780d0d1ac..a93c4aa339 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index.html @@ -134,8 +134,6 @@

          Cool

          opacity: 1; } - - .dropdownBackground { width:100px; height:100px; @@ -207,7 +205,7 @@

          Cool

          - diff --git a/26 - Stripe Follow Along Nav/nav.js b/26 - Stripe Follow Along Nav/nav.js new file mode 100644 index 0000000000..03fb02ac86 --- /dev/null +++ b/26 - Stripe Follow Along Nav/nav.js @@ -0,0 +1,33 @@ +const triggers = document.querySelectorAll('.cool > li'); +const background = document.querySelector('.dropdownBackground'); +const nav = document.querySelector('.top'); + +function handleEnter () { + this.classList.add('trigger-enter'); + setTimeout(() => this.classList.contains('trigger-enter') + && this.classList.add('trigger-enter-active'), 150); + background.classList.add('open'); + + const dropdown = this.querySelector('.dropdown'); + const dropwdownCoords = dropdown.getBoundingClientRect(); + const navCoords = nav.getBoundingClientRect(); + + const coords = { + height: dropwdownCoords.height, + width: dropwdownCoords.width, + top: dropwdownCoords.top - navCoords.top, + left: dropwdownCoords.left - navCoords.left + }; + + background.style.setProperty('width', `${coords.width}px`); + background.style.setProperty('height', `${coords.height}px`); + background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px) `); +} + +function handleLeave () { + this.classList.remove('trigger-enter', 'trigger-enter-active'); + background.classList.remove('open'); +} + +triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter)); +triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave)); From f7e468cbda88cd49cea8f2f6829804da4e4969de Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Thu, 5 Jan 2017 14:14:38 -0700 Subject: [PATCH 41/45] Finished day 27 --- 27 - Click and Drag/click.js | 30 ++++++++ 27 - Click and Drag/index-FINISHED.html | 71 ------------------- .../{index-START.html => index.html} | 2 +- 3 files changed, 31 insertions(+), 72 deletions(-) create mode 100644 27 - Click and Drag/click.js delete mode 100644 27 - Click and Drag/index-FINISHED.html rename 27 - Click and Drag/{index-START.html => index.html} (97%) diff --git a/27 - Click and Drag/click.js b/27 - Click and Drag/click.js new file mode 100644 index 0000000000..92f2031105 --- /dev/null +++ b/27 - Click and Drag/click.js @@ -0,0 +1,30 @@ +const slider = document.querySelector('.items'); +let isDown = false; +let startX; +let scrollLeft; + +slider.addEventListener('mousedown', (e) => { + isDown = true; + slider.classList.add('active'); + startX = e.pageX - slider.offsetLeft; + scrollLeft = slider.scrollLeft; +}); + +slider.addEventListener('mouseleave', () => { + isDown = false; + slider.classList.remove('active'); +}); + +slider.addEventListener('mouseup', () => { + isDown = false; + slider.classList.remove('active'); +}); + +slider.addEventListener('mousemove', (e) => { + if(!isDown) return; //stop the function from running + e.preventDefault(); + const x = e.pageX - slider.offsetLeft; + const walk = (x - startX) * 3; + slider.scrollLeft = scrollLeft - walk; + console.log(walk); +}); \ No newline at end of file diff --git a/27 - Click and Drag/index-FINISHED.html b/27 - Click and Drag/index-FINISHED.html deleted file mode 100644 index 52eb86628c..0000000000 --- a/27 - Click and Drag/index-FINISHED.html +++ /dev/null @@ -1,71 +0,0 @@ - - - - - Click and Drag - - - -
          -
          01
          -
          02
          -
          03
          -
          04
          -
          05
          -
          06
          -
          07
          -
          08
          -
          09
          -
          10
          -
          11
          -
          12
          -
          13
          -
          14
          -
          15
          -
          16
          -
          17
          -
          18
          -
          19
          -
          20
          -
          21
          -
          22
          -
          23
          -
          24
          -
          25
          -
          - - - - - diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index.html similarity index 97% rename from 27 - Click and Drag/index-START.html rename to 27 - Click and Drag/index.html index b8609315f7..885945c443 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index.html @@ -34,7 +34,7 @@
          25
          - From 535a21105c54cc3926d289bfe91fd0c566e77237 Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Fri, 6 Jan 2017 19:29:30 -0700 Subject: [PATCH 42/45] finished day 28 --- .../index-FINISHED.html | 38 ------------------- .../{index-START.html => index.html} | 2 +- 28 - Video Speed Controller/speed.js | 16 ++++++++ 3 files changed, 17 insertions(+), 39 deletions(-) delete mode 100644 28 - Video Speed Controller/index-FINISHED.html rename 28 - Video Speed Controller/{index-START.html => index.html} (95%) create mode 100644 28 - Video Speed Controller/speed.js diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28 - Video Speed Controller/index-FINISHED.html deleted file mode 100644 index a7d2f3e38c..0000000000 --- a/28 - Video Speed Controller/index-FINISHED.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - Video Speed Scrubber - - - - -
          - -
          -
          1Γ—
          -
          -
          - - - - diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index.html similarity index 95% rename from 28 - Video Speed Controller/index-START.html rename to 28 - Video Speed Controller/index.html index c4cbd4259a..5ae0263e09 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index.html @@ -14,7 +14,7 @@ - diff --git a/28 - Video Speed Controller/speed.js b/28 - Video Speed Controller/speed.js new file mode 100644 index 0000000000..f7d2a8af7e --- /dev/null +++ b/28 - Video Speed Controller/speed.js @@ -0,0 +1,16 @@ +const speed = document.querySelector('.speed'); +const bar = speed.querySelector('.speed-bar'); +const video = document.querySelector('.flex'); + +speed.addEventListener('mousemove', function(e) { + const y = e.pageY - this.offsetTop; + const percent = y / this.offsetHeight; + const min = 0.4; + const max = 4; + const height = Math.round(percent * 100) + '%'; + const playbackRate = percent * (max - min) + min; + bar.style.height = height; + bar.textContent = playbackRate.toFixed(2) + 'x'; + video.playbackRate = playbackRate; + +}); \ No newline at end of file From 27038c74b88c404221be3f062d0062918b553eed Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Mon, 9 Jan 2017 17:51:28 -0700 Subject: [PATCH 43/45] Finished day 29 --- 29 - Countown Timer/scripts-START.js | 53 ++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/29 - Countown Timer/scripts-START.js b/29 - Countown Timer/scripts-START.js index e69de29bb2..5c257931e4 100644 --- a/29 - Countown Timer/scripts-START.js +++ b/29 - Countown Timer/scripts-START.js @@ -0,0 +1,53 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + + +function timer(seconds) { + clearInterval(countdown); + const now = Date.now(); + const then = now + seconds * 1000; + displayTimeLeft(seconds); + displayEndTime(then); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + + if(secondsLeft < 0) { + clearInterval(countdown); + return; + } + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; + document.title = display; + timerDisplay.textContent = display; +} + +function displayEndTime (timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + const minutes = end.getMinutes(); + const adjustedHour = hour - 12 + endTime.textContent = `Be Back at ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`; +} + +buttons.forEach(button => button.addEventListener('click', startTimer )); + +function startTimer () { + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +document.customForm.addEventListener('submit', function (e) { + e.preventDefault(); + const mins = this.minutes.value; + timer(mins * 60); + this.reset(); +}) \ No newline at end of file From 159b4f2b373b25645c9f50efa3f14c50b54bdadc Mon Sep 17 00:00:00 2001 From: Bret Doucette Date: Mon, 9 Jan 2017 18:12:18 -0700 Subject: [PATCH 44/45] Finished day 13 --- 13 - Slide in on Scroll/index.html | 35 ---------------------------- 13 - Slide in on Scroll/scroll.js | 37 ++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 35 deletions(-) diff --git a/13 - Slide in on Scroll/index.html b/13 - Slide in on Scroll/index.html index 11eeb22f93..8bbcdb0778 100644 --- a/13 - Slide in on Scroll/index.html +++ b/13 - Slide in on Scroll/index.html @@ -43,41 +43,6 @@

          Slide in on Scroll