From 034d58038d18f0d18720e38e041b535ae31b8d00 Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Mon, 12 Dec 2016 15:34:46 -0500 Subject: [PATCH 01/12] initial commit. Exercise 1 done --- 01 - JavaScript Drum Kit/index-START.html | 4 +--- 01 - JavaScript Drum Kit/js/entry.js | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 01 - JavaScript Drum Kit/js/entry.js diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..ab1aab38a6 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,9 +57,7 @@ - + diff --git a/01 - JavaScript Drum Kit/js/entry.js b/01 - JavaScript Drum Kit/js/entry.js new file mode 100644 index 0000000000..8b624d8f2a --- /dev/null +++ b/01 - JavaScript Drum Kit/js/entry.js @@ -0,0 +1,23 @@ + + +function playSound(e){ + let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + let key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + // console.log(audio); + if(!audio) return; + audio.currentTime = 0; // reset for button spam + audio.play(); + key.classList.add('playing'); +} + +function removeTransition(e){ + if (e.propertyName !== 'transform') return; + this.classList.remove('playing'); + +}; + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // you can watch for css transitions. That's really useful. +window.addEventListener('keydown', playSound); + + From e96db65b4a5048062c020ed50f1f8fe60b45ef7f Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Mon, 12 Dec 2016 16:33:46 -0500 Subject: [PATCH 02/12] 02 done --- 02 - JS + CSS Clock/index-START.html | 23 ++++++++++++++++++++--- 02 - JS + CSS Clock/js/entry.js | 19 +++++++++++++++++++ 2 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 02 - JS + CSS Clock/js/entry.js diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..40e4a95199 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,13 +61,30 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; /* moves origin of skew/ animation along x-axis*/ + transform: rotate(90deg); + transition: all 0.5s; + transition-timing-function: cubic-bezier(0.1,2.7,0.58,1); } - + .hour-hand{ + height: 10px; + width: 40%; + transform-origin: 110%; + } - + diff --git a/02 - JS + CSS Clock/js/entry.js b/02 - JS + CSS Clock/js/entry.js new file mode 100644 index 0000000000..19a46be6cb --- /dev/null +++ b/02 - JS + CSS Clock/js/entry.js @@ -0,0 +1,19 @@ +const secondHand = document.querySelector('.second-hand'); +const hourHand = document.querySelector('.hour-hand'); +const minuteHand = document.querySelector('.min-hand'); + + +function setDate(){ + const now = new Date(); // built into JS. Represents a single moment in time. + const seconds = now.getSeconds(); + const minutes = now.getMinutes(); + const hours = now.getHours(); + const secondsDegrees = ((seconds / 60) * 360) + 90; + const minutesDegrees = ((minutes / 60) * 360) + 90; + const hoursDegrees = ((hours / 12) * 360) + 90; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; + minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; +} + +setInterval(setDate, 1000); \ No newline at end of file From 51a7c04a1e0ca301afa828d1407caf012edd838f Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Tue, 13 Dec 2016 16:31:36 -0500 Subject: [PATCH 03/12] 03 done --- 03 - CSS Variables/index-START.html | 17 +++++++++++++++-- 03 - CSS Variables/js/entry.js | 12 ++++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 03 - CSS Variables/js/entry.js diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..5cad1df02f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,11 +21,25 @@

Update CSS Variables with JS

- + diff --git a/03 - CSS Variables/js/entry.js b/03 - CSS Variables/js/entry.js new file mode 100644 index 0000000000..cee323248a --- /dev/null +++ b/03 - CSS Variables/js/entry.js @@ -0,0 +1,12 @@ +let inputs = document.querySelectorAll('.controls input'); // actually returns a nodelist. Its an array-ish thing. you dont have all the array sugar. +console.log(inputs); + +function handleUpdate(){ + // let component = this; + let suffix = this.dataset.sizing || ''; + // dataset is an obj that contains all the attributes from a particular element. the custom thing in data- + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix) +}; + +inputs.forEach(input => input.addEventListener('change', handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); From 5add70d2fb0ab4c7d0183e38c0ee00317826e2ed Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Thu, 15 Dec 2016 15:43:26 -0500 Subject: [PATCH 04/12] cardio done --- 04 - Array Cardio Day 1/index-START.html | 36 +++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 927fb03540..32f9b06fff 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -32,29 +32,63 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - + let fifteen = inventors.filter(inventor =>(inventor.year >= 1500 && inventor.year < 1600)); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + let firstNameLastName = inventors.map(inventor => inventor.first +" "+ inventor.last); + console.log(firstNameLastName); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + let birthdays = inventors.sort((a,b)=>(a.year > b.year) ? 1 : -1); + console.table(birthdays); // Array.prototype.reduce() // 4. How many years did all the inventors live? + let totalYears = inventors.reduce((total, inventor)=> { + return total + (inventor.passed - inventor.year); + }, 0); // note the zero at the end + console.log(totalYears); + // 5. Sort the inventors by years lived + let oldest = inventors.sort((a,b) => { + let lastPerson = a.passed - a.year; + let nextPerson = b.passed - b.year; + return (lastPerson > nextPerson) ? 1 : -1; + }); + + console.table(oldest); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris // 7. sort Exercise // Sort the people alphabetically by last name + let alphabetically = people.sort((lastOne, nextOne)=>{ + let [aLast, aFirst] = lastOne.split(', '); + let [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; + }); + console.log(alphabetically); // 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' ]; + + let transportation = data.reduce((obj, item)=>{ + if (!obj[item]){ + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + console.log(transportation); + From f50ca271f6a1c39045240cc9b44d6e007a6a99e8 Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Tue, 20 Dec 2016 16:51:56 -0500 Subject: [PATCH 05/12] flex panels done! --- 05 - Flex Panel Gallery/entry.js | 15 ++++ 05 - Flex Panel Gallery/index-START.html | 78 +------------------ 05 - Flex Panel Gallery/style.css | 96 ++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 76 deletions(-) create mode 100644 05 - Flex Panel Gallery/entry.js create mode 100644 05 - Flex Panel Gallery/style.css diff --git a/05 - Flex Panel Gallery/entry.js b/05 - Flex Panel Gallery/entry.js new file mode 100644 index 0000000000..799c4e2e07 --- /dev/null +++ b/05 - Flex Panel Gallery/entry.js @@ -0,0 +1,15 @@ +let panels = document.querySelectorAll('.panel'); +function toggleOpen(){ + this.classList.toggle('open'); +} + +function toggleActive(e){ + + if (e.propertyName.includes('flex')){ + this.classList.toggle('open-active'); + } +} + +panels.forEach(panel => panel.addEventListener('click', toggleOpen)); +panels.forEach(panel => panel.addEventListener('transitionend', + toggleActive)); \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..04dd2ce00a 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -4,80 +4,9 @@ Flex Panels 💪 + - - -

Hey

@@ -105,10 +34,7 @@

Motion

- - + diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..5749db6437 --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,96 @@ +html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.panels { + min-height:100vh; + overflow: hidden; + display: flex; +} + +.panel { + background:#6B0F9C; + box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); + color:white; + text-align: center; + align-items:center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), + background 0.2s; + font-size: 20px; + background-size:cover; + background-position:center; + flex: 1; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + /*evenly distribute among panels*/ +} + + +.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); } + +.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 > *:first-child{ + transform: translateY(-100%); +} +.panel > *:last-child{ + transform: translateY(100%); +} + +.panel.open-active > *:first-child{ + transform: translateY(0); +} +.panel.open-active > *:last-child{ + transform: translateY(0); +} + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} +.panel p:nth-child(2) { + font-size: 4em; +} + +.panel.open { + flex: 5; + /*will consume 5 times the room*/ + font-size:40px; +} + +.cta { + color:white; + text-decoration: none; +} \ No newline at end of file From 530ae87945b93bea8f2c89a9a1de6814f21abadb Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Thu, 22 Dec 2016 16:09:13 -0500 Subject: [PATCH 06/12] typeahead done --- 06 - Type Ahead/entry.js | 35 ++++++++++++++++++++++++++++++++ 06 - Type Ahead/index-START.html | 5 +---- 2 files changed, 36 insertions(+), 4 deletions(-) create mode 100644 06 - Type Ahead/entry.js diff --git a/06 - Type Ahead/entry.js b/06 - Type Ahead/entry.js new file mode 100644 index 0000000000..a21a8cef8e --- /dev/null +++ b/06 - Type Ahead/entry.js @@ -0,0 +1,35 @@ +const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + +let cities = []; + +fetch(endpoint) + .then(blob => blob.json()) + .then(data => cities.push(...data)); + +function findMatches(wordToMatch, cities){ + return cities. filter(place => { + let regex = new RegExp(wordToMatch, 'gi'); + return place.city.match(regex) || place.state.match(regex); + }); +}; + +function displayMatches(){ + const matchArray = findMatches(this.value, cities); + const html = matchArray.map(place => { + let regex = new RegExp(this.value,'gi'); + let cityName = place.city.replace(regex, `${this.value}`); + let stateName = place.state.replace(regex, `${this.value}`); + return ` +
  • + ${cityName}, ${stateName} + ${place.population} +
    • + ` + }).join(''); // the join called because you want it to return a string... joining to a blank string... + suggestions.innerHTML = html; +} + +const searchInput = document.querySelector('.search'); +const suggestions = document.querySelector('.suggestions'); +searchInput.addEventListener('change', displayMatches); +searchInput.addEventListener('keyup', displayMatches); \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..9fbb4602e8 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -14,9 +14,6 @@
  • or a state
    • - + From f01974d1bb26b2dcb42d836bbc5c3d3b1c06714a Mon Sep 17 00:00:00 2001 From: Miguel Bautista Date: Thu, 5 Jan 2017 16:43:09 -0500 Subject: [PATCH 07/12] finished canvas --- 08 - Fun with HTML5 Canvas/entry.js | 50 +++++++++++++++++++++ 08 - Fun with HTML5 Canvas/index-START.html | 3 +- 2 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 08 - Fun with HTML5 Canvas/entry.js diff --git a/08 - Fun with HTML5 Canvas/entry.js b/08 - Fun with HTML5 Canvas/entry.js new file mode 100644 index 0000000000..82105f3562 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/entry.js @@ -0,0 +1,50 @@ +const canvas = document.querySelector('#draw'); +const ctx = canvas.getContext('2d'); +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +ctx.strokeStyle = '#BADA55'; +ctx.lineJoin = 'round'; +ctx.lineCap = 'round'; + +let isDrawing = false; +let lastX = 0; +let lastY = 0; +let hue = 0; +let direction = true; + +function draw(e){ + if (!isDrawing) return; // kills function if not (!) drawing + console.log(e); + ctx.strokeStyle = `hsl(${hue},100%, 50%)` + ctx.beginPath(); + ctx.moveTo(lastX, lastY); + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + lastX = e.offsetX; + lastY = e.offsetY; + hue++; + if(hue >= 360){ + hue = 0; + } + if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1){ + direction = !direction; + } + if (direction){ + ctx.lineWidth++; + } else { + ctx.lineWidth--; + } + +} + +canvas.addEventListener('mousedown', (e)=> { + isDrawing = true; + lastX = e.offsetX; + lastY = e.offsetY; +}); + +canvas.addEventListener('mousemove', draw); +canvas.addEventListener('mouseup', ()=> isDrawing = false); +canvas.addEventListener('mouseout', ()=> isDrawing = false); + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..4af0c37ce9 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -6,8 +6,7 @@ - +