diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..764d873a69 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,28 @@ diff --git a/01 - JavaScript Drum Kit/learnings.html b/01 - JavaScript Drum Kit/learnings.html new file mode 100644 index 0000000000..6ec2c3f887 --- /dev/null +++ b/01 - JavaScript Drum Kit/learnings.html @@ -0,0 +1,38 @@ + + + + + Learnings from Drum Machine + + + +

Reflecting on the things I have learnt from this short exercise:

+

Thoughts:

+

I realized that there is so much more depth to JavaScript; so many things that I do not know about or am not familiar with. This is going to be my motivation to learn more about JavaScript and ES6 (template literals seem really useful)! Though I find JavaScript to be slightly tough, I believe that with more time and effort put into it, I will be able to enjoy working with it. I hope that after this 30 days of JavaScript projects, I will be able to familiarise myself with how to manipulate DOM elements with JavaScript, as well creating functions and hopefully, stop overcomplicating my code. I will be doing this along with learning JavaScript form Udemy courses. Hopefully soon, I will be able to try my hands on the project and get it to work before watching the video to get alternative solutions!

+
+

What I learnt about JavaScript:

+ + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 0673a8752a..92b11f19e2 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,7 +1,7 @@ html { font-size: 10px; - background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; - background-size: cover; + background: url(https://pixel.nymag.com/imgs/daily/intelligencer/2018/09/24/24-bongo-cat.w700.h700.jpg) center center; + background-repeat: no-repeat; } body,html { @@ -24,7 +24,7 @@ body,html { margin: 1rem; font-size: 1.5rem; padding: 1rem .5rem; - transition: all .07s ease; + transition: all 0.1s ease; width: 10rem; text-align: center; color: white; diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..4ce4978ac5 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,11 +62,42 @@ background: black; position: absolute; top: 50%; + transform-origin:100%; + transform: rotate(90deg); /* make it start at 12 */ + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); /*Gives it the snapping movement*/ } - + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..8f1ac4608c 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,3 +1,10 @@ + + + @@ -25,6 +32,17 @@

Update CSS Variables with JS

/* misc styles, nothing to do with CSS variables */ + :root { /* we are making use of custom properties here, learnt something new!*/ + --base: #ffc600; + --spacing: 10px; + --blur: 10px; + } + + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + } body { text-align: center; @@ -45,6 +63,20 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..d5d9bdd48d 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,3 +1,11 @@ + + @@ -27,33 +35,121 @@ { 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']; + 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']; // 'Last Name, First Name' + +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(function(inventor){ + // for (var i = 0; i < inventors.length; i++) { There is no need to iterate over the array, filter will iterate over it for you + if (inventor.year >=1500 && inventor.year <= 1599) { + return true; // if we return true, we keep the value. no need to give an else return false as it will automatically return false + } + }); + + console.table(fifteen) + +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + // const gettingNames = inventors.map(function(inventor) { return (inventor.first + " " + inventor.last) }); + // ^ this works, but let's try doing it with arrow functions! + + const gettingNames = inventors.map(inventor => inventor.first + " " + inventor.last); + console.log(gettingNames) + +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sorted = inventors.sort(function(a,b) { + if (a.year > b.year) { + return 1; + } + else { + return -1; // sorts them up or down the array + } + }); + + const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); // shorter method, remember syntax para => condition ? if : else + console.log(sorted) + console.log(ordered) + console.table(ordered) +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // Array.prototype.reduce() // 4. How many years did all the inventors live? + var sum = 0 // remember, this is a variable to be changed, hence it cannot be a CONST + + for (var i = 0; i < inventors.length; i++) { + sum += (inventors[i].passed - inventors[i].year); + } + console.log(sum) + + // much shorter... + const totalYears = inventors.reduce((total, inventor) => { return total + (inventor.passed - inventor.year) }, 0); + console.log(totalYears); + +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // 5. Sort the inventors by years lived + const oldest = inventors.sort((a, b) => a.passed-a.year > b.passed-b.year ? -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 + // this is supposed to run on the Wikipedia page, so I have to comment this out + + // const category = document.querySelector('.mw-category'); + // const links = Array.from(category.querySelectorAll('a')) + /* ^ look inside the category const for a list of links. you can call queryselector against any existing DOM element to look inside the DOM element. Then, store it as a variable INSTEAD of a nodelist */ + + // const links = [...category.querySelectorAll('a')] - or you can make use of the spread operator instead of Array.from() to create the array list by spreading the values inside the array + + // const de = links + // .map(link => link.textContent) + // .filter(a => a.includes('de')); //map first, then filter the mapped array + // console.log(de); + +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((lastOne, nextOne) => { + const[aLast, aFirst] = lastOne.split(', ') // splits when it meets a comma and a whitespace + const[bLast, bFirst] = nextOne.split(', ') + return lastOne > nextOne ? 1 : -1 + }); + + console.log(alpha); + +///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + // 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]) { // if the obj[item] does not exist, then create it and initialize it to be 0 first before incrementing. this helps when you want to increase the number of items in the data array as they will still be summed up as compared to when a fixed object is created + obj[item] = 0; + } + obj[item]++; + return obj; + }, {} ) // starting with a blank object, then we loop over every single item in the data array + + console.log(transportation) + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..f88b6c23a3 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,3 +1,7 @@ + + @@ -26,9 +30,11 @@ .panels { min-height: 100vh; overflow: hidden; + display:flex; } .panel { + flex: 1; /* each of them will split the remaining space evenly amongst themselves*/ background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; @@ -43,6 +49,10 @@ font-size: 20px; background-size: cover; background-position: center; + justify-content:center; + align-items:center; + display:flex; /* panels is already a flex conatiner, but we are also going to make every single panel a flex container for the texts. */ + flex-direction: column; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } @@ -56,8 +66,21 @@ margin: 0; width: 100%; transition: transform 0.5s; + flex: 1 0 auto; + display:flex; + justify-content:center; + align-items:center; } + /* When you add the class open-active to any of the panels, the top and bottom text will transition themselves into the image + Check the .panel for the transition that is used */ + .panel > *:first-child {transform: translateY(-100%);} + .panel.open-active > *:first-child {transform: translateY(0);} + + .panel > *:last-child {transform: translateY(100%);} + .panel.open-active > *:last-child {transform: translateY(0);} + + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -71,6 +94,7 @@ .panel.open { font-size: 40px; + flex:5; /* This means that when it is open, it push away the other flex items and take up the space of 5 flex items */ } @@ -105,7 +129,21 @@ diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html index 5902b43936..0b1bea03d6 100644 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -38,8 +38,8 @@ 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}`); + const cityName = place.city.replace(regex, `${this.value}`); + const stateName = place.state.replace(regex, `${this.value}`); return `
  • ${cityName}, ${stateName} diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..1da7358364 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,3 +1,8 @@ + + @@ -17,6 +22,49 @@ diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 5203de42a4..45533dc747 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -69,6 +69,6 @@ font-size: 15px; } - .hl { + .highlight { background: #ffc600; } diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..be01517c45 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,3 +1,11 @@ + + @@ -25,17 +33,40 @@ ]; // Some and Every Checks - // Array.prototype.some() // is at least one person 19 or older? - // Array.prototype.every() // is everyone 19 or older? + // Array.prototype.some() // is at least one person 19 or older? checks if there is at least one thing in the array that meets the criteria that you are looking for + + const currentYear = new Date().getFullYear(); + const isAdult = people.some(person => currentYear-person.year >= 19 ? true : false) + console.log(isAdult); // returns true because there is someone that is older than or equal to 19 + + // Array.prototype.every() // is everyone 19 or older? checks if every single item in the array meets the criteria that you are looking for + + const allAdults = people.every(person => currentYear-person.year >= 19 ? true : false) + console.log(allAdults); // returns false because not every person is older than or equal to 19 // 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 ? true : false) + 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) + + const removed = comments.splice(index, 1) + console.log(removed) + + const newComments = [ // this is redux, incorporating slice and spread operator + ...comments.slice(0, index), + ...comments.slice(index+1) + ]; + console.log(newComments) + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 9da9b5b3c5..6ba7d715a1 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,3 +1,5 @@ + @@ -7,6 +9,57 @@