diff --git a/.gitignore b/.gitignore index 164ae8655c..5a2b04f8a0 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ node_modules/ *.log haters/ .idea/ +.vscode \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..544138be45 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index ee7eaefb1f..e61f780290 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -8,10 +8,17 @@
+
-
-
-
+
+
+
+
+
+
+
+
+
@@ -56,19 +63,105 @@ transform: translateY(-3px); /* account for the height of the clock hands */ } + .center { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + width: 12px; + height: 12px; + border-radius: 50%; + background-color: black; + } + + .hand { width:50%; height:6px; - background:black; + /*background:black;*/ position: absolute; top:50%; + transform-origin: 100% center; + } + + .inner { + position: absolute; + top: 0; + right: 0; + height: 100%; + background-color: black; + } + + .hour-hand .inner { + width: 50%; + } + .min-hand .inner { + width: 100%; + } + .second-hand .inner { + width: 100%; + height: 1px; + top: 1px; } + // run the clock indefinitely + const timer = setInterval(() => { + updateClock(hands, getTimeInfo()); + }, 1000); +})(); + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 8a4f0d556e..66fc3b595f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -18,14 +18,10 @@

Update CSS Variables with JS

- + + + (() => { + // ---------------------- + // CONSTANTS + + const $img = document.querySelector('.target'); + const $inputs = { + spacing: document.querySelector('#spacing'), + blur: document.querySelector('#blur'), + base: document.querySelector('#base') + }; + + // ---------------------- + // UTIL FUNCTIONS + + // given an element, a var name, and a value, sets css variable + const applyNewVal = (elem, propName, val) => + elem.style.setProperty(`--${propName}`, val); + + // given a DOM input, gets the input value and css suffix (i.e. px) and calls apply styles + const watchForChanges = e => { + const elem = e.target; + const propName = elem.getAttribute('name'); + const val = elem.value + (elem.getAttribute('data-sizing') || ''); + + applyNewVal($img, propName, val); + }; + + // ---------------------- + // INPUT EVENT BINDING + + for (const i in $inputs) { + $inputs[i].addEventListener('input', watchForChanges); + } +})(); + diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..7757b2bef5 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -7,53 +7,172 @@

Psst: have a look at the JavaScript Console 💁

+// 8. Reduce Exercise +// Sum up the instances of each of these +const data = [ + 'car', + 'car', + 'truck', + 'truck', + 'bike', + 'walk', + 'car', + 'van', + 'bike', + 'walk', + 'car', + 'van', + 'car', + 'truck' +]; + +const reduceSum = (arr, log = true) => { + const result = arr.reduce((acc, d) => { + acc.hasOwnProperty(d) ? (acc[d] = acc[d] + 1) : (acc[d] = 1); + return acc; + }, {}); + if (log) { + console.log('sum of instances: ', result); + } +}; + +// run functions +filterByBirth(inventors); +mapFirstLast(inventors); +sortByBirthdate(inventors); +reduceYearsLived(inventors); +sortByAge(inventors); +filterBlvrd(); +reduceSum(data); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index c6509bed02..3d0f056ad4 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -22,11 +22,27 @@ } .panels { + /* flex content */ + display: flex; + flex-flow: row nowrap; + align-items: stretch; + width: 100%; + /* end flex content */ + min-height:100vh; overflow: hidden; } .panel { + + /* flex content */ + flex: 1 0 0; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 15vh 0; + /* end flex content */ + background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -44,16 +60,23 @@ } - .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } + /*. + old images, wouldnt load + panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/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); } + .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }*/ + .panel1 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1920x1080/12042/gorgeous-clouds-in-the-valley-hdr-1920x1080-wallpaper.jpg); } + .panel2 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1500x1500/15213/original-content-clouds-scenic-skies-skyscapes-1500x1500-wallpaper.jpg); } + .panel3 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1800x1200/16332/green-trees-autumn-wood-bridges-hdr-photography-colors-1800x1200-wallpaper.jpg); } + .panel4 { background-image:url(https://cdn.allwallpaper.in/wallpapers/3008x2000/584/flora-flowers-macro-nature-3008x2000-wallpaper.jpg); } + .panel5 { background-image:url(https://cdn.allwallpaper.in/wallpapers/1920x1080/6533/beaches-evening-landscapes-nature-rocky-1920x1080-wallpaper.jpg); } .panel > * { margin:0; width: 100%; - transition:transform 0.5s; + transition:transform 0.5s, opacity 0.5s; } .panel p { @@ -62,14 +85,32 @@ 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(1) { + /* assignment */ + opacity: 0; + transform: translateY(-30px); + /* assignment end */ + } .panel p:nth-child(2) { font-size: 4em; } + .panel p:nth-child(3) { + /* assignment */ + opacity: 0; + transform: translateY(30px); + /* assignment end */ + } .panel.open { font-size:40px; } + .panel.open p:nth-child(1), + .panel.open p:nth-child(3) { + opacity: 1; + transform: translateY(0); + } + @@ -102,8 +143,22 @@ + const panels = document.querySelectorAll('.panel'); + // console.log(Array.isArray(panels)); + Array.from(panels).map(p => { + p.addEventListener('click', e => { + toggleOpen(p); + }); + }); +})(); + diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..cec804f03c 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -7,16 +7,13 @@ -
+
- + diff --git a/06 - Type Ahead/index.js b/06 - Type Ahead/index.js new file mode 100644 index 0000000000..950314088e --- /dev/null +++ b/06 - Type Ahead/index.js @@ -0,0 +1,48 @@ +const endpoint = + 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + +const cities = []; + +fetch(endpoint) + .then(res => res.json()) + .then(data => cities.push(...data)); + +const $form = document.querySelector('.search-form'); +const $input = document.querySelector('.search'); +const $list = document.querySelector('.suggestions'); + +// utility: given a list and a target string, return any city wher the string is found +// - ignores case +const getMatchingCities = (arr, target) => { + const exp = new RegExp(target, 'gi'); + return arr.filter(c => c.city.match(exp) || c.state.match(exp)); +}; + +// util: given a string and a part to highlight, returns html markup with a highlight class +// - case insensitive +const applyHighlight = (str, target) => { + const exp = new RegExp(target, 'gi'); + return str.replace(exp, '$&'); +}; + +// util: given an object, format the HTML for the output +const getResultMarkup = (obj, target) => { + const hCity = applyHighlight(obj.city, target); + const hState = applyHighlight(obj.state, target); + // ${numberWithCommas(place.population)} + return ` +
  • + ${hCity}, ${hState} +
  • + `; +}; + +const renderResults = (list, target) => + getMatchingCities(list, target) + .map(obj => getResultMarkup(obj, target)) + .join(''); + +$input.addEventListener( + 'keyup', + e => ($list.innerHTML = renderResults(cities, e.target.value)) +); diff --git a/06 - Type Ahead/test.js b/06 - Type Ahead/test.js new file mode 100644 index 0000000000..1432648731 --- /dev/null +++ b/06 - Type Ahead/test.js @@ -0,0 +1,77 @@ +const test = require('tape'); + +// generate generic data +const listFactory = () => ([{ + city: "New York", + growth_from_2000_to_2013: "4.8%", + latitude: 40.7127837, + longitude: -74.0059413, + population: "8405837", + rank: "1", + state: "New York" +}, { + city: "Chicago", + growth_from_2000_to_2013: "-6.1%", + latitude: 41.8781136, + longitude: -87.6297982, + population: "2718782", + rank: "3", + state: "Illinois", +}]); + +// utility: given a list and a target string, return any city wher the string is found +// - ignores case +const getMatchingCities = (arr, target) => { + const exp = new RegExp(target, 'gi'); + return arr.filter( c => c.city.match(exp) || c.state.match(exp)); +} + +test('Case sensitive filtering', assert => { + const list = listFactory(); + const target = 'New'; + + const actual = getMatchingCities(list, target); + + assert.same(actual.length, 1, '...should return a single item'); + assert.same(actual[0].city, 'New York'); + assert.end(); +}); + +test('Case insensitive filtering', assert => { + const list = listFactory(); + const target = 'chi'; + + const actual = getMatchingCities(list, target); + + assert.same(actual.length, 1, '...should return a single item'); + assert.same(actual[0].city, 'Chicago'); + assert.end(); +}); + +// util: given a string and a part to highlight, returns html markup with a highlight class +// - case insensitive +const applyHighlight = (str, target) => { + const exp = new RegExp(target, 'gi'); + return str.replace(exp, '$&'); +} + +test('Highlighting a word (same case)', assert => { + const source = 'New York'; + const target = 'New'; + + const actual = applyHighlight(source, target); + assert.ok(actual.includes('New'), '... should contain unmodified target word'); + assert.ok(actual.includes('span'), '... should include span'); + assert.end(); +}); + +test('Highlighting a word (diff case case)', assert => { + const source = 'New York'; + const target = 'new'; + + const actual = applyHighlight(source, target); + console.log(actual); + assert.ok(actual.includes('New'), '... should contain unmodified target word'); + assert.ok(actual.includes('span'), '... should include span'); + assert.end(); +}); diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..056044e1b2 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -7,35 +7,54 @@

    Psst: have a look at the JavaScript Console 💁

    +console.log(arraySome(people)); +console.log(arrayEvery(people)); +console.log(arrayFind(comments)); +console.log(arrayFindIndex(comments)); + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..d7503f5c96 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,60 @@