diff --git a/01 - JavaScript Drum Kit/drumKit.js b/01 - JavaScript Drum Kit/drumKit.js new file mode 100644 index 0000000000..690721fff7 --- /dev/null +++ b/01 - JavaScript Drum Kit/drumKit.js @@ -0,0 +1,19 @@ +window.addEventListener('keydown', function(e){ + const audio = document.querySelector(`audio[data-key='${e.keyCode}']`); + const key = document.querySelector(`.key[data-key='${e.keyCode}']`); + if(!audio) return; + // console.log(audio); + audio.currentTime = 0; //for rewind + audio.play(); + key.classList.add('playing'); +}); + +function removeTransition(e){ + // console.log(e.propertyName); + if(e.propertyName !== 'transform') return; + // console.log(this); // refers to the key event which it triggered + this.classList.remove('playing'); +} + +const keys = document.querySelectorAll('.key'); +keys.forEach(key => key.addEventListener('transitionend', removeTransition)); \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..feb4b93bcc 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -7,7 +7,6 @@ -
A @@ -57,10 +56,7 @@ - - + diff --git a/01 - JavaScript Drum Kit/learning.txt b/01 - JavaScript Drum Kit/learning.txt new file mode 100644 index 0000000000..85f08ea76c --- /dev/null +++ b/01 - JavaScript Drum Kit/learning.txt @@ -0,0 +1,9 @@ +Things learnt while solving this project + +1: learnt css property transform, translate, skew, scale, rotate. +2: learnt css property box-shadow. +3: DOM KeyEvents AudioEvents and Transistion + +// TODO +1: Build own CSS + diff --git a/02 - JS and CSS Clock/JS_CSS_Clock.js b/02 - JS and CSS Clock/JS_CSS_Clock.js new file mode 100644 index 0000000000..732f256a2a --- /dev/null +++ b/02 - JS and CSS Clock/JS_CSS_Clock.js @@ -0,0 +1,26 @@ +const secondHand = document.querySelector('.second-hand'); +const hourHand = document.querySelector('.hour-hand'); +const minsHand = document.querySelector('.min-hand'); +const glitch = document.querySelector('.fast'); +function setDate(){ + const date = new Date(); + const hour = date.getHours(); + const mins = date.getMinutes(); + const secs = date.getSeconds(); + const secsDeg = ((secs/60)*360)+90; //90 added for the offset we did initially + const minsDeg = ((mins/60)*360)+90; + const hoursDeg = ((hour/12)*360)+90; + + if(secs === 0) + secondHand.classList.add('fast'); + if(secs === 1) + secondHand.classList.remove('fast'); + secondHand.style.transform = `rotate(${secsDeg}deg)`; + minsHand.style.transform = `rotate(${minsDeg}deg)`; + hourHand.style.transform = `rotate(${hoursDeg}deg)`; + + console.log(`hour is ${hour}, mins is ${mins} and secs is ${secs}`); +} + +let myDate = setInterval(setDate,1000); + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..49837330ea 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -11,7 +11,7 @@
-
+
@@ -62,13 +62,30 @@ background: black; position: absolute; top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1,2.7,0.58,1); } - + .hour-hand{ + background-color:red; + } + + .min-hand{ + background-color:blue; + } - + diff --git a/02 - JS and CSS Clock/learning.txt b/02 - JS and CSS Clock/learning.txt new file mode 100644 index 0000000000..7702c37376 --- /dev/null +++ b/02 - JS and CSS Clock/learning.txt @@ -0,0 +1,4 @@ +Things learnt while solving this project +1: transform-origin +2: background cover +3: transition \ No newline at end of file diff --git a/03 - CSS Variables/CSS_Variable.js b/03 - CSS Variables/CSS_Variable.js new file mode 100644 index 0000000000..019b77866a --- /dev/null +++ b/03 - CSS Variables/CSS_Variable.js @@ -0,0 +1,15 @@ +const inputs = document.querySelectorAll('.controls input'); +// console.log(inputs); + +function handleUpdate(){ + const suffix = this.dataset.sizing || ''; + // console.log(suffix); + // console.log(this.name); + // let doc = document.documentElement; + // console.log(doc); + document.documentElement.style.setProperty(`--${this.name}`, this.value+suffix); + // console.log(this.dataset); + +} +inputs.forEach(input => input.addEventListener('change',handleUpdate)); +inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); \ No newline at end of file diff --git a/03 - CSS Variables/CSS_Variables.css b/03 - CSS Variables/CSS_Variables.css new file mode 100644 index 0000000000..035bb5d4e6 --- /dev/null +++ b/03 - CSS Variables/CSS_Variables.css @@ -0,0 +1,32 @@ +:root{ + --base-color:yellow; + --spacing:20px; + --blur:10px; +} + +img{ + padding:var(--spacing); + background-color:var(--base-color); + filter:blur(var(--blur)); +} + +.hl{ + color:var(--base-color); +} + +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +.controls { + margin-bottom: 50px; +} + +input { + width: 100px; +} \ No newline at end of file diff --git a/03 - CSS Variables/Learnt.txt b/03 - CSS Variables/Learnt.txt new file mode 100644 index 0000000000..cd3da359e1 --- /dev/null +++ b/03 - CSS Variables/Learnt.txt @@ -0,0 +1,5 @@ +Things learnt + +1: CSS Variables +2: DocumentElement +3: MouseMove and Change Events \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..c593ccf12f 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,6 +3,7 @@ Codestin Search App +

