JS Drum Kit

A - clap + clap

S - hihat + hihat

D - kick + kick

F - openhat + openhat

G - boom + boom

H - ride + ride

J - snare + snare

K - tom + tom

L - tink + tink

From 4c40efdfbbaa1533865c78c616cb2c5d7c8d88c0 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 17:44:01 -0500 Subject: [PATCH 02/63] Using ES6, searching the doc for any audio element that matches the event keycode, then print that audio element --- 01 - JavaScript Drum Kit/index-START.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 2fa498d732..437bba7dcb 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -47,6 +47,7 @@

@@ -59,7 +60,9 @@ From 942cae15aa8f8d0d524d9d2a417c41f610632744 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 17:47:50 -0500 Subject: [PATCH 03/63] if the data-key doesn't match the event keycode, we exit the function, otherwise the audio will play --- 01 - JavaScript Drum Kit/index-START.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 437bba7dcb..66be6ddda9 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -61,8 +61,8 @@ From 44c6c43294521aeaa85ff94e31b4cd6be20ee97c Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 17:52:16 -0500 Subject: [PATCH 04/63] added a rewind functionality so when a a key is pressed it will start playing that right away, rather than ignoring the waiting for the audio to finish playing --- 01 - JavaScript Drum Kit/index-START.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 66be6ddda9..bb110f5f2b 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -62,7 +62,9 @@ window.addEventListener('keydown', function (e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); if(!audio) return; //stop fn from running any further - audio.play(); + audio.currentTime = 0; //allows audio to rewind to the beginning + audio.play(); //if audio element is already playing, it will ignore + }); From 21bf6d66750f0e1c65301b5c81edf016050fc77b Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:04:46 -0500 Subject: [PATCH 05/63] now printing out the elements matching the slected keyCode --- 01 - JavaScript Drum Kit/index-START.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index bb110f5f2b..46f5be1ac3 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -61,10 +61,12 @@ From 240d7c7d25e977f2f7c77d4e6e7267f8fec44bc7 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:06:56 -0500 Subject: [PATCH 06/63] styling was already added, adding a class name of playing so css styles will show when key is pressed --- 01 - JavaScript Drum Kit/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 46f5be1ac3..54444655f3 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -65,6 +65,7 @@ if(!audio) return; //stop fn from running any further audio.currentTime = 0; //allows audio to rewind to the beginning audio.play(); //if audio element is playing, it will ignore the same event + key.classList.add('playing'); console.log(audio); console.log(key); }); From 01a824f121f8702b403cbd7a7455959eb6c2ca72 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:24:49 -0500 Subject: [PATCH 07/63] remove class styling for playing when transition is complete --- 01 - JavaScript Drum Kit/index-START.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 54444655f3..57ac56810e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -66,9 +66,17 @@ audio.currentTime = 0; //allows audio to rewind to the beginning audio.play(); //if audio element is playing, it will ignore the same event key.classList.add('playing'); - console.log(audio); - console.log(key); }); + + function removeTransition(e) { + if(e.propertyName !== 'transform') return; //skip if not a transform + this.classList.remove('playing'); + } + + const keys = document.querySelectorAll('.key'); //array of all keys w/class name of key + //b.c keys is an array, must attach transitionend eventlistener to each key + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + From ac8fab71c35264df23421cfd339a5b2a3c2ff31d Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:39:41 -0500 Subject: [PATCH 08/63] structured code with dot blocks to explain purpose of functions --- 01 - JavaScript Drum Kit/index-START.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 57ac56810e..fd20ffaaad 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,17 +59,27 @@

