From 3478813654a56b641f6d54045f165e8e31c9a16d Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Fri, 30 Dec 2016 16:12:53 -0800 Subject: [PATCH 01/18] challenge 19 complete --- exercises/19 - Webcam Fun/README.md | 237 ++++++++++++++++++ exercises/19 - Webcam Fun/index.html | 6 +- exercises/19 - Webcam Fun/package.json | 14 -- exercises/19 - Webcam Fun/scripts-FINISHED.js | 102 -------- exercises/19 - Webcam Fun/scripts.js | 85 ++++++- 5 files changed, 320 insertions(+), 124 deletions(-) create mode 100644 exercises/19 - Webcam Fun/README.md delete mode 100755 exercises/19 - Webcam Fun/package.json delete mode 100755 exercises/19 - Webcam Fun/scripts-FINISHED.js diff --git a/exercises/19 - Webcam Fun/README.md b/exercises/19 - Webcam Fun/README.md new file mode 100644 index 0000000..6b26191 --- /dev/null +++ b/exercises/19 - Webcam Fun/README.md @@ -0,0 +1,237 @@ +# Exercise 18: Adding Up Times With Reduce +Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) +Last Commit Date: Dec 30, 2016 + +We're given an HTML page with a button labeled 'Take Photo' which calls upon a `takePhoto()` + function on a `click` event, a collection of `input` elements of type `range` with RGB min/max + labels, a `canvas` element, a `video` element, and an empty div with the class `strip`. Our goal + is to write the necessary JavaScript code to ask permission for the user's webcam, display the + feed from that webcam on the page, allow the user to save pictures that are displayed, + and allow the user to alter the image using the RGB sliders. + +## Guide + +This challenge will require use of the `Navigator` _Web API_ ([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)), + the `CanvasRenderingContext2D` _Web API_ ([MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), + and the `MediaDevices` _Web API_ ([MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices)). + If you're not a fan of reading documentation, here's a simple overview: + + - The `Navigator` interface is a representation of the application in which the JavaScript + code is running (in most cases, the browser) + - The `MediaDevices` interface provides a way to access the user's connected media hardware, + such as a webcam or microphone by using the `getUserMedia` method. The method takes + an object as an argument which specifies the media items the program needs access to; + in our case, the webcam. + +The `scripts.js` file already has some `constants` defined as references: a reference to + the `video` element, the `canvas` element, the `canvas` context, to the `div` element + where we'll display any photos the user has taken, and a reference to the `audio` element + which uses [this](http://wesbos.com/demos/photobooth/snap.mp3) file as it's source. + +We begin by using the navigator web API in combination with the mediaDevices web API to + request permission from the user to access their webcam; this request returns a _promise_ + with the resulting `MediaStream` object or the rejected promise with an error message. **Note: + This promise is only resolved *IF* the user selects an option when prompted for request + to the webcam**; if the user doesn't select anything, the promise won't resolve but our program + won't break. This is the beauty of promises; they allow us to ask for something and will + allow the rest of the program to run the promise waits for a response. Promises represent + _a value which may be available now, in the future, or never_ ([as defined by MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)). If + we receive a `localMediaStream` object as a promise, we'll set the source object of the `video` + element to the _`localMediaStream` object_, and call upon the `play()` method of the `video` element. + If the promise resolves to an error, we'll log out that error message. + +Then, we need to _define a function_ that will be used as the _event handler_ for when the + 'canplay' event of the `video` element is triggered (whenever the user either approves or + denies access to their webcam). The function will adjust the `canvas` element's + `width` and `height` properties to be equivalent to the `video` element's `width` and `height`, + and will return the _interval ID_ of a `setInterval()` method. Within the body of the + `setInterval()` method, we will draw onto the canvas by providing a valid canvas image + source such as an `image` element, a `video` element, another `canvas` element, or an + _image bitmap_. In our case, we want to display the user's webcam feed in the canvas, + so we'll provide the `video` element as as argument to the canvas' draw method. + To manipulate the image using the `input` HTML elements, we'll need to get access + to the _underlying pixel data_ of the image being displayed on the canvas. + We'll declare a `let` variable and define it as the `ImageData` object returned + from calling the `getImageData()` method of the canvas context. The `ImageData` object + returned from this method is exactly what we were looking for: the _underlying pixel data_ + for the current canvas image. We will eventually pass this variable into a function + that will change the values of the pixels depending on the `input` values. + +The `takePhoto()` function that the `button` HTML element is calling on 'click' events + isn't defined; we'll do that next. The `takePhoto()` function should play the audio file + that we referenced earlier with a `const` variable, convert the current canvas image + to a _data URI_, create an `anchor` HTML element (a link) with a _hyperlink reference_ + pointing to the _data URI_ which will download the image to the user's local storage + when clicked, set the inner HTML of that link to be an `image` HTML element referencing + the _data URI_ as the source, and insert this link inside the empty `div` element + with the class `.strip`. + +The last function we'll want to create is one that will bring functionality to the `input` + elements; as the user moves the sliders around, we want to adjust the RGB values of the + canvas image to reflect the values of the sliders to present a sort of 'green screen' + effect. The function should have one declarared parameter, `pixels`. We'll begin by declaring + a `const` as an empty object. We'll create a _NodeList_ of all the HTML `input` elements contained + within the `div` with class `.rgb`, iterate through this _NodeList_, and create a key within + the previously defined object corresponding with the given `input` element's `name` property, + and set it's value as the given `input` element's value. The `pixels` argument we're expecting + will be the _underlying pixel data_ of the current canvas image. This data contains an _array + of unsigned 8bit integer values between 0-255_, corresponding with the RGB attributes of the image. + We'll iterate through these arrays and set the values to 0 where the RGB attribute is within + the range of the input slider values. This one is tricky, so let's get to the steps. + +**Steps:** + +1. Declare a `const` variable `getVideo` and define it as an _arrow function_. This function + will use the `Navigator` and `mediaDevices` web APIs to ask permission to access the user's + webcam and, upon success, will set the source object of the `video` element as the + `localMediaStream`. + + ```JavaScript + const getVideo = () => { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(localMediaStream => { + video.srcObject = localMediaStream; + video.play(); + }) + .catch(err => { + console.error(`OH NO!!!`, err); + }); + } + ``` + +2. Declare a `const` variable `paintToCanvas` and define it as an arrow function. + + ```JavaScript + const paintToCanvas = () => { /* ... */} + ``` + + - In the body of this function, declare two `const` variables and define them + as the `video` element's width and height, and update the `canvas` width and height + to reflect those values. + + ```JavaScript + const paintToCanavas = () => { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + /* More to do... */ + } + ``` + + - Still in the body of the function, return the _interval ID_ of a `setInterval()` + function call, and within the body of that function call, draw the current `video` + element on to the `canvas. + + ```JavaScript + let paintToCanavas = () => { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + }, 16); + } + ``` + +3. Declare a `const` variable `takePhoto` and define it as an arrow function that will + play the `audio` element on the HTML page, create a link which targets a _data URI_ + representation of a still image taken from the canvas, and places that link into the front + of the empty `div` element. + + ```JavaScript + const takePhoto = () => { + // Play the audio element on the HTML page + snap.currentTime = 0; + snap.play(); + + 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); + } + ``` + +4. Declare a `const` variable `greenScreen` and define it as an _arrow function_ that will + accept an argument `pixels`. + + ```JavaScript + const greenScreen = (pixels) => { /*...*/ } + ``` + + - In the function body, declare a `const` variables `levels` and define it as an empty + object. Iterate through a _NodeList_ of all `input` elements within the div with class + `rgb` and set a key in the `levels` object as a given input's `name` property, and + set the value to be the given input's `value`. + + ```JavaScript + /* In function body */ + + const levels = {}; + + document.querySelectorAll('.rgb input').forEach((input) => { + levels[input.name] = input.value; + }); + ``` + + - Update the values of the pixels in the image so that we remove all RGB + values that are within the range defined by the user, and return the given + argument. + + ```JavaScript + /* In function body */ + for (i = 0; i < pixels.data.length; 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) + { + pixels.data[i + 3] = 0; + } + } + return pixels + ``` + +5. Update the `getVideo` function so that the setInterval method within the function body + creates a variable defined as the _underlying pixel data_, passes that variable into the + `greenScreen` function, and places the returned pixel data into the canvas context. + + ```JavaScript + /* In paintToCanvas function body */ + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + + let pixels = ctx.getImageData(0, 0, width, height); + + pixels = greenScreen(pixels); + + ctx.putImageData(pixels, 0, 0); + }, 16); + ``` + +6. Call upon the `getVideo` function we previously defined. + +7. Attach an _event listener_ to the `video` HTML element that will call the `paintToCanvas` + function on the 'canplay' event, and attach an _event listener_ to the `button` HTML element + that will call the `takePhoto` function on a 'click' event. + + ```JavaScript + video.addEventListener('canplay', paintToCanavas); + document.querySelector('.takePhoto').addEventListener('click', takePhoto); + ``` + +Wrap it all up in an IIFE, take a step back, and enjoy your glorious new photo-and-greenscreen + application! diff --git a/exercises/19 - Webcam Fun/index.html b/exercises/19 - Webcam Fun/index.html index d4ffc4d..21fed87 100755 --- a/exercises/19 - Webcam Fun/index.html +++ b/exercises/19 - Webcam Fun/index.html @@ -9,8 +9,8 @@
- - +
diff --git a/exercises/19 - Webcam Fun/package.json b/exercises/19 - Webcam Fun/package.json deleted file mode 100755 index 616baf5..0000000 --- a/exercises/19 - Webcam Fun/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "gum", - "version": "1.0.0", - "description": "", - "main": "scripts.js", - "scripts": { - "start" : "browser-sync start --server --files '*.css, *.html, *.js'" - }, - "author": "", - "license": "ISC", - "devDependencies": { - "browser-sync": "^2.12.5" - } -} diff --git a/exercises/19 - Webcam Fun/scripts-FINISHED.js b/exercises/19 - Webcam Fun/scripts-FINISHED.js deleted file mode 100755 index 0d62c8d..0000000 --- a/exercises/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/exercises/19 - Webcam Fun/scripts.js b/exercises/19 - Webcam Fun/scripts.js index 00355f5..ee288c7 100644 --- a/exercises/19 - Webcam Fun/scripts.js +++ b/exercises/19 - Webcam Fun/scripts.js @@ -1,5 +1,80 @@ -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'); +(() => { + const video = document.querySelector('.player'), + canvas = document.querySelector('.photo'), + ctx = canvas.getContext('2d'), + strip = document.querySelector('.strip'), + snap = document.querySelector('.snap'); + + const getVideo = () => { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(localMediaStream => { + video.srcObject = localMediaStream; + video.play(); + }) + .catch(err => { + console.error(`OH NO!!!`, err); + }); + } + + const paintToCanavas = () => { + const width = video.videoWidth, + height = video.videoHeight; + + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + + let pixels = ctx.getImageData(0, 0, width, height); + + pixels = greenScreen(pixels); + + ctx.putImageData(pixels, 0, 0); + }, 16); + } + + const takePhoto = () => { + snap.currentTime = 0; + snap.play(); + + 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); + } + + const greenScreen = (pixels) => { + const levels = {}; + + document.querySelectorAll('.rgb input').forEach((input) => { + levels[input.name] = input.value; + }); + + for (i = 0; i < pixels.data.length; 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) + { + pixels.data[i + 3] = 0; + } + } + return pixels; + } + + getVideo(); + + video.addEventListener('canplay', paintToCanavas); + document.querySelector('.takePhoto').addEventListener('click', takePhoto); +})(); \ No newline at end of file From d2fe3315a4039a89cb10cf8e52e95abf8b46be09 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Fri, 30 Dec 2016 16:13:39 -0800 Subject: [PATCH 02/18] update root readme --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 2f500c4..8de5e31 100644 --- a/readme.md +++ b/readme.md @@ -46,7 +46,7 @@ Completed written guides can be found in the corresponding challenge directory ( 16. [x] ~~[Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/)~~ 17. [x] ~~[Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/)~~ 18. [x] ~~[Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/)~~ -19. [ ] Webcam Fun +19. [x] ~~[Webcam Fun](./exercises/19\ -\ Webcam\ Fun/)~~ 20. [ ] Speech Detection 21. [ ] Geolocation 22. [ ] Follow Along Link Highlighter From 2d5852d9d0f344850d80f0cb4b6dcebfbb4ca586 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Fri, 30 Dec 2016 16:14:26 -0800 Subject: [PATCH 03/18] right title would help... --- exercises/19 - Webcam Fun/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/19 - Webcam Fun/README.md b/exercises/19 - Webcam Fun/README.md index 6b26191..6afa456 100644 --- a/exercises/19 - Webcam Fun/README.md +++ b/exercises/19 - Webcam Fun/README.md @@ -1,4 +1,4 @@ -# Exercise 18: Adding Up Times With Reduce +# Exercise 19: Webcam Fun Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) Last Commit Date: Dec 30, 2016 From dbd1504ad3da8ba8fd0e025a88259a1188f7dafb Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Mon, 2 Jan 2017 20:38:18 -0800 Subject: [PATCH 04/18] Formatting code snippets and bullet lists Another readme formatted, another collection of errors slain. \m/ --- exercises/19 - Webcam Fun/README.md | 82 ++++++++++++++--------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/exercises/19 - Webcam Fun/README.md b/exercises/19 - Webcam Fun/README.md index 6afa456..c429f56 100644 --- a/exercises/19 - Webcam Fun/README.md +++ b/exercises/19 - Webcam Fun/README.md @@ -95,47 +95,47 @@ The last function we'll want to create is one that will bring functionality to t }) .catch(err => { console.error(`OH NO!!!`, err); - }); - } + }) + }; ``` 2. Declare a `const` variable `paintToCanvas` and define it as an arrow function. ```JavaScript - const paintToCanvas = () => { /* ... */} + const paintToCanvas = () => { /* ... */}; ``` - - In the body of this function, declare two `const` variables and define them - as the `video` element's width and height, and update the `canvas` width and height - to reflect those values. + - In the body of this function, declare two `const` variables and define them + as the `video` element's width and height, and update the `canvas` width and height + to reflect those values. - ```JavaScript + ```JavaScript const paintToCanavas = () => { const width = video.videoWidth; const height = video.videoHeight; canvas.width = width; canvas.height = height; - /* More to do... */ - } - ``` - - - Still in the body of the function, return the _interval ID_ of a `setInterval()` - function call, and within the body of that function call, draw the current `video` - element on to the `canvas. - - ```JavaScript - let paintToCanavas = () => { - const width = video.videoWidth; - const height = video.videoHeight; - canvas.width = width; - canvas.height = height; - - return setInterval(() => { - ctx.drawImage(video, 0, 0, width, height); - }, 16); - } - ``` + /* More to do... */ + }; + ``` + + - Still in the body of the function, return the _interval ID_ of a `setInterval()` + function call, and within the body of that function call, draw the current `video` + element on to the `canvas.` + + ```JavaScript + let paintToCanavas = () => { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + }, 16); + }; + ``` 3. Declare a `const` variable `takePhoto` and define it as an arrow function that will play the `audio` element on the HTML page, create a link which targets a _data URI_ @@ -154,22 +154,22 @@ The last function we'll want to create is one that will bring functionality to t link.setAttribute('download', 'handsome'); link.innerHTML = `Handsome Man`; strip.insertBefore(link, strip.firsChild); - } + }; ``` 4. Declare a `const` variable `greenScreen` and define it as an _arrow function_ that will accept an argument `pixels`. ```JavaScript - const greenScreen = (pixels) => { /*...*/ } + const greenScreen = (pixels) => { /*...*/ }; ``` - - In the function body, declare a `const` variables `levels` and define it as an empty - object. Iterate through a _NodeList_ of all `input` elements within the div with class - `rgb` and set a key in the `levels` object as a given input's `name` property, and - set the value to be the given input's `value`. + - In the function body, declare a `const` variables `levels` and define it as an empty + object. Iterate through a _NodeList_ of all `input` elements within the div with class + `rgb` and set a key in the `levels` object as a given input's `name` property, and + set the value to be the given input's `value`. - ```JavaScript + ```JavaScript /* In function body */ const levels = {}; @@ -177,13 +177,13 @@ The last function we'll want to create is one that will bring functionality to t document.querySelectorAll('.rgb input').forEach((input) => { levels[input.name] = input.value; }); - ``` + ``` - - Update the values of the pixels in the image so that we remove all RGB - values that are within the range defined by the user, and return the given - argument. + - Update the values of the pixels in the image so that we remove all RGB + values that are within the range defined by the user, and return the given + argument. - ```JavaScript + ```JavaScript /* In function body */ for (i = 0; i < pixels.data.length; i += 4) { red = pixels.data[i + 0]; @@ -201,8 +201,8 @@ The last function we'll want to create is one that will bring functionality to t pixels.data[i + 3] = 0; } } - return pixels - ``` + return pixels; + ``` 5. Update the `getVideo` function so that the setInterval method within the function body creates a variable defined as the _underlying pixel data_, passes that variable into the From 95bceed89a9dfbdf26e32df6a31b1b068ec0900c Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 02:08:57 -0700 Subject: [PATCH 05/18] I have no idea. It's just been WAY too long. --- exercises/19 - Webcam Fun/scripts.js | 2 +- exercises/20 - Speech Detection/README.md | 0 .../20 - Speech Detection/index-START.html | 60 ------------ .../{index-FINISHED.html => index.html} | 41 ++++---- exercises/21 - Geolocation/README.md | 0 .../21 - Geolocation/index-FINISHED.html | 72 -------------- exercises/21 - Geolocation/index-START.html | 2 +- readme.md | 94 +++++++++++-------- 8 files changed, 76 insertions(+), 195 deletions(-) create mode 100644 exercises/20 - Speech Detection/README.md delete mode 100644 exercises/20 - Speech Detection/index-START.html rename exercises/20 - Speech Detection/{index-FINISHED.html => index.html} (57%) create mode 100644 exercises/21 - Geolocation/README.md delete mode 100644 exercises/21 - Geolocation/index-FINISHED.html diff --git a/exercises/19 - Webcam Fun/scripts.js b/exercises/19 - Webcam Fun/scripts.js index ee288c7..af9b1a9 100644 --- a/exercises/19 - Webcam Fun/scripts.js +++ b/exercises/19 - Webcam Fun/scripts.js @@ -12,7 +12,7 @@ video.play(); }) .catch(err => { - console.error(`OH NO!!!`, err); + console.error(`OH NO!!! ${err}`); }); } diff --git a/exercises/20 - Speech Detection/README.md b/exercises/20 - Speech Detection/README.md new file mode 100644 index 0000000..e69de29 diff --git a/exercises/20 - Speech Detection/index-START.html b/exercises/20 - Speech Detection/index-START.html deleted file mode 100644 index d3395cc..0000000 --- a/exercises/20 - Speech Detection/index-START.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - Speech Detection - - - -
-
- - - - - - - - diff --git a/exercises/20 - Speech Detection/index-FINISHED.html b/exercises/20 - Speech Detection/index.html similarity index 57% rename from exercises/20 - Speech Detection/index-FINISHED.html rename to exercises/20 - Speech Detection/index.html index e1932f4..86b329b 100644 --- a/exercises/20 - Speech Detection/index-FINISHED.html +++ b/exercises/20 - Speech Detection/index.html @@ -10,34 +10,33 @@ diff --git a/exercises/21 - Geolocation/README.md b/exercises/21 - Geolocation/README.md new file mode 100644 index 0000000..e69de29 diff --git a/exercises/21 - Geolocation/index-FINISHED.html b/exercises/21 - Geolocation/index-FINISHED.html deleted file mode 100644 index 0f2ddec..0000000 --- a/exercises/21 - Geolocation/index-FINISHED.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - Document - - - - - - -

