diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..47f08962f8 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@ diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html index ac30c1ef0e..6d81b062a5 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -5,8 +5,6 @@ Codestin Search App - -
@@ -14,8 +12,6 @@
- - - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index ca2b59d077..8ea57ee726 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -48,6 +48,28 @@

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..f8f686fdfd 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,17 +31,30 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + let bornIn1500s = inventors.filter((man) => man.year >= 1500 && man.year < 1600); + console.table(bornIn1500s); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const inventorsNames = inventors.map((man) => `${man.first} ${man.last}`); + console.log(inventorsNames); + // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sortBirth = inventors.sort((man, manNext) => man.year < manNext.year ? -1 : 1); + console.table(sortBirth); + // Array.prototype.reduce() // 4. How many years did all the inventors live? + const ageSum = inventors.reduce((sum, man) => man.passed - man.year + sum, 0); + console.log(ageSum); // 5. Sort the inventors by years lived + const sortAge = inventors.sort((man, manNext) => (man.passed - man.year) > (manNext.passed - manNext.year) ? -1 : 1); + console.table(sortAge); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -49,10 +62,23 @@ // 7. sort Exercise // Sort the people alphabetically by last name + const sortPeople = people.sort((p, p2) => { + const [firstName, lastName] = p.split(', '); + const [firstName2, lastName2] = p2.split(', '); + return (lastName > lastName2) ? 1 : -1; + }); + console.log(sortPeople); + // 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 dataCount = data.reduce((obj, item) => { + obj[item] = obj[item] || 0; + obj[item]++; + return obj; + }, {}); + console.log(dataCount); diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..47df05ff91 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,9 +24,11 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { + flex: 1; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -41,6 +43,10 @@ font-size: 20px; background-size:cover; background-position:center; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; } @@ -54,7 +60,21 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + flex-direction: column; + justify-content: center; } + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel p { text-transform: uppercase; @@ -68,6 +88,10 @@ .panel.open { font-size:40px; + flex: 5; + } + .panel.open-active > * { + transform: translateY(0%); } .cta { @@ -107,6 +131,19 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..87024452a5 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -16,6 +16,41 @@ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..35d56657af 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,15 +26,26 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const atLeastOne = people.some(person => new Date().getFullYear() - person.year >= 19); + console.log({atLeastOne}); // Array.prototype.every() // is everyone 19 or older? + const everyone = people.every(person => new Date().getFullYear() - person.year >= 19); + console.log({everyone}); // 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); + const newComment = [ + ...comments.slice(0,index), + ...comments.slice(index+1) + ]; + console.table(newComment); diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..defd1dc153 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -6,7 +6,48 @@ + diff --git a/README.md b/README.md new file mode 100644 index 0000000000..964c112e60 --- /dev/null +++ b/README.md @@ -0,0 +1,145 @@ +# JavaScript30 +30 Day Vanilla JS Challenge + +## Logs +記錄是為了逼自己天天寫。（？ + +- Day1 -- 我有寫但放在別台電腦沒commit哈哈 +- Day2 -- 2016/12/13 complete! +- Day3 -- 2016/12/15 + 用 css variable 這招倒是完全沒想到 (跟它壓根兒不熟)，相比之下我整個大輸XD。 + 偷偷筆記起來。不過就是瀏覽器支援度還很差，近期可能還無法在production環境中使用吧…… +- Day4 -- 2016/12/21 + 不小心偷懶好久(爆) + 這篇剛好可以趁機回憶一下前陣子看的[教學影片](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)！(講師超有趣XD) +- Day5 -- 2016/12/26 + 寫是寫完了不過要來好好認真看一下flex才行QQ +- Day6 -- 2017/01/03 + 年末總是在忙著慶祝嘛！(爆) + - fetch + - regular expression +- Day7 + 8 -- 2017/01/04 +- Day9 + 10 -- 2017/01/05 + - `console.time(name)` + `console.timeEnd(name)` + - `console.group(name)` + `console.groupEnd(name)` + - Holding down the `Shift`key could be captured by `MouseEvents` and `KeyboardEvents` with `event.shiftKey` (true for "is holding down shift key") +- Day11 + 12 -- 2017/01/06 +- Day13 -- PASS (欸) +- Day14 -- 2017/01/20 + - 這章好重要，前陣子也有認真看了一下JS裡面`by value`跟`by reference`的問題，另外開一個區塊寫XD +- Day15 -- 2017/01/28 （新年寫code...廠廠) + - `JSON.parse(null)`是ＯＫ的，但`JSON.parse(undefined)`就會跳error。 +- Day16 -- 2017/01/28 + - 如果在捕捉滑鼠移動位置事件時，假如被掛上listener的元素裡面還有子元素的話， + 記得要另外加上子元素和父元素的相對位置。 + + ```javascript + let x = e.target.offsetX; + let y = e.target.offsetY; + if (this !== e.target) { + x = x + e.target.offsetLeft; + y = y + e.target.offsetTop; + } + ``` + + 延伸：[圖解offsetLeft、offsetTop、offsetWidth和offsetHeight](http://emn178.pixnet.net/blog/post/95297028-%E5%9C%96%E8%A7%A3offsetleft%E3%80%81offsettop%E3%80%81offsetwidth%E5%92%8Coffsetheight) + + +## Notes +### Day14 - JavaScript References VS Copying + +> 記得在stackoverflow上面也有人提出其實JS沒有分所謂的`by value`和`by reference`， +> 而是以變數的值是否`immutable`的差別來區分， +> 不過我覺得這樣子的分法對我來說比較好理解。 + +1. By Value (Copying) + + 一般來說只要是 strings, numbers 和 booleans，都可以說是 `by value`。 + +```javascript +let a = "string"; +let b = a; +console.log(a, b); // "string", "string" +b = "another string"; +console.log(a, b); // "string", "another string" +``` + +2. By Reference + +如果是 `array` 或者 `object`，則會以 `by reference` 的方式傳遞。 + +```javascript +let person1 = { + name: "Trina", + age: 100, + gender: "female" +}; +let person2 = person1; + +console.log(person1, person2); +//Object {name: "Trina", age: 100, gender: "female"}, Object {name: "Trina", age: 100, gender: "female"} + +person2.name = "Sherry"; +console.log(person2.name); //"Sherry" +console.log(person1.name); //"Sherry" --> person1 has been changed too! +``` + +Array 也是一樣的道理： + +```javascript +let players = ["Trina", "Sherry", "Pisuke", "Kuma"]; +let team = players; +console.log(players, team); +// ["Trina", "Sherry", "Pisuke", "Kuma"], +// ["Trina", "Sherry", "Pisuke", "Kuma"] + +team[3] = "Usagi"; +console.log(players); +// ["Trina", "Sherry", "Pisuke", "Usagi"] --> players has been changed too! +``` + +要解決這個問題，就必須把`Object`或`Array`直接Copy一份才行。 + +- Copying an array + + ```javascript + //以下幾種方式皆可行 + const teamCopy1 = players.slice(); + const teamCopy2 = [].concat(players); + const teamCopy3 = [...players]; //es6 + const teamCopy4 = Array.from(players); + ``` +- Copying an object + + ```javascript + const personCopy = Object.assign({}, person, { + newProperty: "some additional property for personCopy" + }); + ``` + + 要注意的是以上的方法是 `Shallow copy`，如果 Object 本身是`二維`以上的話，使用上面的方式還是會有 `By reference`的情況發生。 + + ```javascript + let me = { + name: "Trina", + age: 24, + social: { + twitter: "@tri613", + github: "tri613" + } + }; + + let me2 = Object.assign({}, me); + me2.social.twitter = "@nomoney"; + + console.log(me.social); + //{twitter: "@nomoney", github: "tri613"} --> Changed! + ``` + + 這種情況需要靠`Deep clone`來解決，最簡單 (但效率表現沒那麼好) 的方式 是直接使用JSON格式encode再decode的方式解決。 + + ```javascript + const meCopy = JSON.parse(JSON.stringify(me)); + ``` + + 其他的方式可以參考stackoverflow上面的[這篇](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript)。 diff --git a/readme.md b/readme-base.md similarity index 99% rename from readme.md rename to readme-base.md index 40854bb2f0..bf5a13a815 100644 --- a/readme.md +++ b/readme-base.md @@ -21,4 +21,4 @@ These are meant to be 1:1 copies of what is done in the video. If you found a be The starter files + solutions will be updated if/when the videos are updated. -Thanks! +Thanks! \ No newline at end of file