From eb12620052c9231bb4cfb05aabcb265d1d05d757 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:43:56 -0500 Subject: [PATCH 09/63] cleaning up code and cleaning notes --- 01 - JavaScript Drum Kit/index-START.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index fd20ffaaad..5042cce23a 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -67,7 +67,8 @@ function playsound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); - if(!audio) return; //stop fn from running any further + if(!audio) return; //stops fn from running any further + audio.currentTime = 0; //allows audio to rewind to the beginning audio.play(); //if audio element is playing, it will ignore the same event key.classList.add('playing'); @@ -83,10 +84,12 @@ this.classList.remove('playing'); } - const keys = document.querySelectorAll('.key'); //array of all keys w/class name of key - //b.c keys is an array, must attach transitionend eventlistener to each key + /* + * keys is an array of all keys w/the classname of 'key'; since keys is + * an array, a transitionend eventlistener must be attached to each key + */ + const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('transitionend', removeTransition)); - window.addEventListener('keydown', playsound); From 73fb2ad6b10e2623046003aa0cf081269552592a Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:46:38 -0500 Subject: [PATCH 10/63] updated readme to reflect that this is my work for the challenge --- readme.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 5a1eaa18c8..3edae97a70 100644 --- a/readme.md +++ b/readme.md @@ -1,8 +1,10 @@ +### **My work for the Javascript 30 Day Vanilla JS Code Challenge** + ![](https://javascript30.com/images/JS3-social-share.png) # JavaScript30 -Starter Files + Completed solutions for the JavaScript 30 Day Challenge. +Starter Files + Completed solutions for the JavaScript 30 Day Challenge. Grab the course at [https://JavaScript30.com](https://JavaScript30.com) @@ -10,8 +12,8 @@ Text-based guides (unofficial) for the challenges can be found here - [Text Guid ## Pull Requests -These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. +These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. -The starter files + solutions will be updated if/when the videos are updated. +The starter files + solutions will be updated if/when the videos are updated. Thanks! From ea4f4e50e4849ad06237c3c5bb1b3726e2436bc7 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 16 Dec 2016 18:47:49 -0500 Subject: [PATCH 11/63] add italic note --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 3edae97a70..6255077cc2 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -### **My work for the Javascript 30 Day Vanilla JS Code Challenge** +***My work for the Javascript 30 Day Vanilla JS Code Challenge*** ![](https://javascript30.com/images/JS3-social-share.png) From 49b8fafc0d45de7cff7886aa1f2c806486a0b65c Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 18:36:26 -0500 Subject: [PATCH 12/63] all double quotes changed to single for preference and consistency --- 02 - JS + CSS Clock/index-START.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..b58762bf93 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,17 +1,17 @@ - + - + JS + CSS Clock -

From cada3abc1699d4bad0b51e58b2f3e483971c9ec3 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 18:59:36 -0500 Subject: [PATCH 13/63] added rule to make the rotation fo the hands at the center of the clock --- 02 - JS + CSS Clock/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index b58762bf93..3c08f69c8b 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,6 +61,7 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; /* Allows rotation of hands to be in the middle */ } From 404d83375050eb8c55556a1ca9be5b075c007005 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 19:00:18 -0500 Subject: [PATCH 14/63] added rule to make the default start point of hands at 12 o'clock --- 02 - JS + CSS Clock/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 3c08f69c8b..5ab92f8443 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -62,6 +62,7 @@ position: absolute; top:50%; transform-origin: 100%; /* Allows rotation of hands to be in the middle */ + transform: rotate(90deg); /* Allows hands to start at 12 o'clock */ } From bf28a0dd6aa358446d55c144c42a3c7353cc763e Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 19:01:57 -0500 Subject: [PATCH 15/63] added a rule to allow hand to move every second --- 02 - JS + CSS Clock/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 5ab92f8443..78fe007c8c 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -63,6 +63,7 @@ top:50%; transform-origin: 100%; /* Allows rotation of hands to be in the middle */ transform: rotate(90deg); /* Allows hands to start at 12 o'clock */ + transition: all 0.5s; } From 1f1b5a425aa43596a0d104176aa4245990ab4ad9 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 19:03:16 -0500 Subject: [PATCH 16/63] added a rule to give a 'snap' like feature when hands tick --- 02 - JS + CSS Clock/index-START.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 78fe007c8c..2a8568303d 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -63,7 +63,8 @@ top:50%; transform-origin: 100%; /* Allows rotation of hands to be in the middle */ transform: rotate(90deg); /* Allows hands to start at 12 o'clock */ - transition: all 0.5s; + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } From b7f14d389e5203e27e9d12273652e2dd8ecf4d89 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 19:06:40 -0500 Subject: [PATCH 17/63] added the function that will run every second, eventually to make hand move --- 02 - JS + CSS Clock/index-START.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2a8568303d..fbfae91fa6 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -65,12 +65,19 @@ transform: rotate(90deg); /* Allows hands to start at 12 o'clock */ transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + /* Adds a tick like feature when hands move */ } From cb76584fc83f9e7f3bef458174cebfc6acde749c Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Mon, 19 Dec 2016 19:14:00 -0500 Subject: [PATCH 18/63] added a way to track seconds --- 02 - JS + CSS Clock/index-START.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index fbfae91fa6..4700e28464 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -73,7 +73,9 @@ From 6b2faecc49c49fffa1ae46a5a4ca52da2609495f Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Wed, 4 Jan 2017 16:09:48 -0500 Subject: [PATCH 29/63] testing the function to link input changes --- 03 - CSS Variables/index-START.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca679c328f..37fab7c4f7 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -65,7 +65,13 @@