Update CSS Variables with JS

@@ -15,36 +16,13 @@

Update CSS Variables with JS

- +
- - - diff --git a/04 - Array Cardio Day 1/Array-Cardio.css b/04 - Array Cardio Day 1/Array-Cardio.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/04 - Array Cardio Day 1/Array-Cardio.js b/04 - Array Cardio Day 1/Array-Cardio.js new file mode 100644 index 0000000000..427e45cd68 --- /dev/null +++ b/04 - Array Cardio Day 1/Array-Cardio.js @@ -0,0 +1,100 @@ + +// 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 }, + { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 }, + { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 }, + { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 }, + { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 }, + { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 } +]; + +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 fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year <=1599)); +console.table(fifteen); + +// Array.prototype.map() +// 2. Give us an array of the inventors' first and last names +const firstLast = inventors.map(inventor => `${inventor.first} ${inventor.last}`); +console.table(firstLast); + +// Array.prototype.sort() +// 3. Sort the inventors by birthdate, oldest to youngest +const yearOrder = inventors.sort((a,b) => a.year-b.year); +console.table(yearOrder); + +// Array.prototype.reduce() +// 4. How many years did all the inventors live? +// const reducer = (accumulator, currentValue) => accumulator + currentValue; +// [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { +// return accumulator + currentValue; +// }); + +const lifeSpan = inventors.reduce((accumulator, currentValue) => { + return accumulator + ( currentValue.passed - currentValue.year); +},0); +console.log(lifeSpan); + +// 5. Sort the inventors by years lived +const oldest = inventors.sort((a,b) => (a.passed - a.year) - (b.passed - b.year)); +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 +// const category = document.querySelector('.mw-category'); + +// // const links = category.querySelectorAll('a'); +// //links is nodeList - map can't be used +// //convert links to array +// //method 1 +// // const links = Array.from(category.querySelectorAll('a')); +// // console.log(links); + +// //method 2 +// const links = [...category.querySelectorAll('a')]; +// console.log(links); + + +// const de = links +// .map(link => link.textContent) +// .filter(streetName => streetName.includes('de')); + + +// 7. sort Exercise +// Sort the people alphabetically by last name +const alphabeticallyOrder = people.sort(function(a, b){ + const [aLastName, aFirstName] = a.split(', '); + const [bLastName, bFirstName] = b.split(', '); + // console.log(aLastName, bFirstName); + return aLastName - bLastName; +}); +console.table(alphabeticallyOrder); + +// 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 transSum = data.reduce(function(acc, curVal){ + if(!acc[curVal]) + acc[curVal]=0; + + acc[curVal]++; + return acc; +},{}); + +console.table(transSum); + + \ No newline at end of file diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..d590bdbb55 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -3,57 +3,12 @@ Codestin Search App + +

Psst: have a look at the JavaScript Console 💁

- + + diff --git a/04 - Array Cardio Day 1/learning.txt b/04 - Array Cardio Day 1/learning.txt new file mode 100644 index 0000000000..74b240145a --- /dev/null +++ b/04 - Array Cardio Day 1/learning.txt @@ -0,0 +1,3 @@ +1: hands on with the ES6 Array functions like filter(), map(), reduce(), sort(), spread operator, rest operator, destructure. +2: NodeList to Array conversion +3: console.table - this is just amazing and love it.