diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce339..1b59c421bc 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -33,29 +33,83 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + // const fifteen = inventors.filter(function(inventors){ + // if(inventors.year >= 1500 && inventors.year < 1600){ + // return true ; // keep it + // } + // }); + + const fifteen = inventors.filter(inventors => (inventors.year >= 1500 && inventors.year < 1600)) + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(inventors => `${inventors.first} ${inventors.last}`); + console.log(fullNames); + // Array.prototype.sort() - // 3. Sort the inventors by birthdate, oldest to youngest + // 3. Sort the inventors by birthdate, oldest to youngest 依照年紀排序 + // const ordered = inventors.sort(function(a,b){ + // if(a.year > b.year){ + // return 1 ; + // }else{ + // return -1; + // } + // }); + + const ordered = inventors.sort((a,b) => a.year > b.year ? 1 : -1) ; // bettr 寫法 + + console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYear = inventors.reduce((total,inventors) => { + return total + (inventors.passed - inventors.year); + }, 0); + console.log(totalYear); // 5. Sort the inventors by years lived + const oldest = inventors.sort(function(a,b){ + const lastGuy = a.passed - a.year; + const nextGuy = b.passed - b.year; + return lastGuy > nextGuy ? -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 - + // const category = document.querySelector('.mw-category'); + // const link = Array.from(category.querySelectorAll('a')); //用法1 ：放入array + // //const link = [...category.querySelectorAll('a')]; //用法2: 把所有的a 放入array，es2015 + // const de = link + // .map(link => link.textContent); + // .filter(streetName => streetName.include('de')); // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((lastOne, nextOne) => { + const [aFirst, aLast] = lastOne.split(', '); + const [bFirst, bLast] = nextOne.split(', '); + return aLast > bLast ? 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]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); + + console.log(transportation); + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..6de7f3492d 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,116 +1,169 @@ + - - Flex Panels 💪 - + + Flex Panels 💪 + + - - - -
-
-

Hey

-

Let's

-

Dance

+ +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - + + diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..e6c23d017f 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -17,6 +17,39 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31aa0..f10e1bf240 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,52 @@ // 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(function(comment){ + // if(comment.id === 823423){ + // return true; + // } + // }); + + 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); + + // 1way: delete , + + // comments.splice(index,1); + + // another way (slice), create a new array. + const newComments =[ + ...comments.slice(0,index), // ned to spread to array + ...comments.slice(index +1 ) + ]; + + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..61402cae22 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,61 @@ diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..eb2a478dd7 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -45,7 +45,17 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..ab6a6e92ed 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,16 @@ diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..afaf3acaa6 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -2,7 +2,7 @@ - 👀👀👀Follow Along Nav + Follow Along Nav @@ -26,7 +26,30 @@
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..9056a721f3 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,7 +54,22 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..da7c9cc872 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -23,6 +23,10 @@ body { transition: transform 0.5s; } +.fixed-nav .site-wrap { + transform:scale(1); +} + header { text-align: center; height:50vh; @@ -48,6 +52,11 @@ nav { z-index: 1; } +.fixed-nav nav{ + position: fixed; + box-shadow: 0 5px rgba(0,0,0,0.1);s +} + nav ul { margin: 0; padding:0; @@ -72,6 +81,10 @@ li.logo { font-size: 30px; } +.fixed-nav li.logo{ + max-width: 500px; +} + li.logo a { color:black; } diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 98f5e070c4..83791872cf 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -39,7 +39,25 @@ diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..ee92e80717 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -207,7 +207,44 @@

Cool

+ + diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..1e49875948 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,41 @@ diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..b97198ed73 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,69 @@ +// function timer(seconds){ +// setInterval(function(){ +// second -- ; +// },1000); +// } +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds){ + // clear any existing timers + clearInterval(countdown); + + const now = Date.now(); + const then = now + seconds*1000; + displayTimeLeft(seconds); + displayEndTime(then); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now())/1000); + //check if we should stop it! + if(secondsLeft <= 0) { + clearInterval(countdown); + return; + } + //display it + displayTimeLeft(secondsLeft); + },1000) +} + +function displayTimeLeft(seconds){ + const minutes = Math.floor(seconds/60); + const remainderSeconds = seconds % 60; + const display =`${minutes}:${remainderSeconds < 10 ? '0' :''}${remainderSeconds}`; + document.title = display; + timerDisplay.textContent = display; +} + +function displayEndTime(timestamp){ + const end = new Date(timestamp); + const hour = end.getHours(); + const adjustedHour = hour>12 ? hour-12 :hour ; + const minutes = end.getMinutes(); + endTime.textContent =`be Back At ${adjustedHour}: ${minutes < 10 ? '0' : ''}${minutes}`; +} + +function startTimer(){ + // console.log(this.dataset.time); + const seconds = parseInt(this.dataset.time); + //console.log(seconds); + timer(seconds); + +} + + +buttons.forEach(button => button.addEventListener('click', startTimer)); + + +// input minute + +document.customForm.addEventListener('submit', function(e){ + e.preventDefault(); + const mins = this.minutes.value; + console.log(mins); + timer(mins * 60); + this.reset(); + +}) \ No newline at end of file diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..dd97d2da0b 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,6 +36,53 @@

Whack-a-mole! 0

const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); + let lastHole; + let timeUp = false; + let score = 0; + + function randTime(min,max){ + return Math.round(Math.random() * (max - min) + min); + } + + function randomHole(holes){ + const idx = Math.floor(Math.random()* holes.length); + const hole = holes[idx]; + if(hole === lastHole){ + console.log('Ah nah thats the same one bud'); + return randomHole(holes); + } + lastHole = hole; + return hole; + } + + function peep(){ + const time = randTime(200,1000); + const hole = randomHole(holes); + hole.classList.add('up'); + setTimeout( () => { + hole.classList.remove('up'); + if(!timeUp) peep(); + },time); + } + + function startGame(){ + scoreBoard.textContent = 0; + timeUP = false; + score = 0; + peep(); + setTimeout(() => timeUp = true, 10000) + } + + function bonk(e){ + if(!e.isTrusted) return ; // cheater! + score ++ ; + this.classList.remove('up'); + scoreBoard.textContent = score; + } + + moles.forEach(mole => mole.addEventListener('click', bonk)); + +