Update CSS Variables with JS

From ed35b9ea7e3e906d7519e5ae79e5f1d06ad5547d Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Wed, 4 Jan 2017 16:39:07 -0500 Subject: [PATCH 30/63] image blur, border/spacing, and color linked with change in bar --- 03 - CSS Variables/index-START.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 37fab7c4f7..3e2d5d3209 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -68,10 +68,13 @@

Update CSS Variables with JS

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

From 032464492e2281c79c22ebc4bb3b29d31f810fd9 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 17 Jan 2017 16:38:41 -0500 Subject: [PATCH 37/63] made each child element in the center of their respective positions --- 05 - Flex Panel Gallery/index-START.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 480bbd81c1..f8f09dc9dd 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; /* means to distribute extra space evenly among each panel*/ + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -50,10 +56,16 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } + /* Flex Items */ .panel > * { margin:0; width: 100%; transition:transform 0.5s; + border: 1px solid red; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; } .panel p { From 6d7ff73036ac53d5d1ec31aede09c6e9962ff443 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 17 Jan 2017 16:47:24 -0500 Subject: [PATCH 38/63] added styling to make first and last words appear with class name of open-active --- 05 - Flex Panel Gallery/index-START.html | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index f8f09dc9dd..b6704f2102 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -56,7 +56,7 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - /* Flex Items */ + /* Flex Items (the words) */ .panel > * { margin:0; width: 100%; @@ -68,6 +68,22 @@ align-items: center; } + /* The first word in each column */ + .panel > *:first-child { + transform: translateY(-100%); + } + .panel.open-active > *:first-child { + transform: translateY(0); + } + + /* The first word in each column */ + .panel > *:last-child { + transform: translateY(100%); + } + .panel.open-active > *:last-child { + transform: translateY(0); + } + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; From e1c905b9a4198cd834b64f5e65e0913992f27a20 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 17 Jan 2017 16:50:43 -0500 Subject: [PATCH 39/63] removed border, it was there just for visual understanding, added flex 5 to make specified panel increase in size when it is given a classname of open --- 05 - Flex Panel Gallery/index-START.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index b6704f2102..a937c8ad1f 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -61,7 +61,6 @@ margin:0; width: 100%; transition:transform 0.5s; - border: 1px solid red; flex: 1 0 auto; display: flex; justify-content: center; @@ -95,6 +94,7 @@ } .panel.open { + flex: 5; /* Takes up 5 times more space than other panels */ font-size:40px; } From 0120a405279109bc4abe5fbcd37f1037562dc49b Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 17 Jan 2017 17:02:52 -0500 Subject: [PATCH 40/63] added functions to toggle classnames when panel is clicked, used a transitionend so that right after panel is clicked the panel words will also display --- 05 - Flex Panel Gallery/index-START.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index a937c8ad1f..ee91e6e44a 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -136,6 +136,21 @@ From 98552e50a1fe18ade3f826d8c1adc974fcf72f40 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 17 Jan 2017 17:04:16 -0500 Subject: [PATCH 41/63] double quotes changed to single for consistency --- 06 - Type Ahead/index-START.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..8eac911210 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,15 +1,15 @@ - + - + Type Ahead 👀 - + - From dcf956c7d7973a7ee875252bc260e0ee114a89fd Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Thu, 19 Jan 2017 16:02:08 -0500 Subject: [PATCH 43/63] results are displayed below input field --- 06 - Type Ahead/index-START.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 4ec8ba13ec..4ffa462eec 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -38,7 +38,24 @@ }); } + function displayMatches() { + const matchArray = findMatches(this.value, cities); + const html = matchArray.map(place => { + return ` +

+ ${place.city}, ${place.state} + ${place.population} +

+ `; + }).join(''); //join turns the seperate lines into a single string. + suggestions.innerHTML = html; + } + + const searchInput = document.querySelector('.search'); + const suggestions = document.querySelector('.suggestions'); + searchInput.addEventListener('change', displayMatches); //results once you go off input + searchInput.addEventListener('keyup', displayMatches); //results as each key is pressed From 9c53c6bb98891966b0f2ea4a502773a06d22a2ad Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Thu, 19 Jan 2017 16:13:10 -0500 Subject: [PATCH 44/63] highlight state and/or city that matches the word inputted, and added commas between numbers in population for readability --- 06 - Type Ahead/index-START.html | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 4ffa462eec..5dbb2a261b 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -38,13 +38,29 @@ }); } + /** + * Regex function to add commas to number. + * @param {String} x the number + * @return {String} string with commas between numbers + */ + function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + } + + /** + * displays results for input of matching city/state + * @return {Array} results + */ function displayMatches() { const matchArray = findMatches(this.value, cities); const html = matchArray.map(place => { + const regex = new RegExp(this.value, 'gi'); + const cityName = place.city.replace(regex, `${this.value}`); + const stateName = place.state.replace(regex, `${this.value}`); return `

- ${place.city}, ${place.state} - ${place.population} + ${cityName}, ${stateName} + ${numberWithCommas(place.population)}

`; }).join(''); //join turns the seperate lines into a single string. From 02c17f0eab896d82083c7f761dddb2d51f6f6f72 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Thu, 19 Jan 2017 16:15:17 -0500 Subject: [PATCH 45/63] all double quotes changed to single for readability --- 07 - Array Cardio Day 2/index-START.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..2e82c0a9c1 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,7 +1,7 @@ - + - + Array Cardio 💪💪 From 1caabaa326a9abf2d169114671ca3b91e2ca32df Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 20 Jan 2017 17:34:31 -0500 Subject: [PATCH 46/63] practiced some array methods --- 07 - Array Cardio Day 2/index-START.html | 39 ++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 2e82c0a9c1..bef1ae287a 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -24,17 +24,52 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; - // Some and Every Checks + // SOME AND EVERY CHECKS // Array.prototype.some() // is at least one person 19? + /* + const isAdult = people.some(function(person) { + const currentYear = (new Date()).getFullYear(); + if(currentYear - person.year >= 19) { + return true; + } + }); + */ + const isAdult = people.some(person => { + const currentYear = (new Date()).getFullYear(); + return currentYear - person.year >= 19; + }); + + console.log({isAdult}); + // Array.prototype.every() // is everyone 19? + const allAdults = people.every(person => + ((new Date()).getFullYear()) - person.year >= 19); + console.log({allAdults}); // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 - + /* + const comment = comments.find(function(comment) { + if(comment.id === 823423) { + return true; + } + }); + */ + const comment = comments.find(comment => comment.id === 823423); + console.log(comment); // Array.prototype.findIndex() // Find the comment with this ID + const index = comments.findIndex(comment => comment.id === 823423); + console.log(index); // delete the comment with the ID of 823423 + // comments.splice(index, 1); OR + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) + ] + console.table(comments); + console.table(newComments); From f8b48406734403e7d70779ca79031b8f378f28f1 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Fri, 20 Jan 2017 17:35:54 -0500 Subject: [PATCH 47/63] double quotes to single for readability --- 08 - Fun with HTML5 Canvas/index-START.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..3c6e2c2bdd 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,11 +1,11 @@ - + - + HTML5 Canvas -

From c9391637fad42aa2672d08abc12208207bc66985 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 24 Jan 2017 18:07:59 -0500 Subject: [PATCH 48/63] setting up canvas area --- 08 - Fun with HTML5 Canvas/index-START.html | 26 ++++++++++++++------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 3c6e2c2bdd..ad10d49492 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -5,15 +5,25 @@ HTML5 Canvas -

- +

- + + + + From 1ab64b7831c415cdd158efea390a44b10204b0f9 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 24 Jan 2017 18:08:34 -0500 Subject: [PATCH 49/63] setting up canvas area --- 08 - Fun with HTML5 Canvas/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index ad10d49492..e0f8ed2835 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -16,6 +16,7 @@ //allows canvas to resize to window height canvas.width = window.innerWidth; canvas.height = window.innerHeight; + From e94220a6f9284ecc2545a8942e48d7a0bdbc5f63 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 24 Jan 2017 18:16:51 -0500 Subject: [PATCH 50/63] setting up function with variables associated with the drawing --- 08 - Fun with HTML5 Canvas/index-START.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index e0f8ed2835..c75183b1dc 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -16,7 +16,21 @@ //allows canvas to resize to window height canvas.width = window.innerWidth; canvas.height = window.innerHeight; - + ctx.strokeStyle = '#BADA55'; //color + ctx.lineJoin = 'round'; + ctx.lineCap = 'round'; + + let isDrawing = false; + + // where line starts and then later ends + let lastX = 0; + let lastY = 0; + + function draw(e) { + console.log(e); + } + + canvas.addEventListener('mousemove', draw); From 20bfdaff167217c2d3e2466617b44ae1fba80cc0 Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 24 Jan 2017 18:20:26 -0500 Subject: [PATCH 51/63] function will only run if mouse is down/drawing --- 08 - Fun with HTML5 Canvas/index-START.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index c75183b1dc..ad89e4b586 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -27,10 +27,16 @@ let lastY = 0; function draw(e) { + if (!isDrawing) return; // stop function from proceeding if not mousedown console.log(e); } canvas.addEventListener('mousemove', draw); + canvas.addEventListener('mousedown', () => isDrawing = true); + canvas.addEventListener('mouseup', () => isDrawing = false); + canvas.addEventListener('mouseout', () => isDrawing = false); + + From 0754ddf61693d642ca498a2c334765bc50ae56bd Mon Sep 17 00:00:00 2001 From: Samina Chhatwal Date: Tue, 24 Jan 2017 18:38:53 -0500 Subject: [PATCH 52/63] using es6 to set lastX and lastY to e.offsetX and e.offsetY --- 08 - Fun with HTML5 Canvas/index-START.html | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index ad89e4b586..275eca25b9 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -29,15 +29,22 @@ function draw(e) { if (!isDrawing) return; // stop function from proceeding if not mousedown console.log(e); + ctx.beginPath(); + //starting from + ctx.moveTo(lastX, lastY); + // going to + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, e.offsetY]; + } - canvas.addEventListener('mousemove', draw); canvas.addEventListener('mousedown', () => isDrawing = true); + + canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', () => isDrawing = false); canvas.addEventListener('mouseout', () => isDrawing = false); - -