- 0 - KM/H -

- - - - - diff --git a/exercises/21 - Geolocation/index-START.html b/exercises/21 - Geolocation/index-START.html index d794c14..e3c4677 100644 --- a/exercises/21 - Geolocation/index-START.html +++ b/exercises/21 - Geolocation/index-START.html @@ -61,7 +61,7 @@

const speed = document.querySelector('.speed-value'); navigator.geolocation.watchPosition((data) => { - console.log(data); + console.info(data); speed.textContent = data.coords.speed; arrow.style.transform = `rotate(${data.coords.heading}deg)`; }, (err) => { diff --git a/readme.md b/readme.md index 8de5e31..15e04c9 100644 --- a/readme.md +++ b/readme.md @@ -5,6 +5,20 @@ Last Commit Date: Dec 24, 2016 > Course created by [Wes Bos](https://github.com/wesbos) > Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account) +This repository contains my written guides for the JavaScript30 course by + [Wes Bos](//github.com/wesbos). I wrote these in the hopes of expanding the ways + in which people can access this course; not everyone has the data allotments + or internet speeds or...whatever the case may be to load multiple high definition + videos. Or, maybe, you prefer to have a text-based guide to follow along with/ + refer back to. Orrr you're in a library and don't have headphones. Who knows! If + you want some documentation to go along with those sweet Wes Bos vids, here you go. + +**DISCLAIMER:** My approach to some of the challenges vary from the provided answers (found in + the files that end with `-FINISHED` on the main repo). Some of the tweaks are just to + include various 'best practices' and some have huge chunks of differences. I try to provide + thorough explanations when I do sway from the path and explain why I chose to do so, but + I want to make it clear that some of these guides don't go hand-in-hand with the videos. + ## About Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, etc. @@ -12,50 +26,50 @@ Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, et in 30 minutes, hey, more power to you, but that would miss the point of this course (IMO). The idea behind these exercises is to utilize small amounts of what would regularly be 'downtime' as moments in which we can build on our knowledge through some simple - exercises. My goal is to _participate_ in 3 challenges per day (watch the videos, take - some notes, etc.) and to _complete_ one challenge per day. + exercises. + +I think it's fair to say that, coming into this course, you should have a decent grasp + of JavaScript fundamentals. Comfort when working with functions, callbacks, arrays, + and objects will help a great deal in working through the challenges. If you don't, + **don't worry and do it anyways** <3. It might take you more than downtime to complete + a challenge, but given that these exercises require you to work with those very topics + time and time again, JavaScript30 is still an excellent learning resource. The starter files (available [here](https://github.com/wesbos/JavaScript30)) include solutions to - most challenges, so this isn't really meant to be taken as some kind of competition or something. - JavaScript30 appears to be focused more on helping developers enhance their current skillset and + most challenges, so this isn't really meant to be taken as some kind of competition. + JavaScript30 is focused more on helping developers enhance their current skillset and reducing developer reliance on external JS libraries; **if it can be done with a JS library, it can (probably) be done with vanilla JS.** -**UPDATE:** If you're here for written guides, please be patient with me! I've made it a priority -to get as many of these done as possible, as quickly as possible. Thank youuu. ❤️ - -Completed written guides can be found in the corresponding challenge directory (click the links below, folks). - ## Table Of Contents -1. [x] ~~[JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/)~~ -2. [x] ~~[JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/)~~ -3. [x] ~~[CSS Variables](./exercises/03\ -\ CSS\ Variables/)~~ -4. [x] ~~[Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/)~~ -5. [x] ~~[Flex Panel Gallery](./exercises/05\ -\ Flex\ Panel\ Gallery/)~~ -6. [x] ~~[Type Ahead](./exercises/06\ -\ Type\ Ahead/)~~ -7. [x] ~~[Array Cardio, Day 2](./exercises/07\ -\ Array\ Cardio\ Day\ 2/)~~ -8. [x] ~~[Fun with HTML5 Canvas](./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/)~~ -9. [x] ~~[Dev Tools Domination](./exercises/09\ -\ Dev\ Tools\ Domination/)~~ -10. [x] ~~[Hold Shift and Check Checkboxes](./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/)~~ -11. [x] ~~[Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/)~~ -12. [x] ~~[Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Detection/)~~ -13. [x] ~~[Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/)~~ -14. [x] ~~[JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying)~~ -15. [x] ~~[LocalStorage](./exercises/15\ -\ LocalStorage/)~~ -16. [x] ~~[Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/)~~ -17. [x] ~~[Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/)~~ -18. [x] ~~[Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/)~~ -19. [x] ~~[Webcam Fun](./exercises/19\ -\ Webcam\ Fun/)~~ -20. [ ] Speech Detection -21. [ ] Geolocation -22. [ ] Follow Along Link Highlighter -23. [ ] Speech Synthesis -24. [ ] Sticky Nav -25. [ ] Event Capture, Propagation, Bubbling, and Once -26. [ ] Stripe Follow Along Nav -27. [ ] Click and Drag -28. [ ] Video Speed Controller -29. [ ] Countdown Timer -30. [ ] Whack A Mole - +1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/) +2. [JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/) +3. [CSS Variables](./exercises/03\ -\ CSS\ Variables/) +4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Caro\ Day\ 1/) +5. [Flex Panel Gallery](./exercises/05\ -\ Flex\ PanelGallery/) +6. [Type Ahead](./exercises/06\ -\ Type\ Ahead/) +7. [Array Cardio, Day 2](./exercises/07\ -\ Arra Cardio\ Day\ 2/) +8. [Fun with HTML5 Canvas](./exercises/08\ -\ Fu with\ HTML5\ Cans/) +9. [Dev Tools Domination](./exercises/09\ -\ DevTools\ Domination/) +10. [Hold Shift and Check Checkboxes](./exercis/10\ -\ Hold\ Sh and\ Check\ Checkboxes/) +11. [Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/) +12. [Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Deon/) +13. [Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/) +14. [JavaScript References vs. Copying](./exercises/14\ -\ JavaScri\ References\ VS\ Copying) +15. [LocalStorage](./exercises/15\ -\ LocalStorage/) +16. [Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/) +17. [Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/) +18. [Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/) +19. [Webcam Fun](./exercises/19\ -\ Webcam\ Fun/) +20. [Speech Detection](./exercises/20\ -\ Speech\ Detection/) +21. [Geolocation](./exercises/21\ -\ Geolocation/) +22. [Follow Along Link Highlighter](./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/) +23. [Speech Synthesis](./exercises/23\ -\ Speech\ Synthesis/) +24. [Sticky Nav](./exercises/24\ -\ Sticky\ Nav/) +25. [Event Capture, Propagation, Bubbling, and Once](./exercises/25\ -\ Event Capture,\ Propagation,\ Bubbling\ and\ Once/) +26. [Stripe Follow Along Nav](./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/) +27. [Click and Drag](./exercises/27\ -\ Click\ and\ Drag/) +28. [Video Speed Controller](./exercises/28\ -\ Video\ Speed\ Controller/) +29. [Countdown Timer](./exercises/29\ -\ Countdown\ Timer/) +30. [Whack A Mole](./exercises/30\ -\ Whack\ A\ Mole/) From f43588b480754d815ffc1c7e5d01804a92464bc8 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 02:14:02 -0700 Subject: [PATCH 06/18] Today is the day I'm fixing this whole repo. It's time. --- readme.md | 63 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/readme.md b/readme.md index 15e04c9..c500d5a 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,5 @@ # JavaScript30 - 30 Day JavaScript Challenge + Nitish Dayal, Software & Applications Developer Last Commit Date: Dec 24, 2016 @@ -31,7 +32,7 @@ Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, et I think it's fair to say that, coming into this course, you should have a decent grasp of JavaScript fundamentals. Comfort when working with functions, callbacks, arrays, and objects will help a great deal in working through the challenges. If you don't, - **don't worry and do it anyways** <3. It might take you more than downtime to complete + **don't worry and do it anyways** <3. It might take you more than downtime to complete a challenge, but given that these exercises require you to work with those very topics time and time again, JavaScript30 is still an excellent learning resource. @@ -43,33 +44,33 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents -1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/) -2. [JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/) -3. [CSS Variables](./exercises/03\ -\ CSS\ Variables/) -4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Caro\ Day\ 1/) -5. [Flex Panel Gallery](./exercises/05\ -\ Flex\ PanelGallery/) -6. [Type Ahead](./exercises/06\ -\ Type\ Ahead/) -7. [Array Cardio, Day 2](./exercises/07\ -\ Arra Cardio\ Day\ 2/) -8. [Fun with HTML5 Canvas](./exercises/08\ -\ Fu with\ HTML5\ Cans/) -9. [Dev Tools Domination](./exercises/09\ -\ DevTools\ Domination/) -10. [Hold Shift and Check Checkboxes](./exercis/10\ -\ Hold\ Sh and\ Check\ Checkboxes/) -11. [Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/) -12. [Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Deon/) -13. [Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/) -14. [JavaScript References vs. Copying](./exercises/14\ -\ JavaScri\ References\ VS\ Copying) -15. [LocalStorage](./exercises/15\ -\ LocalStorage/) -16. [Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/) -17. [Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/) -18. [Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/) -19. [Webcam Fun](./exercises/19\ -\ Webcam\ Fun/) -20. [Speech Detection](./exercises/20\ -\ Speech\ Detection/) -21. [Geolocation](./exercises/21\ -\ Geolocation/) -22. [Follow Along Link Highlighter](./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/) -23. [Speech Synthesis](./exercises/23\ -\ Speech\ Synthesis/) -24. [Sticky Nav](./exercises/24\ -\ Sticky\ Nav/) -25. [Event Capture, Propagation, Bubbling, and Once](./exercises/25\ -\ Event Capture,\ Propagation,\ Bubbling\ and\ Once/) -26. [Stripe Follow Along Nav](./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/) -27. [Click and Drag](./exercises/27\ -\ Click\ and\ Drag/) -28. [Video Speed Controller](./exercises/28\ -\ Video\ Speed\ Controller/) -29. [Countdown Timer](./exercises/29\ -\ Countdown\ Timer/) -30. [Whack A Mole](./exercises/30\ -\ Whack\ A\ Mole/) +1. [JavaScript Drum Kit](<./exercises/01\ -\ JavaScript\ Drum\ Kit/>) +2. [JS + CSS Clock](<./exercises/02\ -\ JS\ +\ CSS\ Clock/>) +3. [CSS Variables](<./exercises/03\ -\ CSS\ Variables/>) +4. [Array Cardio, Day 1](<./exercises/04\ -\ Array\ Cardio\ Day\ 1/>) +5. [Flex Panel Gallery](<./exercises/05\ -\ Flex\ Panel\ Gallery/>) +6. [Type Ahead](<./exercises/06\ -\ Type\ Ahead/>) +7. [Array Cardio, Day 2](<./exercises/07\ -\ Array\ Cardio\ Day\ 2/>) +8. [Fun with HTML5 Canvas](<./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/>) +9. [Dev Tools Domination](<./exercises/09\ -\ DevTools\ Domination/>) +10. [Hold Shift and Check Checkboxes](<./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/>) +11. [Custom Video Player](<./exercises/11\ -\ Custom\ Video\ Player/>) +12. [Key Sequence Detection](<./exercises/12\ -\ Key\ Sequence\ Detection/>) +13. [Slide in on Scroll](<./exercises/13\ -\ Slide\ in\ on\ Scroll/>) +14. [JavaScript References vs. Copying](<./exercises/14\ -\ JavaScript\ References\ VS\ Copying>) +15. [LocalStorage](<./exercises/15\ -\ LocalStorage/>) +16. [Mouse Move Shadow](<./exercises/16\ -\ Mouse\ Move\ Shadow/>) +17. [Sort Without Articles](<./exercises/17\ -\ Sort\ Without\ Articles/>) +18. [Adding Up Times with Reduce](<./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/>) +19. [Webcam Fun](<./exercises/19\ -\ Webcam\ Fun/>) +20. [Speech Detection](<./exercises/20\ -\ Speech\ Detection/>) +21. [Geolocation](<./exercises/21\ -\ Geolocation/>) +22. [Follow Along Link Highlighter](<./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/>) +23. [Speech Synthesis](<./exercises/23\ -\ Speech\ Synthesis/>) +24. [Sticky Nav](<./exercises/24\ -\ Sticky\ Nav/>) +25. [Event Capture, Propagation, Bubbling, and Once](<./exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/>) +26. [Stripe Follow Along Nav](<./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/>) +27. [Click and Drag](<./exercises/27\ -\ Click\ and\ Drag/>) +28. [Video Speed Controller](<./exercises/28\ -\ Video\ Speed\ Controller/>) +29. [Countdown Timer](<./exercises/29\ -\ Countdown\ Timer/>) +30. [Whack A Mole](<./exercises/30\ -\ Whack\ A\ Mole/>) From 22552bc22ca1d3b8fd5b5e3660995146089ec9c4 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:03:48 -0700 Subject: [PATCH 07/18] Fixing this whole thing Seriously. I'm gonna fix it all today. --- exercises/01 - JavaScript Drum Kit/index.html | 44 +++++---- exercises/02 - JS + CSS Clock/index.html | 92 +++++++++---------- exercises/04 - Array Cardio Day 1/index.html | 27 ++++-- readme.md | 4 +- 4 files changed, 91 insertions(+), 76 deletions(-) diff --git a/exercises/01 - JavaScript Drum Kit/index.html b/exercises/01 - JavaScript Drum Kit/index.html index 38a4ee2..336cebd 100644 --- a/exercises/01 - JavaScript Drum Kit/index.html +++ b/exercises/01 - JavaScript Drum Kit/index.html @@ -65,29 +65,41 @@ * the keypress, add a class to the specific element that matches with the keypress, * and then remove that class in order to reset the element to it's original state. */ - function playSound(e) { - const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`); - const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`); - if (!soundclip) return; // Stop function from running if key pressed doesn't match up with our elements + (function () { + const playSound = (e) => { + const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`); - keyelement.classList.add('playing'); + if (!soundclip) return undefined; // Stop function from running if key pressed doesn't match up with our elements - soundclip.currentTime = 0; // Play sound clip from start every time a corresponding key is pressed - soundclip.play(); - } + keyelement.classList.add('playing'); - function removeTransition(e) { - if (e.propertyName !== 'transform') return; // skip if it's not a transform event - this.classList.remove('playing'); - } + soundclip.currentTime = 0; // Play sou - const keys = document.querySelectorAll('.key'); // Find all elements in the document with a class 'key' - keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + soundclip.play(); + } - window.addEventListener('keydown', playSound); + const removeTransition = (e) => { + // skip if it's not a transform event + if (e.propertyName !== 'transform') return undefined; + e.target.classList.remove('playing'); + } + + // Find all elements in the document with a class 'key' + const keys = document.querySelectorAll('.key'); + + window.addEventListener('keydown', playSound); + + keys.forEach(key => + key.addEventListener( + 'transitionend', + (e) => removeTransition.call(key, e) + ) + ); + })(); - \ No newline at end of file + diff --git a/exercises/02 - JS + CSS Clock/index.html b/exercises/02 - JS + CSS Clock/index.html index 907a500..a69022b 100644 --- a/exercises/02 - JS + CSS Clock/index.html +++ b/exercises/02 - JS + CSS Clock/index.html @@ -19,49 +19,46 @@ - + }, 1000); + - \ No newline at end of file + diff --git a/exercises/04 - Array Cardio Day 1/index.html b/exercises/04 - Array Cardio Day 1/index.html index 7a44706..82b4c22 100644 --- a/exercises/04 - Array Cardio Day 1/index.html +++ b/exercises/04 - Array Cardio Day 1/index.html @@ -25,11 +25,14 @@ const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry']; - const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + const people = ['Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William', 'Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton',]; // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - const inventors_from_1500s = inventors.filter((inventor) => inventor.year >= 1500 && inventor.year < 1600) + const inventors_from_1500s = inventors.filter( + (inventor) => inventor.year >= 1500 && inventor.year < 1600 + ) + console.table(inventors_from_1500s) // Array.prototype.map() @@ -44,10 +47,15 @@ // Array.prototype.reduce() // 4. How many years did all the inventors live? - const total_years_lived = inventors.reduce((currValue, inventor) => currValue += (inventor.passed - inventor.year), 0) + const total_years_lived = inventors.reduce( + (currValue, inventor) => currValue += (inventor.passed - inventor.year), 0 + ) console.log(total_years_lived); + // 5. Sort the inventors by years lived - const inventors_by_lifespan = inventors.sort((a, b) => (a.passed - a.year) - (b.passed - b.year)); + const inventors_by_lifespan = inventors.sort( + (a, b) => (a.passed - a.year) - (b.passed - b.year) + ); console.table(inventors_by_lifespan); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name @@ -63,10 +71,10 @@ // 7. sort Exercise // Sort the people alphabetically by last name - const people_by_last_name = people.sort( - (a, b) => a.split(', ')[0] > b.split(', ')[0] ? -1 : 1); - console.table(people_by_last_name); + const people_by_last_name = people.sort((a, b) => a.split(', ')[0] < b.split(', ')[0] ? -1 : 1); + + console.log(people_by_last_name); // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']; @@ -79,9 +87,8 @@ return tallyObject; }, {}); - console.table(data_instance_count); - + console.log(data_instance_count); - \ No newline at end of file + diff --git a/readme.md b/readme.md index c500d5a..4253774 100644 --- a/readme.md +++ b/readme.md @@ -14,10 +14,10 @@ This repository contains my written guides for the JavaScript30 course by refer back to. Orrr you're in a library and don't have headphones. Who knows! If you want some documentation to go along with those sweet Wes Bos vids, here you go. -**DISCLAIMER:** My approach to some of the challenges vary from the provided answers (found in +**DISCLAIMER:** My approach to some of the challenges will vary from the provided answers (found in the files that end with `-FINISHED` on the main repo). Some of the tweaks are just to include various 'best practices' and some have huge chunks of differences. I try to provide - thorough explanations when I do sway from the path and explain why I chose to do so, but + thorough explanations when I do stray from the path and explain why I chose to do so, but I want to make it clear that some of these guides don't go hand-in-hand with the videos. ## About From ddecb4451c45b5727700f2bb8bd0af86d004c04d Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:35:51 -0700 Subject: [PATCH 08/18] Remove weird link tags around relative GH link Formatters getting too smart for their own good. --- exercises/01 - JavaScript Drum Kit/index.html | 2 +- exercises/06 - Type Ahead/index.html | 61 +++++++++---------- readme.md | 60 +++++++++--------- 3 files changed, 60 insertions(+), 63 deletions(-) diff --git a/exercises/01 - JavaScript Drum Kit/index.html b/exercises/01 - JavaScript Drum Kit/index.html index 336cebd..6e1180c 100644 --- a/exercises/01 - JavaScript Drum Kit/index.html +++ b/exercises/01 - JavaScript Drum Kit/index.html @@ -75,7 +75,7 @@ keyelement.classList.add('playing'); - soundclip.currentTime = 0; // Play sou + soundclip.currentTime = 0; // Play sound soundclip.play(); } diff --git a/exercises/06 - Type Ahead/index.html b/exercises/06 - Type Ahead/index.html index 75cd271..a9847cc 100644 --- a/exercises/06 - Type Ahead/index.html +++ b/exercises/06 - Type Ahead/index.html @@ -17,52 +17,49 @@ - \ No newline at end of file + diff --git a/readme.md b/readme.md index 4253774..07c880a 100644 --- a/readme.md +++ b/readme.md @@ -44,33 +44,33 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents -1. [JavaScript Drum Kit](<./exercises/01\ -\ JavaScript\ Drum\ Kit/>) -2. [JS + CSS Clock](<./exercises/02\ -\ JS\ +\ CSS\ Clock/>) -3. [CSS Variables](<./exercises/03\ -\ CSS\ Variables/>) -4. [Array Cardio, Day 1](<./exercises/04\ -\ Array\ Cardio\ Day\ 1/>) -5. [Flex Panel Gallery](<./exercises/05\ -\ Flex\ Panel\ Gallery/>) -6. [Type Ahead](<./exercises/06\ -\ Type\ Ahead/>) -7. [Array Cardio, Day 2](<./exercises/07\ -\ Array\ Cardio\ Day\ 2/>) -8. [Fun with HTML5 Canvas](<./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/>) -9. [Dev Tools Domination](<./exercises/09\ -\ DevTools\ Domination/>) -10. [Hold Shift and Check Checkboxes](<./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/>) -11. [Custom Video Player](<./exercises/11\ -\ Custom\ Video\ Player/>) -12. [Key Sequence Detection](<./exercises/12\ -\ Key\ Sequence\ Detection/>) -13. [Slide in on Scroll](<./exercises/13\ -\ Slide\ in\ on\ Scroll/>) -14. [JavaScript References vs. Copying](<./exercises/14\ -\ JavaScript\ References\ VS\ Copying>) -15. [LocalStorage](<./exercises/15\ -\ LocalStorage/>) -16. [Mouse Move Shadow](<./exercises/16\ -\ Mouse\ Move\ Shadow/>) -17. [Sort Without Articles](<./exercises/17\ -\ Sort\ Without\ Articles/>) -18. [Adding Up Times with Reduce](<./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/>) -19. [Webcam Fun](<./exercises/19\ -\ Webcam\ Fun/>) -20. [Speech Detection](<./exercises/20\ -\ Speech\ Detection/>) -21. [Geolocation](<./exercises/21\ -\ Geolocation/>) -22. [Follow Along Link Highlighter](<./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/>) -23. [Speech Synthesis](<./exercises/23\ -\ Speech\ Synthesis/>) -24. [Sticky Nav](<./exercises/24\ -\ Sticky\ Nav/>) -25. [Event Capture, Propagation, Bubbling, and Once](<./exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/>) -26. [Stripe Follow Along Nav](<./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/>) -27. [Click and Drag](<./exercises/27\ -\ Click\ and\ Drag/>) -28. [Video Speed Controller](<./exercises/28\ -\ Video\ Speed\ Controller/>) -29. [Countdown Timer](<./exercises/29\ -\ Countdown\ Timer/>) -30. [Whack A Mole](<./exercises/30\ -\ Whack\ A\ Mole/>) +1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/) +2. [JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/) +3. [CSS Variables](./exercises/03\ -\ CSS\ Variables/) +4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/) +5. [Flex Panel Gallery](./exercises/05\ -\ Flex\ Panel\ Gallery/) +6. [Type Ahead](./exercises/06\ -\ Type\ Ahead/) +7. [Array Cardio, Day 2](./exercises/07\ -\ Array\ Cardio\ Day\ 2/) +8. [Fun with HTML5 Canvas](./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/) +9. [Dev Tools Domination](./exercises/09\ -\ DevTools\ Domination/) +10. [Hold Shift and Check Checkboxes](./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/) +11. [Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/) +12. [Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Detection/) +13. [Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/) +14. [JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying) +15. [LocalStorage](./exercises/15\ -\ LocalStorage/) +16. [Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/) +17. [Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/) +18. [Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/) +19. [Webcam Fun](./exercises/19\ -\ Webcam\ Fun/) +20. [Speech Detection](./exercises/20\ -\ Speech\ Detection/) +21. [Geolocation](./exercises/21\ -\ Geolocation/) +22. [Follow Along Link Highlighter](./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/) +23. [Speech Synthesis](./exercises/23\ -\ Speech\ Synthesis/) +24. [Sticky Nav](./exercises/24\ -\ Sticky\ Nav/) +25. [Event Capture, Propagation, Bubbling, and Once](./exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/) +26. [Stripe Follow Along Nav](./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/) +27. [Click and Drag](./exercises/27\ -\ Click\ and\ Drag/) +28. [Video Speed Controller](./exercises/28\ -\ Video\ Speed\ Controller/) +29. [Countdown Timer](./exercises/29\ -\ Countdown\ Timer/) +30. [Whack A Mole](./exercises/30\ -\ Whack\ A\ Mole/) From 9b2f3aa6931a93ac401d2aef85e87d0eca9bac16 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:38:48 -0700 Subject: [PATCH 09/18] Formatting readme Hnggg stupid links --- readme.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 07c880a..b25c3e6 100644 --- a/readme.md +++ b/readme.md @@ -44,9 +44,9 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents -1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/) -2. [JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/) -3. [CSS Variables](./exercises/03\ -\ CSS\ Variables/) +1. [JavaScript Drum Kit](exercises/01\ -\ JavaScript\ Drum\ Kit/) +2. [JS + CSS Clock](exercises/02\ -\ JS\ +\ CSS\ Clock/) +3. [CSS Variables](exercises/03\ -\ CSS\ Variables/) 4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/) 5. [Flex Panel Gallery](./exercises/05\ -\ Flex\ Panel\ Gallery/) 6. [Type Ahead](./exercises/06\ -\ Type\ Ahead/) From abfd1c196d3345fe621f1ea15325ccd89f76954a Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:47:49 -0700 Subject: [PATCH 10/18] Trying to fix relative links --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index b25c3e6..a2736ca 100644 --- a/readme.md +++ b/readme.md @@ -44,7 +44,7 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents -1. [JavaScript Drum Kit](exercises/01\ -\ JavaScript\ Drum\ Kit/) +1. [JavaScript Drum Kit](./exercises/01\ \-\ \JavaScript\ \Drum\ \Kit/README.md) 2. [JS + CSS Clock](exercises/02\ -\ JS\ +\ CSS\ Clock/) 3. [CSS Variables](exercises/03\ -\ CSS\ Variables/) 4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/) From cc16dfe86a2943a81bfa87c9c2bdb5116af9c0e8 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:48:37 -0700 Subject: [PATCH 11/18] Nope --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index a2736ca..1c82326 100644 --- a/readme.md +++ b/readme.md @@ -44,7 +44,7 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents -1. [JavaScript Drum Kit](./exercises/01\ \-\ \JavaScript\ \Drum\ \Kit/README.md) +1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/README.md) 2. [JS + CSS Clock](exercises/02\ -\ JS\ +\ CSS\ Clock/) 3. [CSS Variables](exercises/03\ -\ CSS\ Variables/) 4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/) From d2b8d96df09fc0c8078cefea614318c8a120ddb4 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:50:48 -0700 Subject: [PATCH 12/18] Now? --- readme.md | 60 +++++++++++++++++++++++++++---------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/readme.md b/readme.md index 1c82326..fbbf460 100644 --- a/readme.md +++ b/readme.md @@ -44,33 +44,33 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents -1. [JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit/README.md) -2. [JS + CSS Clock](exercises/02\ -\ JS\ +\ CSS\ Clock/) -3. [CSS Variables](exercises/03\ -\ CSS\ Variables/) -4. [Array Cardio, Day 1](./exercises/04\ -\ Array\ Cardio\ Day\ 1/) -5. [Flex Panel Gallery](./exercises/05\ -\ Flex\ Panel\ Gallery/) -6. [Type Ahead](./exercises/06\ -\ Type\ Ahead/) -7. [Array Cardio, Day 2](./exercises/07\ -\ Array\ Cardio\ Day\ 2/) -8. [Fun with HTML5 Canvas](./exercises/08\ -\ Fun\ with\ HTML5\ Canvas/) -9. [Dev Tools Domination](./exercises/09\ -\ DevTools\ Domination/) -10. [Hold Shift and Check Checkboxes](./exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/) -11. [Custom Video Player](./exercises/11\ -\ Custom\ Video\ Player/) -12. [Key Sequence Detection](./exercises/12\ -\ Key\ Sequence\ Detection/) -13. [Slide in on Scroll](./exercises/13\ -\ Slide\ in\ on\ Scroll/) -14. [JavaScript References vs. Copying](./exercises/14\ -\ JavaScript\ References\ VS\ Copying) -15. [LocalStorage](./exercises/15\ -\ LocalStorage/) -16. [Mouse Move Shadow](./exercises/16\ -\ Mouse\ Move\ Shadow/) -17. [Sort Without Articles](./exercises/17\ -\ Sort\ Without\ Articles/) -18. [Adding Up Times with Reduce](./exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/) -19. [Webcam Fun](./exercises/19\ -\ Webcam\ Fun/) -20. [Speech Detection](./exercises/20\ -\ Speech\ Detection/) -21. [Geolocation](./exercises/21\ -\ Geolocation/) -22. [Follow Along Link Highlighter](./exercises/22\ -\ Follow\ Along\ Link\ Highlighter/) -23. [Speech Synthesis](./exercises/23\ -\ Speech\ Synthesis/) -24. [Sticky Nav](./exercises/24\ -\ Sticky\ Nav/) -25. [Event Capture, Propagation, Bubbling, and Once](./exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/) -26. [Stripe Follow Along Nav](./exercises/26\ -\ Stripe\ Follow\ Along\ Nav/) -27. [Click and Drag](./exercises/27\ -\ Click\ and\ Drag/) -28. [Video Speed Controller](./exercises/28\ -\ Video\ Speed\ Controller/) -29. [Countdown Timer](./exercises/29\ -\ Countdown\ Timer/) -30. [Whack A Mole](./exercises/30\ -\ Whack\ A\ Mole/) +1. [JavaScript Drum Kit](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/01%20-%20JavaScript%20Drum%20Kit) +2. [JS + CSS Clock](exercises/02\ -\ JS\ +\ CSS\ Clock/https://github.com/nitishdayal/JavaScript30/tree/master/exercises/02%20-%20JS%20%2B%20CSS%20Clock) +3. [CSS Variables](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/03%20-%20CSS%20Variables) +4. [Array Cardio, Day 1](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/04\ -\ Array\ Cardio\ Day\ 1/) +5. [Flex Panel Gallery](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/05\ -\ Flex\ Panel\ Gallery/) +6. [Type Ahead](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/06\ -\ Type\ Ahead/) +7. [Array Cardio, Day 2](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/07\ -\ Array\ Cardio\ Day\ 2/) +8. [Fun with HTML5 Canvas](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/08\ -\ Fun\ with\ HTML5\ Canvas/) +9. [Dev Tools Domination](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/09\ -\ DevTools\ Domination/) +10. [Hold Shift and Check Checkboxes](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/) +11. [Custom Video Player](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/11\ -\ Custom\ Video\ Player/) +12. [Key Sequence Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/12\ -\ Key\ Sequence\ Detection/) +13. [Slide in on Scroll](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/13\ -\ Slide\ in\ on\ Scroll/) +14. [JavaScript References vs. Copying](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/14\ -\ JavaScript\ References\ VS\ Copying) +15. [LocalStorage](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/15\ -\ LocalStorage/) +16. [Mouse Move Shadow](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/16\ -\ Mouse\ Move\ Shadow/) +17. [Sort Without Articles](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/17\ -\ Sort\ Without\ Articles/) +18. [Adding Up Times with Reduce](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/) +19. [Webcam Fun](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/19\ -\ Webcam\ Fun/) +20. [Speech Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/20\ -\ Speech\ Detection/) +21. [Geolocation](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/21\ -\ Geolocation/) +22. [Follow Along Link Highlighter](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/22\ -\ Follow\ Along\ Link\ Highlighter/) +23. [Speech Synthesis](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/23\ -\ Speech\ Synthesis/) +24. [Sticky Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/24\ -\ Sticky\ Nav/) +25. [Event Capture, Propagation, Bubbling, and Once](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/) +26. [Stripe Follow Along Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/26\ -\ Stripe\ Follow\ Along\ Nav/) +27. [Click and Drag](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/27\ -\ Click\ and\ Drag/) +28. [Video Speed Controller](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/28\ -\ Video\ Speed\ Controller/) +29. [Countdown Timer](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/29\ -\ Countdown\ Timer/) +30. [Whack A Mole](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/30\ -\ Whack\ A\ Mole/) From 610ce2c6f67cd8f43693d5c350e61a55051caadf Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 04:52:28 -0700 Subject: [PATCH 13/18] Formatting I'm going to go crazy --- readme.md | 56 +++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/readme.md b/readme.md index fbbf460..f17cdad 100644 --- a/readme.md +++ b/readme.md @@ -45,32 +45,32 @@ The starter files (available [here](https://github.com/wesbos/JavaScript30)) inc ## Table Of Contents 1. [JavaScript Drum Kit](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/01%20-%20JavaScript%20Drum%20Kit) -2. [JS + CSS Clock](exercises/02\ -\ JS\ +\ CSS\ Clock/https://github.com/nitishdayal/JavaScript30/tree/master/exercises/02%20-%20JS%20%2B%20CSS%20Clock) +2. [JS + CSS Clock](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/02%20-%20JS%20%2B%20CSS%20Clock) 3. [CSS Variables](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/03%20-%20CSS%20Variables) -4. [Array Cardio, Day 1](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/04\ -\ Array\ Cardio\ Day\ 1/) -5. [Flex Panel Gallery](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/05\ -\ Flex\ Panel\ Gallery/) -6. [Type Ahead](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/06\ -\ Type\ Ahead/) -7. [Array Cardio, Day 2](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/07\ -\ Array\ Cardio\ Day\ 2/) -8. [Fun with HTML5 Canvas](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/08\ -\ Fun\ with\ HTML5\ Canvas/) -9. [Dev Tools Domination](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/09\ -\ DevTools\ Domination/) -10. [Hold Shift and Check Checkboxes](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/10\ -\ Hold\ Shift\ and\ Check\ Checkboxes/) -11. [Custom Video Player](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/11\ -\ Custom\ Video\ Player/) -12. [Key Sequence Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/12\ -\ Key\ Sequence\ Detection/) -13. [Slide in on Scroll](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/13\ -\ Slide\ in\ on\ Scroll/) -14. [JavaScript References vs. Copying](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/14\ -\ JavaScript\ References\ VS\ Copying) -15. [LocalStorage](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/15\ -\ LocalStorage/) -16. [Mouse Move Shadow](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/16\ -\ Mouse\ Move\ Shadow/) -17. [Sort Without Articles](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/17\ -\ Sort\ Without\ Articles/) -18. [Adding Up Times with Reduce](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/18\ -\ Adding\ Up\ Times\ with\ Reduce/) -19. [Webcam Fun](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/19\ -\ Webcam\ Fun/) -20. [Speech Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/20\ -\ Speech\ Detection/) -21. [Geolocation](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/21\ -\ Geolocation/) -22. [Follow Along Link Highlighter](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/22\ -\ Follow\ Along\ Link\ Highlighter/) -23. [Speech Synthesis](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/23\ -\ Speech\ Synthesis/) -24. [Sticky Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/24\ -\ Sticky\ Nav/) -25. [Event Capture, Propagation, Bubbling, and Once](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/25\ -\ Event\ Capture,\ Propagation,\ Bubbling\ and\ Once/) -26. [Stripe Follow Along Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/26\ -\ Stripe\ Follow\ Along\ Nav/) -27. [Click and Drag](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/27\ -\ Click\ and\ Drag/) -28. [Video Speed Controller](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/28\ -\ Video\ Speed\ Controller/) -29. [Countdown Timer](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/29\ -\ Countdown\ Timer/) -30. [Whack A Mole](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/30\ -\ Whack\ A\ Mole/) +4. [Array Cardio, Day 1](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/04%20-%20Array%20Cardio%20Day%201/) +5. [Flex Panel Gallery](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/05%20-%20Flex%20Panel%20Gallery/) +6. [Type Ahead](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/06%20-%20Type%20Ahead/) +7. [Array Cardio, Day 2](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/07%20-%20Array%20Cardio%20Day%202/) +8. [Fun with HTML5 Canvas](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/08%20-%20Fun%20with%20HTML5%20Canvas/) +9. [Dev Tools Domination](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/09%20-%20DevTools%20Domination/) +10. [Hold Shift and Check Checkboxes](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/) +11. [Custom Video Player](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/11%20-%20Custom%20Video%20Player/) +12. [Key Sequence Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/12%20-%20Key%20Sequence%20Detection/) +13. [Slide in on Scroll](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/13%20-%20Slide%20in%20on%20Scroll/) +14. [JavaScript References vs. Copying](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/14%20-%20JavaScript%20References%20VS%20Copying) +15. [LocalStorage](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/15%20-%20LocalStorage/) +16. [Mouse Move Shadow](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/16%20-%20Mouse%20Move%20Shadow/) +17. [Sort Without Articles](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/17%20-%20Sort%20Without%20Articles/) +18. [Adding Up Times with Reduce](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/18%20-%20Adding%20Up%20Times%20with%20Reduce/) +19. [Webcam Fun](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/19%20-%20Webcam%20Fun/) +20. [Speech Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/20%20-%20Speech%20Detection/) +21. [Geolocation](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/21%20-%20Geolocation/) +22. [Follow Along Link Highlighter](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/22%20-%20Follow%20Along%20Link%20Highlighter/) +23. [Speech Synthesis](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/23%20-%20Speech%20Synthesis/) +24. [Sticky Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/24%20-%20Sticky%20Nav/) +25. [Event Capture, Propagation, Bubbling, and Once](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/) +26. [Stripe Follow Along Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/26%20-%20Stripe%20Follow%20Along%20Nav/) +27. [Click and Drag](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/27%20-%20Click%20and%20Drag/) +28. [Video Speed Controller](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/28%20-%20Video%20Speed%20Controller/) +29. [Countdown Timer](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/29%20-%20Countdown%20Timer/) +30. [Whack A Mole](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/30%20-%20Whack%20A%20Mole/) From 692b4af8f431085188cd7b8117363e14c6c14a1c Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 22 Apr 2017 05:23:49 -0700 Subject: [PATCH 14/18] Update last commit date on readme Woah. Such neglect, much wow. --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index f17cdad..9ab1786 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # JavaScript30 - 30 Day JavaScript Challenge Nitish Dayal, Software & Applications Developer -Last Commit Date: Dec 24, 2016 +Last Commit Date: April 22, 2017 > Course created by [Wes Bos](https://github.com/wesbos) > Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account) From 55a8ea8bf7a5b4b75434d8bb1b99f0163c606768 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Fri, 12 May 2017 16:48:48 -0700 Subject: [PATCH 15/18] Rewrite hype I'm doing this. It's happening. Let's go. --- .editorconfig | 13 ++ exercises/01 - JavaScript Drum Kit/README.md | 16 +-- exercises/01 - JavaScript Drum Kit/index.html | 9 +- exercises/02 - JS + CSS Clock/README.md | 123 +++++++++++++----- exercises/02 - JS + CSS Clock/index.html | 29 +++-- exercises/03 - CSS Variables/README.md | 2 +- exercises/04 - Array Cardio Day 1/README.md | 2 +- exercises/05 - Flex Panel Gallery/README.md | 2 +- exercises/06 - Type Ahead/README.md | 2 +- exercises/07 - Array Cardio Day 2/README.md | 2 +- .../08 - Fun with HTML5 Canvas/README.md | 2 +- exercises/09 - Dev Tools Domination/README.md | 2 +- .../README.md | 2 +- exercises/11 - Custom Video Player/README.md | 2 +- .../12 - Key Sequence Detection/README.md | 2 +- exercises/13 - Slide in on Scroll/README.md | 2 +- .../README.md | 2 +- exercises/15 - LocalStorage/README.md | 2 +- exercises/16 - Mouse Move Shadow/README.md | 2 +- .../17 - Sort Without Articles/README.md | 2 +- .../README.md | 2 +- exercises/19 - Webcam Fun/README.md | 2 +- exercises/19 - Webcam Fun/scripts.js | 67 +++++----- readme.md | 2 +- 24 files changed, 182 insertions(+), 111 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..4da0316 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true +end_of_line = lf +insert_final_newline = true + +[*.md] +indent_size = 4 +trim_trailing_whitespace = false + diff --git a/exercises/01 - JavaScript Drum Kit/README.md b/exercises/01 - JavaScript Drum Kit/README.md index abe966a..5e39133 100644 --- a/exercises/01 - JavaScript Drum Kit/README.md +++ b/exercises/01 - JavaScript Drum Kit/README.md @@ -1,13 +1,13 @@ # Exercise 1: JavaScript Drum Kit Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 9, 2016 +Last Commit Date: May 12, 2017 An HTML page displays a collection of `div` elements, each containing a letter that corresponds with a key on the keyboard, and the name of the soundclip to be played when that button is clicked. When a user presses a key that matches - one of the `div` elements, the page should play the corresponding soundclip - and place a temporary 'highlight' (or border) around the `div`. Write the - JavaScript code necessary to add this functionality. + one of the letters displayed in the `div` elements, the page should play + the corresponding soundclip and place a temporary 'highlight' (or border) + around the `div`. Write the JavaScript code necessary to add this functionality. ## Guide @@ -17,11 +17,11 @@ We are provided with the HTML, CSS, and sound clips necessary to create this - HTML `data-*` attributes: Introduced in HTML5, `data-*` attributes (where * can be anything you want) allow us to store _custom data_ on any HTML element. Each - `div.key` and `audio` element in the provided HTML file has a `data-key` attribute - which corresponds with a keyboard button. + `div.key` (`
`) and `audio` element in the + provided HTML file has a `data-key` attribute which corresponds with a keyboard button. -- CSS `playing` class & pre-defined style: The provided CSS file already has an `playing` - class defined with some styling in it. We will apply this class to the correct +- CSS `playing` class & pre-defined style: The provided CSS file already has a `playing` + class defined with some rules in it. We will apply this class to the correct element, depending on the key pressed by the user, and remove it once animation is finished. diff --git a/exercises/01 - JavaScript Drum Kit/index.html b/exercises/01 - JavaScript Drum Kit/index.html index 6e1180c..1601b97 100644 --- a/exercises/01 - JavaScript Drum Kit/index.html +++ b/exercises/01 - JavaScript Drum Kit/index.html @@ -66,7 +66,7 @@ * and then remove that class in order to reset the element to it's original state. */ - (function () { + (()=> { const playSound = (e) => { const soundclip = document.querySelector(`audio[data-key="${e.keyCode}"]`); const keyelement = document.querySelector(`.key[data-key="${e.keyCode}"]`); @@ -75,9 +75,9 @@ keyelement.classList.add('playing'); - soundclip.currentTime = 0; // Play sound + soundclip.currentTime = 0; - soundclip.play(); + soundclip.play(); // Play sound } const removeTransition = (e) => { @@ -95,8 +95,7 @@ key.addEventListener( 'transitionend', (e) => removeTransition.call(key, e) - ) - ); + )); })(); diff --git a/exercises/02 - JS + CSS Clock/README.md b/exercises/02 - JS + CSS Clock/README.md index 9df65f1..9857dbe 100644 --- a/exercises/02 - JS + CSS Clock/README.md +++ b/exercises/02 - JS + CSS Clock/README.md @@ -1,44 +1,101 @@ # Exercise 2: JS + CSS Clock -Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 9, 2016 -Given an web page with an analog clock created out of CSS, update the CSS - and write the JavaScript necessary to make the clock functional. +> Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) +> Last Commit Date: May 12, 2017 + +Given a web page with an analog clock created with CSS, write the + JavaScript necessary to make the clock functional. Make alterations to the CSS + as necessary. ## Guide The HTML file has 3 `div` elements which correspond with the second, minute, and - hour hand on a clock. We'll create references to these elements and dynamically - update certain CSS properties to change their positions so they reflect the - current time. Easy peasy. + hour hand on a clock + + ```html + +
+
+
+ + ``` + +The necessary JavaScript code shouldn't be too crazy; + we'll create references to these elements and dynamically + update certain CSS properties to change their positions so they reflect the + current time. Easy peasy. **Steps:** -- CSS: - - 1. Set the `transform-origin` CSS property of the `.hand` class at 100%; the default - value is 50% (or the midway point of the HTML element), but if we leave it there - the clock hands will tranform from their individal centers as opposed to the - center of the clock. Changing the value to 100% shifts the _origin point of the - transformations_ to the furthest x-axis point of the HTML element. - 2. The hands are all laying flat; we need them to be vertical. Rotate all of the - hands by 90 degrees so that they are upright. - 3. Set the `transition` CSS property of `.hand` to `all 0.05s`; this tells the browser - to gradually apply any changes to the element's styling over a 0.05 second period. - 4. Set the `transition-timing-function` CSS property of `.hand` to whatever function - you prefer, or define your own using the `cubic-bezier()` property value. - -- JavaScript - - 1. Declare & define variables for each clock hand and reference the corresponding _HTML - element_. - 2. Create a function which will be responsible for updating the position of all the - clock hands. - - Calculate the necessary rotation using the _current numerical time value_ for each hand - and dividing it by the max value possible to get the percentage, multiplying the result - of that by 360 (each hand can rotate 360 degrees) to get the numerical value for the - rotation, and increasing that by another 90 degrees to compensate for the shift - originally applied by the CSS styling on page load. - 3. Call the function defined in step 2 every second. +- **CSS**: + + 1. The hands are all laying flat; we need them to be vertical. Rotate all of the + hands by 90 degrees so that they are upright by giving the `.hand` class a + `transform` rule with the value `rotate(90deg)`. + + 1. Set the `transform-origin` CSS property of the `.hand` class to `100%`; the default + value is `50%` (or the midway point of the HTML element), but if we leave it there + the clock hands will transform from the respective centers of their lines as opposed to the + center of the clock. (If that doesn't make sense, try it out in your code. Set the value for + `transform-origin` rule completely and check again. Finally, try it again with `50%`.). + Changing the value to 100% shifts the _point of origin for the transformation_ + to the furthest point on the x-axis of the HTML element. + + 1. Set the `transition` CSS property of `.hand` to `all 0.05s`; this tells the browser + to gradually apply any changes to the element's styling over a 0.05 second period. + + 1. Set the `transition-timing-function` CSS property of `.hand` to whatever function + you prefer, or define your own using the `cubic-bezier()` property value. + +- **JavaScript**: + + 1. Declare & define variables for each clock hand and reference the corresponding _HTML + element_. + + EX: `const secondHand = document.querySelector('.second-hand');` + + 1. Create a function which will be responsible for calculating the number of degrees that we need + to rotate each clock hand by. It should accept two arguments: the _current numerical value_ of the + clock hand, and the max value possible of the clock hand (if you want the number of degrees needed for + the second hand and the current time is 03:15:18, you would pass in (18, 60) where 18 is the current + value of the second hand, and 60 is the maximum possible value). + + - Divide the current numerical value of the clock hand by it's max possible value to get the rotation as + a percentage, then multiply the result of that by 360 (each hand can rotate 360 degrees) to convert + the value from a percentage to an integer, and increase that result by another 90 degrees to compensate + for the shift originally applied by the CSS styling on page load. + + ```javascript + const calcDegrees = (time, max) => ((time / max) * 360) + 90; + ``` + + 1. Create a function that will automatically run every second; in the body of the function, + create a variable and define it as a new Date object. Then, create three variables which will + hold references to the rotation amount to be applied to each clock hand. To get the rotation amount, + define the variables as the return value from calling the `calcDegrees` function; each call should + pass in the correct values in relation to whichever clock hand they are supposed to represent. + + 1. Still within the body of the function from step 3, update the `transform` rule for each + clock hand to their corresponding updated values. + + ```javascript + /* Steps 3 & 4 */ + + // Call function once every second + setInterval(() => { + // Create new Date object + const now = new Date(); + // Get current seconds, minutes, & hours and calculate the degree shift + const + secondHandDegrees = calcDegrees(now.getSeconds(), 60), + minuteHandDegrees = calcDegrees(now.getMinutes(), 60), + hourHandDegrees = calcDegrees(now.getHours(), 12); + // Apply rotation to the clock hands corresponding with current time value + secondHand.style.transform = `rotate(${secondHandDegrees}deg)`; + minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`; + hourHand.style.transform = `rotate(${hourHandDegrees}deg)`; + }, 1000); // 1000ms === 1s + + ``` Yaaaaaay! All done! diff --git a/exercises/02 - JS + CSS Clock/index.html b/exercises/02 - JS + CSS Clock/index.html index a69022b..bd99970 100644 --- a/exercises/02 - JS + CSS Clock/index.html +++ b/exercises/02 - JS + CSS Clock/index.html @@ -25,7 +25,7 @@ text-align: center; font-size: 10px; } - + body { font-size: 2rem; display: flex; @@ -33,7 +33,7 @@ min-height: 100vh; align-items: center; } - + .clock { width: 30rem; height: 30rem; @@ -44,7 +44,7 @@ padding: 2rem; box-shadow: 0 0 0px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2); } - + .clock-face { position: relative; width: 100%; @@ -52,7 +52,7 @@ transform: translateY(-3px); /* account for the height of the clock hands */ } - + .hand { width: 50%; height: 6px; @@ -73,13 +73,16 @@ */ // Create references to the HTML elements that we want to transform - const - secondHand = document.querySelector('.second-hand'), - minuteHand = document.querySelector('.min-hand'), - hourHand = document.querySelector('.hour-hand') - const calcDegrees = (int, div) => ((int / div) * 360) + 90; - // Call function once every second - setInterval(() => { + (()=> { + const + secondHand = document.querySelector('.second-hand'), + minuteHand = document.querySelector('.min-hand'), + hourHand = document.querySelector('.hour-hand') + + // Helper function responsible for calculating the amount to rotate a hand + const calcDegrees = (time, max) => ((time / max) * 360) + 90; + // Call function once every second + setInterval(() => { // Create new Date object const now = new Date(); @@ -90,14 +93,12 @@ minuteHandDegrees = calcDegrees(now.getMinutes(), 60), hourHandDegrees = calcDegrees(now.getHours(), 12); - // Apply rotation to the clock hands corresponding with current time value secondHand.style.transform = `rotate(${secondHandDegrees}deg)`; minuteHand.style.transform = `rotate(${minuteHandDegrees}deg)`; hourHand.style.transform = `rotate(${hourHandDegrees}deg)`; - - }, 1000); + })(); diff --git a/exercises/03 - CSS Variables/README.md b/exercises/03 - CSS Variables/README.md index 222c3d2..101a76f 100644 --- a/exercises/03 - CSS Variables/README.md +++ b/exercises/03 - CSS Variables/README.md @@ -1,6 +1,6 @@ # Exercise 3: CSS Variables Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 10, 2016 +Last Commit Date: May 12, 2017 The web page provided in this exercise displays an image, and has 3 form inputs from which the user can manipulate the padding, blur amount, and background diff --git a/exercises/04 - Array Cardio Day 1/README.md b/exercises/04 - Array Cardio Day 1/README.md index b659616..584f0c5 100644 --- a/exercises/04 - Array Cardio Day 1/README.md +++ b/exercises/04 - Array Cardio Day 1/README.md @@ -1,6 +1,6 @@ # Exercise 4: Array Cardio Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 12, 2016 +Last Commit Date: May 12, 2017 Not really much of a guide necessary for this one. The challenge is pretty well documented as far as what's expected from the developer; use diff --git a/exercises/05 - Flex Panel Gallery/README.md b/exercises/05 - Flex Panel Gallery/README.md index 6dc7d76..854c309 100644 --- a/exercises/05 - Flex Panel Gallery/README.md +++ b/exercises/05 - Flex Panel Gallery/README.md @@ -1,6 +1,6 @@ # Exercise 5: Flex Panel Gallery Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 12, 2016 +Last Commit Date: May 12, 2017 We are given a web page with five `div` HTML elements with a class `panels`, each containing three `p` HTML elements with some text. These five `div` elements diff --git a/exercises/06 - Type Ahead/README.md b/exercises/06 - Type Ahead/README.md index 40d930f..8005fbc 100644 --- a/exercises/06 - Type Ahead/README.md +++ b/exercises/06 - Type Ahead/README.md @@ -1,6 +1,6 @@ # Exercise 6: Type Ahead AJAX Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 12, 2016 +Last Commit Date: May 12, 2017 We are given a web page with an `input` HTML element in which the user can insert text, and an `unordered list` below that `input` which will display cities & states diff --git a/exercises/07 - Array Cardio Day 2/README.md b/exercises/07 - Array Cardio Day 2/README.md index 786100a..0360005 100644 --- a/exercises/07 - Array Cardio Day 2/README.md +++ b/exercises/07 - Array Cardio Day 2/README.md @@ -1,6 +1,6 @@ # Exercise 7: Array Cardio Day 2 Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 12, 2016 +Last Commit Date: May 12, 2017 More fun with Array methods! Much like the previous Array Cardio exercise, the requirements are pretty well documented. This exercise utilizes the following diff --git a/exercises/08 - Fun with HTML5 Canvas/README.md b/exercises/08 - Fun with HTML5 Canvas/README.md index c1192d4..9e737a7 100644 --- a/exercises/08 - Fun with HTML5 Canvas/README.md +++ b/exercises/08 - Fun with HTML5 Canvas/README.md @@ -1,6 +1,6 @@ # Exercise 8: Fun With HTML5 Canvas Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 14, 2016 +Last Commit Date: May 12, 2017 We're given an HTML page with a `canvas` element in which the user should be able to click and drag their mouse to draw. When the user clicks+drags their mouse, diff --git a/exercises/09 - Dev Tools Domination/README.md b/exercises/09 - Dev Tools Domination/README.md index deda385..804131b 100644 --- a/exercises/09 - Dev Tools Domination/README.md +++ b/exercises/09 - Dev Tools Domination/README.md @@ -1,6 +1,6 @@ # Exercise 9: Dev Tools Domination Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 15, 2016 +Last Commit Date: May 12, 2017 This is a simple dev tools exercise. We'll explore how to set _break points_ in the browser debugger, and learn about various `console` methods that allow us diff --git a/exercises/10 - Hold Shift and Check Checkboxes/README.md b/exercises/10 - Hold Shift and Check Checkboxes/README.md index 352ddc5..1db7afe 100644 --- a/exercises/10 - Hold Shift and Check Checkboxes/README.md +++ b/exercises/10 - Hold Shift and Check Checkboxes/README.md @@ -1,6 +1,6 @@ # Exercise 10: Hold Shift and Check Checkboxes Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 15, 2016 +Last Commit Date: May 12, 2017 We're given an HTML page that displays a collection of `input` HTML elements of type `checkbox`, each followed by a `p` HTML element that will have it's diff --git a/exercises/11 - Custom Video Player/README.md b/exercises/11 - Custom Video Player/README.md index a9e510a..5cfe96f 100644 --- a/exercises/11 - Custom Video Player/README.md +++ b/exercises/11 - Custom Video Player/README.md @@ -1,6 +1,6 @@ # Exercise 11: Custom Video Player Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 17, 2016 +Last Commit Date: May 12, 2017 When the HTML page is loaded in a browser, it displays a video player with controls for playing/pausing the video, scrolling through the video progress, skipping/ diff --git a/exercises/12 - Key Sequence Detection/README.md b/exercises/12 - Key Sequence Detection/README.md index 4fe1f48..505af56 100644 --- a/exercises/12 - Key Sequence Detection/README.md +++ b/exercises/12 - Key Sequence Detection/README.md @@ -1,6 +1,6 @@ # Exercise 12: Key Sequence Detection Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 18, 2016 +Last Commit Date: May 12, 2017 We're given an HTML document with...basically nothing. There's a `script` tag in the document header that loads a JavaScript file from [Cornify.com](https://www.cornify.com) diff --git a/exercises/13 - Slide in on Scroll/README.md b/exercises/13 - Slide in on Scroll/README.md index 73e739b..0669658 100644 --- a/exercises/13 - Slide in on Scroll/README.md +++ b/exercises/13 - Slide in on Scroll/README.md @@ -1,6 +1,6 @@ # Exercise 13: Slide In On Scroll Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 19, 2016 +Last Commit Date: May 12, 2017 Given an HTML document with multiple paragraphs and images, write the necessary JavaScript code to slide the images into view when the user scrolls to a point diff --git a/exercises/14 - JavaScript References VS Copying/README.md b/exercises/14 - JavaScript References VS Copying/README.md index af92fdf..2c4c064 100644 --- a/exercises/14 - JavaScript References VS Copying/README.md +++ b/exercises/14 - JavaScript References VS Copying/README.md @@ -1,6 +1,6 @@ # Exercise 14: JavaScript Reference vs Copying Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 19, 2016 +Last Commit Date: May 12, 2017 No guide necessary! We're learning about JavaScript variable referencing vs. copying. If you want a full-blown explanation, take a look at [chapter 11, section diff --git a/exercises/15 - LocalStorage/README.md b/exercises/15 - LocalStorage/README.md index de9e4f0..e177189 100644 --- a/exercises/15 - LocalStorage/README.md +++ b/exercises/15 - LocalStorage/README.md @@ -1,6 +1,6 @@ # Exercise 15: LocalStorage Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 19, 2016 +Last Commit Date: May 12, 2017 The web page simulates a restaurant's menu. The user should be able to add new dishes to the list using the `form` HTML element without having diff --git a/exercises/16 - Mouse Move Shadow/README.md b/exercises/16 - Mouse Move Shadow/README.md index 2879e01..8cc4784 100644 --- a/exercises/16 - Mouse Move Shadow/README.md +++ b/exercises/16 - Mouse Move Shadow/README.md @@ -1,6 +1,6 @@ # Exercise 16: Mouse Move Shadow Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 23, 2016 +Last Commit Date: May 12, 2017 We're given an HTML document with a `div` element containing an `h1` element. The `h1` element has a `textShadow` _style property_ which we want to manipulate diff --git a/exercises/17 - Sort Without Articles/README.md b/exercises/17 - Sort Without Articles/README.md index 0b57c38..f38f09e 100644 --- a/exercises/17 - Sort Without Articles/README.md +++ b/exercises/17 - Sort Without Articles/README.md @@ -1,6 +1,6 @@ # Exercise 17: Sort Without Articles Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 23, 2016 +Last Commit Date: May 12, 2017 We're given an HTML page with an _unordered list_, and an _array of string values_ in the `script` tag. Sort the values in the array **excluding diff --git a/exercises/18 - Adding Up Times with Reduce/README.md b/exercises/18 - Adding Up Times with Reduce/README.md index af9108d..df0190f 100644 --- a/exercises/18 - Adding Up Times with Reduce/README.md +++ b/exercises/18 - Adding Up Times with Reduce/README.md @@ -1,6 +1,6 @@ # Exercise 18: Adding Up Times With Reduce Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 24, 2016 +Last Commit Date: May 12, 2017 The HTML document contains an _unordered list_ with multiple _list items_, each with a `data-time` which reflect a time in minutes and seconds. Our goal is to diff --git a/exercises/19 - Webcam Fun/README.md b/exercises/19 - Webcam Fun/README.md index c429f56..305da3a 100644 --- a/exercises/19 - Webcam Fun/README.md +++ b/exercises/19 - Webcam Fun/README.md @@ -1,6 +1,6 @@ # Exercise 19: Webcam Fun Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) -Last Commit Date: Dec 30, 2016 +Last Commit Date: May 12, 2017 We're given an HTML page with a button labeled 'Take Photo' which calls upon a `takePhoto()` function on a `click` event, a collection of `input` elements of type `range` with RGB min/max diff --git a/exercises/19 - Webcam Fun/scripts.js b/exercises/19 - Webcam Fun/scripts.js index af9b1a9..9fb2230 100644 --- a/exercises/19 - Webcam Fun/scripts.js +++ b/exercises/19 - Webcam Fun/scripts.js @@ -1,12 +1,13 @@ -(() => { - const video = document.querySelector('.player'), - canvas = document.querySelector('.photo'), - ctx = canvas.getContext('2d'), - strip = document.querySelector('.strip'), - snap = document.querySelector('.snap'); +(() => { + const video = document.querySelector(".player"), + canvas = document.querySelector(".photo"), + ctx = canvas.getContext("2d"), + strip = document.querySelector(".strip"), + snap = document.querySelector(".snap"); const getVideo = () => { - navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + navigator.mediaDevices + .getUserMedia({ video: true, audio: false }) .then(localMediaStream => { video.srcObject = localMediaStream; video.play(); @@ -14,43 +15,42 @@ .catch(err => { console.error(`OH NO!!! ${err}`); }); - } + }; const paintToCanavas = () => { - const width = video.videoWidth, - height = video.videoHeight; - + const width = video.videoWidth, height = video.videoHeight; + canvas.width = width; - canvas.height = height; + canvas.height = height; return setInterval(() => { ctx.drawImage(video, 0, 0, width, height); - + let pixels = ctx.getImageData(0, 0, width, height); pixels = greenScreen(pixels); - + ctx.putImageData(pixels, 0, 0); }, 16); - } + }; const takePhoto = () => { snap.currentTime = 0; snap.play(); - const data = canvas.toDataURL('image/jpeg'); - const link = document.createElement('a'); - + const data = canvas.toDataURL("image/jpeg"); + const link = document.createElement("a"); + link.href = data; - link.setAttribute('download', 'handsome'); + link.setAttribute("download", "handsome"); link.innerHTML = `Handsome Man`; strip.insertBefore(link, strip.firsChild); - } + }; - const greenScreen = (pixels) => { + const greenScreen = pixels => { const levels = {}; - document.querySelectorAll('.rgb input').forEach((input) => { + document.querySelectorAll(".rgb input").forEach(input => { levels[input.name] = input.value; }); @@ -60,21 +60,22 @@ 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) - { + if ( + red >= levels.rmin && + green >= levels.gmin && + blue >= levels.bmin && + red <= levels.rmax && + green <= levels.gmax && + blue <= levels.bmax + ) { pixels.data[i + 3] = 0; } } return pixels; - } + }; getVideo(); - video.addEventListener('canplay', paintToCanavas); - document.querySelector('.takePhoto').addEventListener('click', takePhoto); -})(); \ No newline at end of file + video.addEventListener("canplay", paintToCanavas); + document.querySelector(".takePhoto").addEventListener("click", takePhoto); +})(); diff --git a/readme.md b/readme.md index 9ab1786..78bede1 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # JavaScript30 - 30 Day JavaScript Challenge Nitish Dayal, Software & Applications Developer -Last Commit Date: April 22, 2017 +Last Commit Date: May 12, 2017 > Course created by [Wes Bos](https://github.com/wesbos) > Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account) From 590a28a24d8cfb3233872cedcfef89220c4d3680 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Fri, 12 May 2017 16:50:24 -0700 Subject: [PATCH 16/18] Format --- exercises/02 - JS + CSS Clock/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/exercises/02 - JS + CSS Clock/README.md b/exercises/02 - JS + CSS Clock/README.md index 9857dbe..a0c442c 100644 --- a/exercises/02 - JS + CSS Clock/README.md +++ b/exercises/02 - JS + CSS Clock/README.md @@ -11,14 +11,14 @@ Given a web page with an analog clock created with CSS, write the The HTML file has 3 `div` elements which correspond with the second, minute, and hour hand on a clock - - ```html - -
-
-
- - ``` + +```html + +
+
+
+ +``` The necessary JavaScript code shouldn't be too crazy; we'll create references to these elements and dynamically @@ -62,7 +62,7 @@ The necessary JavaScript code shouldn't be too crazy; - Divide the current numerical value of the clock hand by it's max possible value to get the rotation as a percentage, then multiply the result of that by 360 (each hand can rotate 360 degrees) to convert - the value from a percentage to an integer, and increase that result by another 90 degrees to compensate + the value from a percentage to an integer, and increase that result by another 90 degrees to compensate for the shift originally applied by the CSS styling on page load. ```javascript From 3220bb6e969279241600d064b20243f39da37b05 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Fri, 12 May 2017 16:59:30 -0700 Subject: [PATCH 17/18] Update Exercise 1 Rewrites should probably start from the beginning --- exercises/01 - JavaScript Drum Kit/index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/exercises/01 - JavaScript Drum Kit/index.html b/exercises/01 - JavaScript Drum Kit/index.html index 1601b97..cc3c007 100644 --- a/exercises/01 - JavaScript Drum Kit/index.html +++ b/exercises/01 - JavaScript Drum Kit/index.html @@ -75,7 +75,10 @@ keyelement.classList.add('playing'); - soundclip.currentTime = 0; + // Ensures that the sound clip always plays from the beginning. Otherwise, + // if the 'a' key is pressed twice rapidly, the soundclip will only play through + // once. + soundclip.currentTime = 0; soundclip.play(); // Play sound } @@ -89,6 +92,9 @@ // Find all elements in the document with a class 'key' const keys = document.querySelectorAll('.key'); + // Listen for any `keydown` events that occur on this browser window instance (this page) + // When a `keydown` event is observered, trigger the `playSound` function, passing in the + // `keydown` event as the argument (e) window.addEventListener('keydown', playSound); keys.forEach(key => From ca5a8693bb140d5026bf7e68de756a0b13a8d602 Mon Sep 17 00:00:00 2001 From: Nitish Dayal Date: Sat, 13 May 2017 05:02:21 -0700 Subject: [PATCH 18/18] Merging current progress from rewrite (#3) * Branch Merging current changes in rewrite into master * I hope this works * arrmethods ARRR MATEY * Exercises 5-7 source refactored 3 more down. I think. * Aaaannd I think #8 is good to go? * exercises 8 + 10 * And anotha one you loyal * Well. I'm done for tonight. Sleep time. --- .vscode/settings.json | 4 + exercises/03 - CSS Variables/README.md | 34 +++++---- exercises/03 - CSS Variables/index.html | 69 ++++++++++------- exercises/04 - Array Cardio Day 1/index.html | 60 ++++++++------- exercises/05 - Flex Panel Gallery/index.html | 32 ++++---- exercises/06 - Type Ahead/index.html | 7 +- exercises/07 - Array Cardio Day 2/index.html | 15 ++-- .../08 - Fun with HTML5 Canvas/index.html | 41 ++++++---- .../index.html | 51 +++++++------ exercises/11 - Custom Video Player/scripts.js | 74 +++++++++++-------- .../12 - Key Sequence Detection/index.html | 12 +-- exercises/13 - Slide in on Scroll/index.html | 16 ++-- .../17 - Sort Without Articles/index.html | 2 +- .../index.html | 8 +- exercises/19 - Webcam Fun/scripts.js | 2 +- exercises/20 - Speech Detection/index.html | 4 +- exercises/21 - Geolocation/index-START.html | 6 +- readme.md | 72 +++++++++--------- 18 files changed, 290 insertions(+), 219 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2183d69 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "angulardoc.repoId": "a547aa17-a9ab-4f77-ba4c-f3167ae617d2", + "angulardoc.lastSync": 0 +} \ No newline at end of file diff --git a/exercises/03 - CSS Variables/README.md b/exercises/03 - CSS Variables/README.md index 101a76f..7a35a35 100644 --- a/exercises/03 - CSS Variables/README.md +++ b/exercises/03 - CSS Variables/README.md @@ -1,10 +1,11 @@ # Exercise 3: CSS Variables + Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me) Last Commit Date: May 12, 2017 The web page provided in this exercise displays an image, and has 3 form inputs from which the user can manipulate the padding, blur amount, and background - color of the image. Update the CSS and write the JavaScript code necessary to + color of the image. Update the CSS and write the JavaScript code necessary to bring functionality to the inputs. ## Guide @@ -24,6 +25,7 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These **Steps:** - CSS: + 1. Declare a new style for the `:root` element and declare three variables inside the style definition for `:root` with the same names as the `input` _HTML elements_. _CSS3 variables_ are declared in the following syntax format: @@ -36,7 +38,8 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These --padding: 10px; } ``` - 2. Declare a new style for the `img` element and set the `background`, `filter`, and + + 1. Declare a new style for the `img` element and set the `background`, `filter`, and `padding` properties to the variables we defined at the root element: ```CSS /* 'var(--variableName)' to use previously defined CSS properties */ @@ -47,21 +50,26 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These padding: var(--padding); } ``` - 3. Declare a new style for the `.hl` class and set the color to the `base` variable. + + 1. Declare a new style for the `.hl` class and set the color to the `base` variable. - JavaScript: + 1. Declare & define a variable as a reference to all of the inputs on the page. - 2. Iterate through the _HTML Node Elements_ that the variable is referencing and - attach _event listeners_ to all of them that will call on an _event handler_ whenever - the input value has been changed. - 3. Repeat step 2, listening for mouse movements on the inputs instead of value - changes. - 4. Define a function that will be used as the _event handler_. This will update - the value of the _CSS3 variable_ **at the document level** corresponding with the - `input` element's `name` property which triggered the event handler. - - Minor 'gotcha': Properties like `padding` and `blur` won't update because + + 1. Iterate through the _HTML Node Elements_ that the variable is referencing and + attach _event listeners_ to each one that will call on an _event handler_ whenever + the input value has been changed (the `change` event). + + 1. Repeat step 2, listening for mouse movements on the inputs instead of value + changes (the `mousemove` event). + + 1. Define a function that will be used as the _event handler_. It will update + the value of the _CSS3 variable_ **at the root document level** corresponding with + the `name` property of the `input` element which called this function. + - Minor 'gotcha': Properties like `padding` and `blur` won't update because the value from the input does not include the type of measurement we are using - ('px', 'em', etc.). The `input` _HTML elements_ also have a `data-*` property if + ('px', 'em', etc.). The `input` _HTML elements_ also have a `data-sizing` property if they require a suffix. We can use this to attach the correct suffix to the value if necessary. diff --git a/exercises/03 - CSS Variables/index.html b/exercises/03 - CSS Variables/index.html index b21e1ab..d422ba0 100644 --- a/exercises/03 - CSS Variables/index.html +++ b/exercises/03 - CSS Variables/index.html @@ -1,29 +1,26 @@ - Scoped CSS Variables and JS - -

Update CSS Variables with JS

@@ -64,26 +60,43 @@

Update CSS Variables with JS

- + - - - \ No newline at end of file + diff --git a/exercises/04 - Array Cardio Day 1/index.html b/exercises/04 - Array Cardio Day 1/index.html index 82b4c22..b7bcaf7 100644 --- a/exercises/04 - Array Cardio Day 1/index.html +++ b/exercises/04 - Array Cardio Day 1/index.html @@ -8,6 +8,7 @@ diff --git a/exercises/05 - Flex Panel Gallery/index.html b/exercises/05 - Flex Panel Gallery/index.html index 7aa0b83..80e4ac1 100644 --- a/exercises/05 - Flex Panel Gallery/index.html +++ b/exercises/05 - Flex Panel Gallery/index.html @@ -1,6 +1,5 @@ - Flex Panels 💪 @@ -27,29 +26,26 @@ .panel1 { background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } - + .panel2 { background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); } - + .panel3 { background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } - + .panel4 { background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } - + .panel5 { background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - - -

Hey

@@ -81,20 +77,18 @@ - - - - - \ No newline at end of file + diff --git a/exercises/06 - Type Ahead/index.html b/exercises/06 - Type Ahead/index.html index a9847cc..5753c51 100644 --- a/exercises/06 - Type Ahead/index.html +++ b/exercises/06 - Type Ahead/index.html @@ -31,10 +31,9 @@ .then(data => cities.push(...data)) // Step 4 - const matchInput = (inputString, cities) => cities.filter((location) => { - const regex = new RegExp(inputString, 'gi'); - return location.city.match(regex) || location.state.match(regex) - }); + const matchInput = (inputString, cities) => cities.filter(({city, state}) => ( + city.match(new RegExp(inputString, 'gi')) || state.match(new RegExp(inputString, 'gi')) + )); // Step 6 const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); diff --git a/exercises/07 - Array Cardio Day 2/index.html b/exercises/07 - Array Cardio Day 2/index.html index a8ee84c..50e4385 100644 --- a/exercises/07 - Array Cardio Day 2/index.html +++ b/exercises/07 - Array Cardio Day 2/index.html @@ -25,32 +25,33 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; + const yr = new Date().getFullYear(); // Some and Every Checks - // Array.prototype.some() + // Array.prototype.some() // is at least one person 19? - const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); + const isAdult = people.some(({year}) => yr - year >= 19); console.log({ isAdult }); // Array.prototype.every() // is everyone 19? - const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); + const allAdults = people.every(({year}) => yr - year >= 19); console.log({ allAdults }); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - const comment = comments.find(comment => comment.id === 823423); + const comment = comments.find(({id}) => id === 823423); console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID 823423 and delete it - const index = comments.findIndex(comment => comment.id === 823423); + const index = comments.findIndex(({id}) => id === 823423); const newComments = [ ...comments.slice(0, index), ...comments.slice(index + 1) ]; - console.log(newComments) + console.table(newComments) - \ No newline at end of file + diff --git a/exercises/08 - Fun with HTML5 Canvas/index.html b/exercises/08 - Fun with HTML5 Canvas/index.html index d54107b..354589f 100644 --- a/exercises/08 - Fun with HTML5 Canvas/index.html +++ b/exercises/08 - Fun with HTML5 Canvas/index.html @@ -15,6 +15,7 @@ - \ No newline at end of file + diff --git a/exercises/10 - Hold Shift and Check Checkboxes/index.html b/exercises/10 - Hold Shift and Check Checkboxes/index.html index 9b2a3ff..27975cb 100644 --- a/exercises/10 - Hold Shift and Check Checkboxes/index.html +++ b/exercises/10 - Hold Shift and Check Checkboxes/index.html @@ -60,7 +60,7 @@
@@ -105,43 +105,52 @@ - \ No newline at end of file + diff --git a/exercises/11 - Custom Video Player/scripts.js b/exercises/11 - Custom Video Player/scripts.js index 5f66391..8ff9f58 100644 --- a/exercises/11 - Custom Video Player/scripts.js +++ b/exercises/11 - Custom Video Player/scripts.js @@ -1,36 +1,50 @@ +"use strict"; (() => { - const player = document.querySelector('.player'), - video = player.querySelector('.viewer'), - progress = player.querySelector('.progress'), - progressBar = player.querySelector('.progress__filled'), - toggle = player.querySelector('.toggle'), - skipButtons = player.querySelectorAll('[data-skip]'), - ranges = player.querySelectorAll('.player__slider') + const player = document.querySelector(".player"), + video = player.querySelector(".viewer"), + progress = player.querySelector(".progress"), + progressBar = player.querySelector(".progress__filled"), + toggle = player.querySelector(".toggle"), + skipButtons = player.querySelectorAll("[data-skip]"), + ranges = player.querySelectorAll(".player__slider"); - let togglePlay = () => video[video.paused ? 'play' : 'pause'](), - updateButton = () => toggle.textContent = video.paused ? '►' : '❚ ❚', - handleProgress = () => progressBar.style.flexBasis = `${(video.currentTime / video.duration) * 100}%`, - scrub = (e) => video.currentTime = ((e.offsetX / progress.offsetWidth) * video.duration) + const togglePlay = () => video[video.paused ? "play" : "pause"](), + updateButton = () => toggle.textContent = video.paused ? "►" : "❚ ❚", + handleProgress = () => + progressBar.style.flexBasis = `${video.currentTime / video.duration * 100}%`, + scrub = e => + video.currentTime = e.offsetX / progress.offsetWidth * video.duration, + progressMoved = e => mousedown && scrub(e), + progressUp = e => mousedown = false, + progressDown = e => mousedown = true, + bClick = b => video.currentTime += parseFloat(b.dataset.skip), + updateRange = (range, e) => video[range.name] = range.value; - video.addEventListener('click', togglePlay) - video.addEventListener('play', updateButton) - video.addEventListener('pause', updateButton) - video.addEventListener('timeupdate', handleProgress) + let mousedown = false; - toggle.addEventListener('click', togglePlay) + const events = [ + { event: "click", handler: togglePlay, target: video }, + { event: "play", handler: updateButton, target: video }, + { event: "pause", handler: updateButton, target: video }, + { event: "timeupdate", handler: handleProgress, target: video }, + { event: "click", handler: togglePlay, target: toggle }, + { event: "click", handler: scrub, target: progress }, + { event: "mousedown", handler: progressDown, target: progress }, + { event: "mousemove", handler: progressMoved, target: progress }, + { event: "mouseup", handler: progressUp, target: progress }, + { event: "click", handler: bClick, target: skipButtons }, + { event: ["change", "mousemove"], handler: updateRange, target: ranges } + ]; - let mousedown = false - progress.addEventListener('click', scrub) - progress.addEventListener('mousemove', (e) => mousedown && scrub(e)) - progress.addEventListener('mousedown', () => mousedown = true) - progress.addEventListener('mouseup', () => mousedown = false) - - skipButtons.forEach(button => { - button.addEventListener('click', () => video.currentTime += parseFloat(button.dataset.skip)) - }) - - ranges.forEach(range => { - range.addEventListener('change', () => video[range.name] = range.value) - range.addEventListener('mousemove', () => video[range.name] = range.value) - }) + events.forEach( + ({ event: e, handler: h, target: t }) => + (t instanceof NodeList + ? t.forEach((el, i) => { + el.addEventListener( + typeof e === "string" ? e : e[i], + typeof h === "function" ? h.bind(null, el) : h[i].bind(null, el) + ); + }) + : t.addEventListener(e, h)) + ); })(); diff --git a/exercises/12 - Key Sequence Detection/index.html b/exercises/12 - Key Sequence Detection/index.html index e9d7a0b..1165a62 100644 --- a/exercises/12 - Key Sequence Detection/index.html +++ b/exercises/12 - Key Sequence Detection/index.html @@ -11,7 +11,8 @@ - \ No newline at end of file + diff --git a/exercises/13 - Slide in on Scroll/index.html b/exercises/13 - Slide in on Scroll/index.html index c872b99..61daf57 100644 --- a/exercises/13 - Slide in on Scroll/index.html +++ b/exercises/13 - Slide in on Scroll/index.html @@ -139,18 +139,20 @@

Slide in on Scroll

(() => { const sliderImages = document.querySelectorAll('.slide-in'); - function debounce(func, wait = 20, immediate = true) { + const debounce = (func, wait = 20, immediate = true) => { let timeout; - return function () { - const context = this, args = arguments; - const later = function () { + + return (...args)=> { + const later = () => { timeout = null; - if (!immediate) func.apply(context, args); + if (!immediate) func.apply(this, args); }; + const callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); - if (callNow) func.apply(context, args); + + if (callNow) func.apply(this, args); }; }; @@ -229,4 +231,4 @@

Slide in on Scroll

- \ No newline at end of file + diff --git a/exercises/17 - Sort Without Articles/index.html b/exercises/17 - Sort Without Articles/index.html index 7274fce..dc54ee2 100644 --- a/exercises/17 - Sort Without Articles/index.html +++ b/exercises/17 - Sort Without Articles/index.html @@ -77,4 +77,4 @@ - \ No newline at end of file + diff --git a/exercises/18 - Adding Up Times with Reduce/index.html b/exercises/18 - Adding Up Times with Reduce/index.html index 6af08d8..673e96c 100644 --- a/exercises/18 - Adding Up Times with Reduce/index.html +++ b/exercises/18 - Adding Up Times with Reduce/index.html @@ -186,7 +186,7 @@ - \ No newline at end of file + diff --git a/exercises/19 - Webcam Fun/scripts.js b/exercises/19 - Webcam Fun/scripts.js index 9fb2230..2ceeed6 100644 --- a/exercises/19 - Webcam Fun/scripts.js +++ b/exercises/19 - Webcam Fun/scripts.js @@ -18,7 +18,7 @@ }; const paintToCanavas = () => { - const width = video.videoWidth, height = video.videoHeight; + const { videoWidth: width, videoHeight: height } = video; canvas.width = width; canvas.height = height; diff --git a/exercises/20 - Speech Detection/index.html b/exercises/20 - Speech Detection/index.html index 86b329b..457ab15 100644 --- a/exercises/20 - Speech Detection/index.html +++ b/exercises/20 - Speech Detection/index.html @@ -23,7 +23,7 @@ recognition.addEventListener('result', e => { const transcript = Array.from(e.results) .map(results => results[0]) - .map(result => result.transcript) + .map(({trascript}) => transcript) .join('') newParagraphElement.textContent = transcript @@ -31,7 +31,7 @@ newParagraphElement = document.createElement('p') words.appendChild(newParagraphElement) } - + }) recognition.addEventListener('end', recognition.start) diff --git a/exercises/21 - Geolocation/index-START.html b/exercises/21 - Geolocation/index-START.html index e3c4677..f51d895 100644 --- a/exercises/21 - Geolocation/index-START.html +++ b/exercises/21 - Geolocation/index-START.html @@ -61,8 +61,10 @@

const speed = document.querySelector('.speed-value'); navigator.geolocation.watchPosition((data) => { - console.info(data); - speed.textContent = data.coords.speed; + console.log(data); + + const { speed: dSpeed, heading } = data.coords; + speed.textContent = dSpeed; arrow.style.transform = `rotate(${data.coords.heading}deg)`; }, (err) => { console.err(err); diff --git a/readme.md b/readme.md index 78bede1..ff699a0 100644 --- a/readme.md +++ b/readme.md @@ -3,7 +3,7 @@ Nitish Dayal, Software & Applications Developer Last Commit Date: May 12, 2017 -> Course created by [Wes Bos](https://github.com/wesbos) +> Course created by [Wes Bos](https://github.com/wesbos) > Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account) This repository contains my written guides for the JavaScript30 course by @@ -22,7 +22,7 @@ This repository contains my written guides for the JavaScript30 course by ## About -Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, etc. +Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, etc. Pacing is totally up to the individual; if you feel like knocking out 30 challenges in 30 minutes, hey, more power to you, but that would miss the point of this course (IMO). The idea behind these exercises is to utilize small amounts of what would regularly be @@ -36,41 +36,41 @@ I think it's fair to say that, coming into this course, you should have a decent a challenge, but given that these exercises require you to work with those very topics time and time again, JavaScript30 is still an excellent learning resource. -The starter files (available [here](https://github.com/wesbos/JavaScript30)) include solutions to - most challenges, so this isn't really meant to be taken as some kind of competition. - JavaScript30 is focused more on helping developers enhance their current skillset and - reducing developer reliance on external JS libraries; **if it can be done with a JS library, +The starter files (available [here](https://github.com/wesbos/JavaScript30)) include solutions to + most challenges, so this isn't really meant to be taken as some kind of competition. + JavaScript30 is focused more on helping developers enhance their current skillset and + reducing developer reliance on external JS libraries; **if it can be done with a JS library, it can (probably) be done with vanilla JS.** ## Table Of Contents -1. [JavaScript Drum Kit](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/01%20-%20JavaScript%20Drum%20Kit) -2. [JS + CSS Clock](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/02%20-%20JS%20%2B%20CSS%20Clock) -3. [CSS Variables](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/03%20-%20CSS%20Variables) -4. [Array Cardio, Day 1](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/04%20-%20Array%20Cardio%20Day%201/) -5. [Flex Panel Gallery](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/05%20-%20Flex%20Panel%20Gallery/) -6. [Type Ahead](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/06%20-%20Type%20Ahead/) -7. [Array Cardio, Day 2](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/07%20-%20Array%20Cardio%20Day%202/) -8. [Fun with HTML5 Canvas](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/08%20-%20Fun%20with%20HTML5%20Canvas/) -9. [Dev Tools Domination](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/09%20-%20DevTools%20Domination/) -10. [Hold Shift and Check Checkboxes](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/) -11. [Custom Video Player](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/11%20-%20Custom%20Video%20Player/) -12. [Key Sequence Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/12%20-%20Key%20Sequence%20Detection/) -13. [Slide in on Scroll](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/13%20-%20Slide%20in%20on%20Scroll/) -14. [JavaScript References vs. Copying](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/14%20-%20JavaScript%20References%20VS%20Copying) -15. [LocalStorage](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/15%20-%20LocalStorage/) -16. [Mouse Move Shadow](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/16%20-%20Mouse%20Move%20Shadow/) -17. [Sort Without Articles](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/17%20-%20Sort%20Without%20Articles/) -18. [Adding Up Times with Reduce](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/18%20-%20Adding%20Up%20Times%20with%20Reduce/) -19. [Webcam Fun](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/19%20-%20Webcam%20Fun/) -20. [Speech Detection](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/20%20-%20Speech%20Detection/) -21. [Geolocation](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/21%20-%20Geolocation/) -22. [Follow Along Link Highlighter](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/22%20-%20Follow%20Along%20Link%20Highlighter/) -23. [Speech Synthesis](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/23%20-%20Speech%20Synthesis/) -24. [Sticky Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/24%20-%20Sticky%20Nav/) -25. [Event Capture, Propagation, Bubbling, and Once](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/) -26. [Stripe Follow Along Nav](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/26%20-%20Stripe%20Follow%20Along%20Nav/) -27. [Click and Drag](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/27%20-%20Click%20and%20Drag/) -28. [Video Speed Controller](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/28%20-%20Video%20Speed%20Controller/) -29. [Countdown Timer](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/29%20-%20Countdown%20Timer/) -30. [Whack A Mole](https://github.com/nitishdayal/JavaScript30/tree/master/exercises/30%20-%20Whack%20A%20Mole/) +1. [JavaScript Drum Kit](/exercises/01%20-%20JavaScript%20Drum%20Kit) +2. [JS + CSS Clock](/exercises/02%20-%20JS%20%2B%20CSS%20Clock) +3. [CSS Variables](/exercises/03%20-%20CSS%20Variables) +4. [Array Cardio, Day 1](/exercises/04%20-%20Array%20Cardio%20Day%201/) +5. [Flex Panel Gallery](/exercises/05%20-%20Flex%20Panel%20Gallery/) +6. [Type Ahead](/exercises/06%20-%20Type%20Ahead/) +7. [Array Cardio, Day 2](/exercises/07%20-%20Array%20Cardio%20Day%202/) +8. [Fun with HTML5 Canvas](/exercises/08%20-%20Fun%20with%20HTML5%20Canvas/) +9. [Dev Tools Domination](/exercises/09%20-%20DevTools%20Domination/) +10. [Hold Shift and Check Checkboxes](/exercises/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/) +11. [Custom Video Player](/exercises/11%20-%20Custom%20Video%20Player/) +12. [Key Sequence Detection](/exercises/12%20-%20Key%20Sequence%20Detection/) +13. [Slide in on Scroll](/exercises/13%20-%20Slide%20in%20on%20Scroll/) +14. [JavaScript References vs. Copying](/exercises/14%20-%20JavaScript%20References%20VS%20Copying) +15. [LocalStorage](/exercises/15%20-%20LocalStorage/) +16. [Mouse Move Shadow](/exercises/16%20-%20Mouse%20Move%20Shadow/) +17. [Sort Without Articles](/exercises/17%20-%20Sort%20Without%20Articles/) +18. [Adding Up Times with Reduce](/exercises/18%20-%20Adding%20Up%20Times%20with%20Reduce/) +19. [Webcam Fun](/exercises/19%20-%20Webcam%20Fun/) +20. [Speech Detection](/exercises/20%20-%20Speech%20Detection/) +21. [Geolocation](/exercises/21%20-%20Geolocation/) +22. [Follow Along Link Highlighter](/exercises/22%20-%20Follow%20Along%20Link%20Highlighter/) +23. [Speech Synthesis](/exercises/23%20-%20Speech%20Synthesis/) +24. [Sticky Nav](/exercises/24%20-%20Sticky%20Nav/) +25. [Event Capture, Propagation, Bubbling, and Once](/exercises/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/) +26. [Stripe Follow Along Nav](/exercises/26%20-%20Stripe%20Follow%20Along%20Nav/) +27. [Click and Drag](/exercises/27%20-%20Click%20and%20Drag/) +28. [Video Speed Controller](/exercises/28%20-%20Video%20Speed%20Controller/) +29. [Countdown Timer](/exercises/29%20-%20Countdown%20Timer/) +30. [Whack A Mole](/exercises/30%20-%20Whack%20A%20Mole/)