diff --git a/01 - JavaScript Drum Kit/day-01.html b/01 - JavaScript Drum Kit/day-01.html new file mode 100644 index 0000000000..449a64735a --- /dev/null +++ b/01 - JavaScript Drum Kit/day-01.html @@ -0,0 +1,63 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/day-01.js b/01 - JavaScript Drum Kit/day-01.js new file mode 100644 index 0000000000..b636a5c9c4 --- /dev/null +++ b/01 - JavaScript Drum Kit/day-01.js @@ -0,0 +1,21 @@ +function removeTransition(e) { + if ( e.propertyName !== 'transform' ) return; // stop if it's not a transform + this.classList.remove('playing'); +}; + +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 if not a key with audio + audio.currentTime = 0; // Rewind to 0 to allow continual play + audio.play(); + key.classList.add('playing'); + +} + +// Initialize +const keys = document.querySelectorAll('.key'); + +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); +window.addEventListener('keydown', playSound); diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..c771dead0d 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,10 +57,9 @@ - + diff --git a/02 - JS + CSS Clock/day-02.html b/02 - JS + CSS Clock/day-02.html new file mode 100644 index 0000000000..25418bc79b --- /dev/null +++ b/02 - JS + CSS Clock/day-02.html @@ -0,0 +1,75 @@ + + + + + Document + + + + +
+
+
+
+
+
+
+ + + + + + + + diff --git a/02 - JS + CSS Clock/day-02.js b/02 - JS + CSS Clock/day-02.js new file mode 100644 index 0000000000..12d866a7d6 --- /dev/null +++ b/02 - JS + CSS Clock/day-02.js @@ -0,0 +1,25 @@ +function dayTwo() { + + const hourHand = document.querySelector('.hour-hand'); + const minuteHand = document.querySelector('.min-hand'); + const secondHand = document.querySelector('.second-hand'); + + // Set the Date + function setDate() { + const date = new Date(); + const hours = date.getHours(); + const minutes = date.getMinutes(); + const seconds = date.getSeconds(); + const hoursDegrees = ((hours / 24) * 360) + 90; + const minutesDegrees = ((minutes / 60) * 360 + 90); + const secondsDegrees = ((seconds / 60) * 360 + 90); + hourHand.style.transform = `rotate(${hoursDegrees}deg)`; + minuteHand.style.transform = `rotate(${minutesDegrees}deg)`; + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + } + + setInterval(setDate, 1000); + +} + +dayTwo(); diff --git a/03 - CSS Variables/day-03.html b/03 - CSS Variables/day-03.html new file mode 100644 index 0000000000..089033918b --- /dev/null +++ b/03 - CSS Variables/day-03.html @@ -0,0 +1,79 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + diff --git a/03 - CSS Variables/day-03.js b/03 - CSS Variables/day-03.js new file mode 100644 index 0000000000..e2b47448e1 --- /dev/null +++ b/03 - CSS Variables/day-03.js @@ -0,0 +1,15 @@ +function dayThree() { + + const inputs = document.querySelectorAll( '.control' ); + + function handleUpdate() { + const suffix = this.dataset.sizing || ''; + document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix); + } + + inputs.forEach( input => input.addEventListener ( 'change', handleUpdate ) ); + inputs.forEach( input => input.addEventListener ( 'mousemove', handleUpdate ) ); + +}; + +dayThree(); diff --git a/04 - Array Cardio Day 1/day-04.html b/04 - Array Cardio Day 1/day-04.html new file mode 100644 index 0000000000..0d5bf2c40d --- /dev/null +++ b/04 - Array Cardio Day 1/day-04.html @@ -0,0 +1,10 @@ + + + + + Array Cardio 💪 + + + + + diff --git a/04 - Array Cardio Day 1/day-04.js b/04 - Array Cardio Day 1/day-04.js new file mode 100644 index 0000000000..ee3e1b06e8 --- /dev/null +++ b/04 - Array Cardio Day 1/day-04.js @@ -0,0 +1,86 @@ +// Get your shorts on - this is an array workout! +// ## Array Cardio Day 1 + +// Some data we can work with + +const inventors = [ + { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, + { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, + { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, + { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, + { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, + { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 }, + { first: 'Max', last: 'Planck', year: 1858, passed: 1947 }, +]; + +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']; + +// Array.prototype.filter() +// 1. Filter the list of inventors for those who were born in the 1500's +const born1500s = inventors.filter( inventor => inventor.year > 1500 && inventor.year < 1600 ); +// console.table(born1500s); + +// Array.prototype.map() +// 2. Give us an array of the inventory first and last names +const fullNames = inventors.map( inventor => `${inventor.first} ${inventor.last}` ); +// console.log(fullNames); + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +// const orderedByAge = inventors.sort( function(a, b) { +// if ( a.year > b.year ) { +// return 1; +// } else { +// return -1; +// } +// }); +const orderedByAge = inventors.sort((a, b) => a.year > b.year ? 1 : -1); +// console.table(orderedByAge); + +// Array.prototype.reduce() +// 4. How many years did all the inventors live? +const totalYears = inventors.reduce( ( total, inventor ) => { + return total + (inventor.passed - inventor.year); +}, 0 ); +// console.log(totalYears); + +// 5. Sort the inventors by years lived +const sortByOldest = inventors.sort( function( a, b ) { + const lastPerson = a.passed - a.year; + const nextPerson = b.passed - b.year; + return lastPerson > nextPerson ? -1 : 1; +}); +// console.table(sortByOldest); + +// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name +// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + +// const boulevards = document.querySelector('.mw-category'); +// const links = Array.from(boulevards.querySelectorAll('a')); +// const de = links +// .map( link => link.textContent ) +// .filter( streetName => streetName.includes('de') ); + +// 7. sort Exercise +// Sort the people alphabetically by last name +const sortAlphabetically = people.sort( (lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; +}); +// console.table(sortAlphabetically); + +// 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 transportation = data.reduce( function( obj, item ) { + if (!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; +}, {}); +console.log(transportation); diff --git a/05 - Flex Panel Gallery/day-05.html b/05 - Flex Panel Gallery/day-05.html new file mode 100644 index 0000000000..2abe9181aa --- /dev/null +++ b/05 - Flex Panel Gallery/day-05.html @@ -0,0 +1,129 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + diff --git a/05 - Flex Panel Gallery/day-05.js b/05 - Flex Panel Gallery/day-05.js new file mode 100644 index 0000000000..47191ac981 --- /dev/null +++ b/05 - Flex Panel Gallery/day-05.js @@ -0,0 +1,23 @@ +function day05() { + + const panels = document.querySelectorAll('.panel'); + + function toggleOpen() { + this.classList.toggle('open'); + console.clear(); + console.log(panels); + } + + function toggleActive(e) { + console.log(e.propertyName); // Keeping this so I remember to use it + if (e.propertyName.includes('flex')) { + this.classList.toggle('open-active'); + } + } + + panels.forEach(panel => panel.addEventListener('click', toggleOpen)); + panels.forEach(panel => panel.addEventListener('transitionend', toggleActive)); + +}; + +day05(); diff --git a/06 - Type Ahead/day-06.html b/06 - Type Ahead/day-06.html new file mode 100644 index 0000000000..d385fc5ba0 --- /dev/null +++ b/06 - Type Ahead/day-06.html @@ -0,0 +1,19 @@ + + + + + Type Ahead 👀 + + + + +
+ + +
+ + + diff --git a/06 - Type Ahead/day-06.js b/06 - Type Ahead/day-06.js new file mode 100644 index 0000000000..549c76869e --- /dev/null +++ b/06 - Type Ahead/day-06.js @@ -0,0 +1,46 @@ +// Get the data +const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; + +// Create an empty array for the cities +const cities = []; + +// Promises return as a promise +// const prom = fetch(endpoint); +// console.clear(); +// console.log(prom); + +fetch(endpoint) + .then(blob => blob.json()) + .then(data => cities.push(...data)) + +function findMatches(wordToMatch, cities) { + return cities.filter(place => { + const regex = new RegExp(wordToMatch, 'gi'); + return place.city.match(regex) || place.state.match(regex); + }); +} + +function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); +} + +function displayMatches() { + const matchArray = findMatches(this.value, cities); + const html = matchArray.map(place => { + const regex = new RegExp(this.value, 'gi'); + const cityName = place.city.replace(regex, `${this.value}`); + const stateName = place.state.replace(regex, `${this.value}`); + return ` +
  • + ${cityName}, ${stateName} + ${numberWithCommas(place.population)} +
    • + `; + }).join(''); + suggestions.innerHTML = html; +} + +const searchInput = document.querySelector('.search'); +const suggestions = document.querySelector('.suggestions'); + + searchInput.addEventListener('input', displayMatches); diff --git a/07 - Array Cardio Day 2/day-07.html b/07 - Array Cardio Day 2/day-07.html new file mode 100644 index 0000000000..5d55e99590 --- /dev/null +++ b/07 - Array Cardio Day 2/day-07.html @@ -0,0 +1,13 @@ + + + + + Document + + + + + diff --git a/07 - Array Cardio Day 2/day-07.js b/07 - Array Cardio Day 2/day-07.js new file mode 100644 index 0000000000..62fa9ab146 --- /dev/null +++ b/07 - Array Cardio Day 2/day-07.js @@ -0,0 +1,55 @@ +// ## Array Cardio Day 2 + +const people = [ + { name: 'Wes', year: 1988 }, + { name: 'Kait', year: 1986 }, + { name: 'Irv', year: 1970 }, + { name: 'Lux', year: 2015 }, +]; + +const comments = [ + { text: 'Love this!', id: 523423 }, + { text: 'Super good', id: 823423 }, + { text: 'You are the best', id: 2039842 }, + { text: 'Ramen in my fav food ever', id: 123523 }, + { text: 'Nice Nice Nice!', id: 542328 } +]; + +// 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 => ((new Date()).getFullYear()) - 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(comment => comment.id === 823423); + +console.log(comment); + +// Array.prototype.findIndex() +// Find the comment with this ID +// delete the comment with the ID of 823423 +const index = comments.findIndex(comment => comment.id === 823423); +console.log(index); + +// comments.splice(index, 1); + +const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1) +]; diff --git a/08 - Fun with HTML5 Canavsa/day-08.html b/08 - Fun with HTML5 Canavsa/day-08.html new file mode 100644 index 0000000000..281cdca5eb --- /dev/null +++ b/08 - Fun with HTML5 Canavsa/day-08.html @@ -0,0 +1,19 @@ + + + + + HTML5 Canvas + + + + + + + + + diff --git a/08 - Fun with HTML5 Canavsa/day-08.js b/08 - Fun with HTML5 Canavsa/day-08.js new file mode 100644 index 0000000000..eda50fb6c8 --- /dev/null +++ b/08 - Fun with HTML5 Canavsa/day-08.js @@ -0,0 +1,49 @@ +const canvas = document.querySelector('#draw'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; +ctx.strokeStyle = '#b51f24'; +ctx.lineJoin = 'round'; +ctx.lineCap = 'round'; +ctx.lineWidth = 50; + +let isDrawing = false; +let lastX = 0; +let lastY = 0; +let hue = 0; +let direction = true; + +function draw(e) { + if(!isDrawing) return; { // stop when not moused down + console.log(e); + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + ctx.moveTo(lastX, lastY); + ctx.lineTo(e.offsetX, e.offsetY); + ctx.stroke(); + [lastX, lastY] = [e.offsetX, 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('mousemove', draw); +canvas.addEventListener('mousedown', (e)=> { + isDrawing = true; + [lastX, lastY] = [e.offsetX, e.offsetY]; +}); +canvas.addEventListener('mouseup', ()=> isDrawing = false); +canvas.addEventListener('mouseout', ()=> isDrawing = false); diff --git a/10 - Hold Shift and Check Checkboxes/day-10.html b/10 - Hold Shift and Check Checkboxes/day-10.html new file mode 100644 index 0000000000..f868873e36 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/day-10.html @@ -0,0 +1,109 @@ + + + + + Document + + + + +
    +
    + +

    This is an inbox layout.

    +
    +
    + +

    Check one item

    +
    +
    + +

    Hold down your Shift key

    +
    +
    + +

    Check a lower item

    +
    +
    + +

    Everything inbetween should also be set to checked

    +
    +
    + +

    Try do it with out any libraries

    +
    +
    + +

    Just regular JavaScript

    +
    +
    + +

    Good Luck!

    +
    +
    + +

    Don't forget to tweet your result!

    +
    +
    + + + + + diff --git a/10 - Hold Shift and Check Checkboxes/day-10.js b/10 - Hold Shift and Check Checkboxes/day-10.js new file mode 100644 index 0000000000..94827d2fff --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/day-10.js @@ -0,0 +1,41 @@ +function selectAll () { + + // Private variables + const checkboxes = document.querySelectorAll('input[type="checkbox"]'); + let lastChecked; + + // Add event listeners + checkboxes.forEach( checkbox => checkbox.addEventListener ('click', handleCheck) ); + + // Handle check + function handleCheck (e) { + + // If they had the shift key down + // And if they are checking it + if ( e.shiftKey && this.checked ) { + + let inBetween = false; + + // loop over all checkboxes + checkboxes.forEach ( checkbox => { + + // True starts at first or last checked + // Flips inBetween to to true until first or last checked + if ( checkbox === this || checkbox === lastChecked ) { + inBetween = !inBetween; + } + + // Checks the boxes that have been flipped to true + if ( inBetween ) { + checkbox.checked = true; + } + + }); + } + + lastChecked = this; + } + +} + +selectAll(); diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..028e356770 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,60 @@ +// ************************************* +// +// Custom Video Player +// -> Description +// +// ************************************* + +function customVideoPlayer() { + + // ------------------------------------- + // Private Variables + // ------------------------------------- + + const player = document.querySelector('.player'); + const video = player.querySelector('.viewer'); + const playToggle = player.querySelector('.toggle'); + const ranges = player.querySelectorAll('.player__slider'); + + // ------------------------------------- + // Set Event Handlers + // ------------------------------------- + + video.addEventListener('click', togglePlay); + playToggle.addEventListener('click', togglePlay); + video.addEventListener('play', updateButton); + video.addEventListener('pause', updateButton); + ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); + ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); + + // ------------------------------------- + // Functions + // ------------------------------------- + + function togglePlay () { + + if (video.paused) { + video.play(); + } else { + video.pause(); + } + + } + + function updateButton () { + const icon = this.paused ? '►' : '❚ ❚'; + console.log(icon); + playToggle.textContent = icon; + } + + function handleRangeUpdate () { + video[this.name] = this.value; + } + +} + +// ------------------------------------- +// Initialize +// ------------------------------------- + +customVideoPlayer(); diff --git a/12 - Key Sequence Detection/day-12.html b/12 - Key Sequence Detection/day-12.html new file mode 100644 index 0000000000..458ef7f3bd --- /dev/null +++ b/12 - Key Sequence Detection/day-12.html @@ -0,0 +1,12 @@ + + + + + Key Detection + + + + + + diff --git a/12 - Key Sequence Detection/day-12.js b/12 - Key Sequence Detection/day-12.js new file mode 100644 index 0000000000..1220179de6 --- /dev/null +++ b/12 - Key Sequence Detection/day-12.js @@ -0,0 +1,16 @@ +// Arrays +const pressed = []; +const secretCode = 'boom'; + +// Listen for keystrokes +window.addEventListener('keyup', (e) => { + + console.log(e.pressed); + + pressed.push(e.key); + pressed.splice(-secretCode.length -1, pressed.length - secretCode.length); + if(pressed.join('').includes(secretCode)) { + console.log('BOOM!'); + cornify_add(); + } +});