From 42e53c361e3eda2ae2906e23cffbeb71c814a025 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Tue, 17 Jan 2017 16:05:01 +0800 Subject: [PATCH 01/32] 01 finished --- 01 - JavaScript Drum Kit/index-PRACTICE.html | 87 ++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-PRACTICE.html diff --git a/01 - JavaScript Drum Kit/index-PRACTICE.html b/01 - JavaScript Drum Kit/index-PRACTICE.html new file mode 100644 index 0000000000..4e703ea619 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-PRACTICE.html @@ -0,0 +1,87 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + From c76dae4f6532b24d2404ab81ba4f96f08a92760b Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Wed, 18 Jan 2017 22:40:20 +0800 Subject: [PATCH 02/32] 02 finish --- .gitignore | 1 + 02 - JS + CSS Clock/index-Practice.html | 95 +++++++++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 02 - JS + CSS Clock/index-Practice.html diff --git a/.gitignore b/.gitignore index 6e1a3738b8..1c752af8f7 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ *.log haters/ +.idea/ \ No newline at end of file diff --git a/02 - JS + CSS Clock/index-Practice.html b/02 - JS + CSS Clock/index-Practice.html new file mode 100644 index 0000000000..91564ea3f9 --- /dev/null +++ b/02 - JS + CSS Clock/index-Practice.html @@ -0,0 +1,95 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + From b2227e8d3b349bd5c1523d413c203023d19c66d1 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Thu, 19 Jan 2017 13:49:39 +0800 Subject: [PATCH 03/32] 03 finish --- 03 - CSS Variables/index-Practice.html | 82 ++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 03 - CSS Variables/index-Practice.html diff --git a/03 - CSS Variables/index-Practice.html b/03 - CSS Variables/index-Practice.html new file mode 100644 index 0000000000..9e3416d759 --- /dev/null +++ b/03 - CSS Variables/index-Practice.html @@ -0,0 +1,82 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From c62ccf1d2298f552f76e9c4c64bca58a7eb156dc Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Fri, 20 Jan 2017 21:06:02 +0800 Subject: [PATCH 04/32] 04 finish --- 04 - Array Cardio Day 1/index-Practice.html | 90 +++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-Practice.html diff --git a/04 - Array Cardio Day 1/index-Practice.html b/04 - Array Cardio Day 1/index-Practice.html new file mode 100644 index 0000000000..591fb4d976 --- /dev/null +++ b/04 - Array Cardio Day 1/index-Practice.html @@ -0,0 +1,90 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 2e15e4eab1ca1813f5294704bc3590e59191884d Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 21 Jan 2017 17:20:59 +0800 Subject: [PATCH 05/32] 05 finish --- 05 - Flex Panel Gallery/index-Practice.html | 159 ++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-Practice.html diff --git a/05 - Flex Panel Gallery/index-Practice.html b/05 - Flex Panel Gallery/index-Practice.html new file mode 100644 index 0000000000..43743085be --- /dev/null +++ b/05 - Flex Panel Gallery/index-Practice.html @@ -0,0 +1,159 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + From 0792b5191101e4fe3b6f4735b92035a6fda64e45 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sun, 22 Jan 2017 16:39:55 +0800 Subject: [PATCH 06/32] 06 finish --- 06 - Type Ahead/index-Practice.html | 56 +++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 06 - Type Ahead/index-Practice.html diff --git a/06 - Type Ahead/index-Practice.html b/06 - Type Ahead/index-Practice.html new file mode 100644 index 0000000000..2a59d314ec --- /dev/null +++ b/06 - Type Ahead/index-Practice.html @@ -0,0 +1,56 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From 88eb1316d577f99d86f989f58f0df7ab4ecd7c6d Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Mon, 23 Jan 2017 20:54:39 +0800 Subject: [PATCH 07/32] 07 finish --- 07 - Array Cardio Day 2/index-Practice.html | 57 +++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-Practice.html diff --git a/07 - Array Cardio Day 2/index-Practice.html b/07 - Array Cardio Day 2/index-Practice.html new file mode 100644 index 0000000000..8af44ba3a9 --- /dev/null +++ b/07 - Array Cardio Day 2/index-Practice.html @@ -0,0 +1,57 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 6228ed1df9aa369365a689069e87afae7fee46b1 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Tue, 24 Jan 2017 22:37:47 +0800 Subject: [PATCH 08/32] 08 finish --- .../index-Practice.html | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index-Practice.html diff --git a/08 - Fun with HTML5 Canvas/index-Practice.html b/08 - Fun with HTML5 Canvas/index-Practice.html new file mode 100644 index 0000000000..dc21cfa327 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-Practice.html @@ -0,0 +1,61 @@ + + + + + HTML5 Canvas + + + + + + + + + From 0e28c275de42f0b66367e97b71c8a92ef11a0492 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Wed, 25 Jan 2017 18:19:42 +0800 Subject: [PATCH 09/32] 09 finish --- 09 - Dev Tools Domination/index-Practice.html | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 09 - Dev Tools Domination/index-Practice.html diff --git a/09 - Dev Tools Domination/index-Practice.html b/09 - Dev Tools Domination/index-Practice.html new file mode 100644 index 0000000000..8f12c8c67a --- /dev/null +++ b/09 - Dev Tools Domination/index-Practice.html @@ -0,0 +1,89 @@ + + + + + Console Tricks! + + + + +

×BREAK×DOWN×

+ + + + From 4313ab3102d2b954d6a61e2aeff2537cd98f1d3c Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Thu, 26 Jan 2017 20:06:33 +0800 Subject: [PATCH 10/32] 10 finish --- .../index-Practice.html | 132 ++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index-Practice.html diff --git a/10 - Hold Shift and Check Checkboxes/index-Practice.html b/10 - Hold Shift and Check Checkboxes/index-Practice.html new file mode 100644 index 0000000000..176a6a89a9 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-Practice.html @@ -0,0 +1,132 @@ + + + + + Hold Shift to Check Multiple Checkboxes + + + + +
+
+ +

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!

+
+
+ + + + From d1372c70b095797a576bf2c39107462c2aac0f1b Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Thu, 26 Jan 2017 21:09:16 +0800 Subject: [PATCH 11/32] try another way --- .../index-Practice.html | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/10 - Hold Shift and Check Checkboxes/index-Practice.html b/10 - Hold Shift and Check Checkboxes/index-Practice.html index 176a6a89a9..8685047f47 100644 --- a/10 - Hold Shift and Check Checkboxes/index-Practice.html +++ b/10 - Hold Shift and Check Checkboxes/index-Practice.html @@ -127,6 +127,51 @@ } checkboxes.forEach(checkbox=>checkbox.addEventListener('click', clickHandler)); + + /** + const checkboxs = document.querySelectorAll('input[type=checkbox]'); + let isShiftPressed = false; + let firstCheckbox = null; + let lastCheckbox = null; + + checkboxs.forEach((checkbox, index)=>{ + checkbox.addEventListener("change", e => { + if(isShiftPressed && !firstCheckbox){ + firstCheckbox = index; + }else if(isShiftPressed && firstCheckbox){ + lastCheckbox = index; + }else{ + firstCheckbox = null; + lastCheckbox = null; + } + if(lastCheckbox && firstCheckbox){ + changeCheckboxState(firstCheckbox, lastCheckbox); + } + }); + }); + + function changeCheckboxState(index1, index2){ + console.log(index1); + console.log(index2); + let begin, end; + if(index1>index2){ + begin = index2; + end = index1; + }else{ + begin = index1; + end = index2; + } + + for(var i = begin;i<=end;i++){ + checkboxs[i].checked = checkboxs[index1].checked; + } + } + + window.addEventListener('keydown',e => {if(e.keyCode=== 16) isShiftPressed=true}); + window.addEventListener('keyup',e => {if(e.keyCode=== 16) isShiftPressed=false}); + */ + / + From d85df183a980029b4dec6ca5245c95aa838403cb Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 28 Jan 2017 00:22:10 +0800 Subject: [PATCH 12/32] 11 finish --- 11 - Custom Video Player/index.html | 1 + 11 - Custom Video Player/scripts.js | 63 +++++++++++++++++++++++++++++ 11 - Custom Video Player/style.css | 7 ++++ 3 files changed, 71 insertions(+) diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index 281a15eaa8..33f2f0a932 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -19,6 +19,7 @@ + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..165e646fbd 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,63 @@ +const player = document.querySelector(".player"); +const video = player.querySelector(".viewer"); +const progress = player.querySelector(".progress"); +const progressBar = player.querySelector(".progress__filled"); +const toggle = player.querySelector(".toggle"); +const skipButtons = player.querySelectorAll("[data-skip]"); +const ranges = player.querySelectorAll(".player__slider"); +const fullscreen = player.querySelector(".fullscreen"); + +function togglePlay(){ + video[video.paused ? 'play': 'pause'](); + /** equal to + if(video.paused){ + video.play(); + }else{ + video.pause(); + } + */ +} +function updateButton(){ + toggle.textContent = this.paused ? '►' : '❚ ❚'; +} +function skip(){ + video.currentTime += parseFloat(this.dataset.skip); +} +// 聲音 轉速 +function handleRangeUpdate(){ + video[this.name] = this.value; +} +function handleProgress(){ + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} +function scrub(e){ + const scrubTime = e.offsetX / progress.offsetWidth * video.duration; + console.log(scrubTime); + video.currentTime = scrubTime; +} + +function toggleFullScreen(){ + player.classList.toggle('fullscreen'); +} + +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + + +toggle.addEventListener('click', togglePlay); +skipButtons.forEach(skipButton=>skipButton.addEventListener('click', skip)); +ranges.forEach(range=>range.addEventListener('change', handleRangeUpdate)); +ranges.forEach(range=>range.addEventListener('mousemove', handleRangeUpdate)); + +let mouseDown = false; +progress.addEventListener('click',scrub); +progress.addEventListener('mousemove',(e)=>mouseDown && scrub(e)); +progress.addEventListener('mousedown',()=>mouseDown = true); +progress.addEventListener('mouseup',()=>mouseDown = false); + +fullscreen.addEventListener('click',toggleFullScreen); + + diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c1c0..029741900d 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -7,6 +7,7 @@ html { } body { + margin: 0; padding: 0; display:flex; background:#7A419B; @@ -25,6 +26,12 @@ body { font-size: 0; overflow: hidden; } +.player.fullscreen { + width: 100vw; + max-width: 100vw; + height: 100vh; + background: #000; +} .player__video { width: 100%; From 3d0396cbf87dec2fa76ca29cbe220503d86f5f4d Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 28 Jan 2017 16:23:26 +0800 Subject: [PATCH 13/32] 12 finished --- .../index-Practice.html | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 12 - Key Sequence Detection/index-Practice.html diff --git a/12 - Key Sequence Detection/index-Practice.html b/12 - Key Sequence Detection/index-Practice.html new file mode 100644 index 0000000000..839ee91e9c --- /dev/null +++ b/12 - Key Sequence Detection/index-Practice.html @@ -0,0 +1,23 @@ + + + + + Key Detection + + + + + + \ No newline at end of file From c9324bde2b87189e3723127fee0d59a43f89252f Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sun, 29 Jan 2017 21:43:19 +0800 Subject: [PATCH 14/32] 13 finish --- 13 - Slide in on Scroll/index-Practice.html | 139 ++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 13 - Slide in on Scroll/index-Practice.html diff --git a/13 - Slide in on Scroll/index-Practice.html b/13 - Slide in on Scroll/index-Practice.html new file mode 100644 index 0000000000..1a64d4ad49 --- /dev/null +++ b/13 - Slide in on Scroll/index-Practice.html @@ -0,0 +1,139 @@ + + + + + Document + + + +
+ +

Slide in on Scroll

+ +

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

+

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Adipisicing elit. Tempore tempora rerum..

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

+ + + +

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis

+ + +

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

+ + + + +
+ + + + + + + From 78c371bb6b8796f30196ff67958d182374af8b3d Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Mon, 30 Jan 2017 20:58:11 +0800 Subject: [PATCH 15/32] 14 finish --- .../index-Practice.html | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 14 - JavaScript References VS Copying/index-Practice.html diff --git a/14 - JavaScript References VS Copying/index-Practice.html b/14 - JavaScript References VS Copying/index-Practice.html new file mode 100644 index 0000000000..97b235a54f --- /dev/null +++ b/14 - JavaScript References VS Copying/index-Practice.html @@ -0,0 +1,90 @@ + + + + + JS Reference VS Copy + + + + + + + From 003e448525c04e17e815332a2903da117ba27b09 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Tue, 31 Jan 2017 23:56:49 +0800 Subject: [PATCH 16/32] 17 finish --- .../index-Practice.html | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 17 - Sort Without Articles/index-Practice.html diff --git a/17 - Sort Without Articles/index-Practice.html b/17 - Sort Without Articles/index-Practice.html new file mode 100644 index 0000000000..52e598db3b --- /dev/null +++ b/17 - Sort Without Articles/index-Practice.html @@ -0,0 +1,66 @@ + + + + + Sort Without Articles + + + + + +
    + + + + + From 11e699823726a83d17bfef11f439bcc21dd2d178 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Wed, 1 Feb 2017 21:56:28 +0800 Subject: [PATCH 17/32] 15 finish --- 15 - LocalStorage/index-Practice.html | 76 +++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 15 - LocalStorage/index-Practice.html diff --git a/15 - LocalStorage/index-Practice.html b/15 - LocalStorage/index-Practice.html new file mode 100644 index 0000000000..f167dd8e41 --- /dev/null +++ b/15 - LocalStorage/index-Practice.html @@ -0,0 +1,76 @@ + + + + + LocalStorage + + + + + + + +
    +

    LOCAL TAPAS

    +

    +
      +
    • Loading Tapas...
      • +
    +
    + + +
    +
    + + + + + + + From 7c1a85f710ca7c93af3505128cdf1285ebbdc84d Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Thu, 2 Feb 2017 20:47:01 +0800 Subject: [PATCH 18/32] 16 finish --- 16 - Mouse Move Shadow/index-paratice.html | 36 ++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 16 - Mouse Move Shadow/index-paratice.html diff --git a/16 - Mouse Move Shadow/index-paratice.html b/16 - Mouse Move Shadow/index-paratice.html new file mode 100644 index 0000000000..58a9bba861 --- /dev/null +++ b/16 - Mouse Move Shadow/index-paratice.html @@ -0,0 +1,36 @@ + + + + + Mouse Shadow + + + +
    +

    🔥WOAH!

    +
    + + + + + + From 028473458709b70d92936793dbc063b9059c5929 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Fri, 3 Feb 2017 12:51:05 +0800 Subject: [PATCH 19/32] 18 finish --- .../index-Practice.html | 197 ++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 18 - Adding Up Times with Reduce/index-Practice.html diff --git a/18 - Adding Up Times with Reduce/index-Practice.html b/18 - Adding Up Times with Reduce/index-Practice.html new file mode 100644 index 0000000000..82ef7195c4 --- /dev/null +++ b/18 - Adding Up Times with Reduce/index-Practice.html @@ -0,0 +1,197 @@ + + + + + Videos + + +
      +
    • + Video 1 +
      • +
    • + Video 2 +
      • +
    • + Video 3 +
      • +
    • + Video 4 +
      • +
    • + Video 5 +
      • +
    • + Video 6 +
      • +
    • + Video 7 +
      • +
    • + Video 8 +
      • +
    • + Video 9 +
      • +
    • + Video 10 +
      • +
    • + Video 11 +
      • +
    • + Video 12 +
      • +
    • + Video 13 +
      • +
    • + Video 14 +
      • +
    • + Video 15 +
      • +
    • + Video 16 +
      • +
    • + Video 17 +
      • +
    • + Video 18 +
      • +
    • + Video 19 +
      • +
    • + Video 20 +
      • +
    • + Video 21 +
      • +
    • + Video 22 +
      • +
    • + Video 23 +
      • +
    • + Video 24 +
      • +
    • + Video 25 +
      • +
    • + Video 26 +
      • +
    • + Video 27 +
      • +
    • + Video 28 +
      • +
    • + Video 29 +
      • +
    • + Video 30 +
      • +
    • + Video 31 +
      • +
    • + Video 32 +
      • +
    • + Video 33 +
      • +
    • + Video 34 +
      • +
    • + Video 35 +
      • +
    • + Video 36 +
      • +
    • + Video 37 +
      • +
    • + Video 38 +
      • +
    • + Video 39 +
      • +
    • + Video 40 +
      • +
    • + Video 41 +
      • +
    • + Video 42 +
      • +
    • + Video 43 +
      • +
    • + Video 44 +
      • +
    • + Video 45 +
      • +
    • + Video 46 +
      • +
    • + Video 47 +
      • +
    • + Video 48 +
      • +
    • + Video 49 +
      • +
    • + Video 50 +
      • +
    • + Video 51 +
      • +
    • + Video 52 +
      • +
    • + Video 53 +
      • +
    • + Video 54 +
      • +
    • + Video 55 +
      • +
    • + Video 56 +
      • +
    • + Video 57 +
      • +
    • + Video 58 +
      • +
    + + + From 0be64e0371227eb23432e9db6664a803243a83df Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 4 Feb 2017 17:08:13 +0800 Subject: [PATCH 20/32] 16 finish --- 16 - Mouse Move Shadow/index-paratice.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/16 - Mouse Move Shadow/index-paratice.html b/16 - Mouse Move Shadow/index-paratice.html index 58a9bba861..70ba20c7be 100644 --- a/16 - Mouse Move Shadow/index-paratice.html +++ b/16 - Mouse Move Shadow/index-paratice.html @@ -31,6 +31,23 @@

    🔥WOAH!

    From 4f6a817ca8152c6c976cf845a08892f5720c11d9 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 4 Feb 2017 19:03:13 +0800 Subject: [PATCH 21/32] 24 finish --- 24 - Sticky Nav/index-Practice.html | 74 ++++++++++++++++++++++ 24 - Sticky Nav/style-Practice.css | 98 +++++++++++++++++++++++++++++ 2 files changed, 172 insertions(+) create mode 100644 24 - Sticky Nav/index-Practice.html create mode 100644 24 - Sticky Nav/style-Practice.css diff --git a/24 - Sticky Nav/index-Practice.html b/24 - Sticky Nav/index-Practice.html new file mode 100644 index 0000000000..8e6b0230e2 --- /dev/null +++ b/24 - Sticky Nav/index-Practice.html @@ -0,0 +1,74 @@ + + + + + Sticky Nav + + + + +
    +

    A story about getting lost.

    +
    + + + +
    + +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

    + + + +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

    + + + +

    at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

    + + + +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    + + + +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

    +
    + + + + + diff --git a/24 - Sticky Nav/style-Practice.css b/24 - Sticky Nav/style-Practice.css new file mode 100644 index 0000000000..0c58b0ab65 --- /dev/null +++ b/24 - Sticky Nav/style-Practice.css @@ -0,0 +1,98 @@ +html { + box-sizing: border-box; + background:#eeeeee; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.site-wrap { + max-width: 700px; + margin: 70px auto; + background:white; + padding:40px; + text-align: justify; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); + transform: scale(0.98); + transition: transform 0.5s; +} +.fixed-nav .site-wrap { + transform: scale(1); +} + +header { + text-align: center; + height:50vh; + background:url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat; + background-size:cover; + display:flex; + align-items:center; + justify-content: center; +} + +h1 { + color:white; + font-size: 7vw; + text-shadow: 3px 4px 0 rgba(0,0,0,0.2) +} + +nav { + background:black; + top:0; + width: 100%; + transition:all 0.5s; + position: relative; + z-index: 1; +} + +.fixed-nav nav{ + position: fixed; + box-shadow: 0 5px rgba(0,0,0,.1); +} + +nav ul { + margin: 0; + padding:0; + list-style: none; + display:flex; +} + +nav li { + flex:1; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +li.logo { + max-width:0; + overflow: hidden; + background: white; + transition: all .5s; + font-weight: 600; + font-size: 30px; +} + +.fixed-nav li.logo{ + max-width: 500px; +} + +li.logo a { + color:black; +} + +nav a { + text-decoration: none; + padding:20px; + display: inline-block; + color:white; + transition:all 0.2s; + text-transform: uppercase; +} From d870d9b05a2fbc8d6698c4207711e8231f5156b1 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 4 Feb 2017 19:27:40 +0800 Subject: [PATCH 22/32] 25 finish --- .../index-Practice.html | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index-Practice.html diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-Practice.html b/25 - Event Capture, Propagation, Bubbling and Once/index-Practice.html new file mode 100644 index 0000000000..3d47ee5d23 --- /dev/null +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-Practice.html @@ -0,0 +1,55 @@ + + + + + Understanding JavaScript's Capture + + + +
    +
    +
    +
    +
    +
    + + + + + + + From 61717610931f784f4b5383cdf798e3b5027dac5e Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sun, 5 Feb 2017 13:59:38 +0800 Subject: [PATCH 23/32] 22 finish --- .../index-Practice.html | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 22 - Follow Along Link Highlighter/index-Practice.html diff --git a/22 - Follow Along Link Highlighter/index-Practice.html b/22 - Follow Along Link Highlighter/index-Practice.html new file mode 100644 index 0000000000..d4c6918a9e --- /dev/null +++ b/22 - Follow Along Link Highlighter/index-Practice.html @@ -0,0 +1,52 @@ + + + + + 👀👀👀Follow Along Nav + + + + + + +
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

    +

    Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

    +

    Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

    +

    Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

    +

    Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

    +
    + + + + + From 320fab7ff70dadbec3faed491f59f15284a2dba9 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sun, 5 Feb 2017 15:48:32 +0800 Subject: [PATCH 24/32] 26 finish --- .../index-practice.html | 244 ++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 26 - Stripe Follow Along Nav/index-practice.html diff --git a/26 - Stripe Follow Along Nav/index-practice.html b/26 - Stripe Follow Along Nav/index-practice.html new file mode 100644 index 0000000000..a4998cf834 --- /dev/null +++ b/26 - Stripe Follow Along Nav/index-practice.html @@ -0,0 +1,244 @@ + + + + + Follow Along Nav + + +

    Cool

    + + + + + + + + From 73d1f92bf19b9fb46c75c746c8d33040106953d3 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Mon, 6 Feb 2017 20:56:04 +0800 Subject: [PATCH 25/32] 27 finish --- 27 - Click and Drag/index-Practice.html | 71 +++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 27 - Click and Drag/index-Practice.html diff --git a/27 - Click and Drag/index-Practice.html b/27 - Click and Drag/index-Practice.html new file mode 100644 index 0000000000..ce60e21d95 --- /dev/null +++ b/27 - Click and Drag/index-Practice.html @@ -0,0 +1,71 @@ + + + + + Click and Drag + + + +
    +
    01
    +
    02
    +
    03
    +
    04
    +
    05
    +
    06
    +
    07
    +
    08
    +
    09
    +
    10
    +
    11
    +
    12
    +
    13
    +
    14
    +
    15
    +
    16
    +
    17
    +
    18
    +
    19
    +
    20
    +
    21
    +
    22
    +
    23
    +
    24
    +
    25
    +
    + + + + + From cddc2eb2331d5b4fa1d0308e1ee1f3d64c4a8e23 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Tue, 7 Feb 2017 21:12:56 +0800 Subject: [PATCH 26/32] 21 finish --- 21 - Geolocation/index-Practice.html | 72 ++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 21 - Geolocation/index-Practice.html diff --git a/21 - Geolocation/index-Practice.html b/21 - Geolocation/index-Practice.html new file mode 100644 index 0000000000..c1c7c3222c --- /dev/null +++ b/21 - Geolocation/index-Practice.html @@ -0,0 +1,72 @@ + + + + + Document + + + + + + +

    + 0 + KM/H +

    + + + + + From 632a7f39817f30f7006b48406cae95033b51be85 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Wed, 8 Feb 2017 21:43:04 +0800 Subject: [PATCH 27/32] 28 finish --- .../index-Practice.html | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 28 - Video Speed Controller/index-Practice.html diff --git a/28 - Video Speed Controller/index-Practice.html b/28 - Video Speed Controller/index-Practice.html new file mode 100644 index 0000000000..2c329be0ec --- /dev/null +++ b/28 - Video Speed Controller/index-Practice.html @@ -0,0 +1,37 @@ + + + + + Video Speed Scrubber + + + + +
    + +
    +
    1×
    +
    +
    + + + + From 5129ae79bb934b9f876786bbe5f5fbf423c77040 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Thu, 9 Feb 2017 23:17:33 +0800 Subject: [PATCH 28/32] 20 finish --- 20 - Speech Detection/index-Practice.html | 90 +++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 20 - Speech Detection/index-Practice.html diff --git a/20 - Speech Detection/index-Practice.html b/20 - Speech Detection/index-Practice.html new file mode 100644 index 0000000000..0a364d593c --- /dev/null +++ b/20 - Speech Detection/index-Practice.html @@ -0,0 +1,90 @@ + + + + + Speech Detection + + + +
    +
    + + + + + + + + From 3584014f788d807eae695b25499ab7eb6b66c4d0 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 11 Feb 2017 19:32:27 +0800 Subject: [PATCH 29/32] 23 finish --- 23 - Speech Synthesis/index-Practice.html | 75 +++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 23 - Speech Synthesis/index-Practice.html diff --git a/23 - Speech Synthesis/index-Practice.html b/23 - Speech Synthesis/index-Practice.html new file mode 100644 index 0000000000..329d7aa16d --- /dev/null +++ b/23 - Speech Synthesis/index-Practice.html @@ -0,0 +1,75 @@ + + + + + Speech Synthesis + + + + + +
    + +

    The Voiceinator 5000

    + + + + + + + + + + + + + +
    + + + + + From 3fbae9964f75dcd32fa6ff378fd38996a4d42c1d Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sat, 11 Feb 2017 20:31:09 +0800 Subject: [PATCH 30/32] 19 finish --- 19 - Webcam Fun/index.html | 4 +- 19 - Webcam Fun/scripts.js | 100 +++++++++++++++++++++++++++++++++++++ 2 files changed, 102 insertions(+), 2 deletions(-) diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..a2c66ca55a 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@
    - +
    diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..f10d57a2a8 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,103 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + +function getVideo(){ + navigator.mediaDevices.getUserMedia({video:true, audio:false}) + .then(localMediaStream => { + console.log(localMediaStream); + // covert to url and feed into video + video.src = window.URL.createObjectURL(localMediaStream); + video.play(); + }) + .catch(err=>{ + console.error(`no!!`, err); + }); +} + +function paintToCanvas(){ + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(()=>{ + ctx.drawImage(video, 0, 0, width, height); + // huge array of RGBA data + let pixels = ctx.getImageData(0,0,width,height); + //take pixel out and put on effect + // 變紅 + //pixels = redEffect(pixels); + // rgb 分離 + //pixels = rgbSplit(pixels); + // ghosting effect + //ctx.globalAlpha = 0.1; + // grren screen + pixels = greenScreen(pixels); + ctx.putImageData(pixels,0,0); + },16); +} + +// 以onclick 放在html上面 +function takePhoto(){ + // snap sound + snap.currentTime = 0; + snap.play(); + //取得圖片資料 塞到下載 + const data = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = data; + link.setAttribute('dowload', 'snapping'); + //link.textContent = 'Download Image'; + link.innerHTML = `snap image`; + strip.insertBefore(link, strip.firstChild); +} + +function redEffect(pixels){ + for(let i= 0,len=pixels.data.length;i { + levels[input.name] = input.value; + }); + + for (i = 0; i < pixels.data.length; i = i + 4) { + red = pixels.data[i + 0]; + green = pixels.data[i + 1]; + blue = pixels.data[i + 2]; + alpha = pixels.data[i + 3]; + + if (red >= levels.rmin + && green >= levels.gmin + && blue >= levels.bmin + && red <= levels.rmax + && green <= levels.gmax + && blue <= levels.bmax) { + // take it out! + pixels.data[i + 3] = 0; + } + } + + return pixels; +} + +getVideo(); + +video.addEventListener("canplay",paintToCanvas); \ No newline at end of file From 65582f8bef71a0e1b4ab27c4146f345c2e8513a4 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sun, 12 Feb 2017 14:22:36 +0800 Subject: [PATCH 31/32] 29 finish --- 29 - Countdown Timer/scripts-START.js | 56 +++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..a87c6e635c 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,56 @@ +let countdown; +const timerDisplay = document.querySelector(".display__time-left"); +const endTimeDisplay = document.querySelector(".display__end-time"); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds){ + // 取消計時器前確認是否要取消 + if(countdown && !window.confirm("Do you really want to reset timer?")){ + return; + }else{ + clearInterval(countdown); + } + // 計算實際倒數結束時間 + const then = Date.now() + seconds * 1000; + // 顯示剩多少時間 + displayTimeLeft(seconds); + // 顯示結束時間為 + displayEndTime(then); + countdown = setInterval(()=>{ + const secondLeft = Math.round((then - Date.now())/1000); + // check if we should stop + if(secondLeft < 0){ + clearInterval(countdown); + return; + } + displayTimeLeft(secondLeft) + },1000); +} + +function displayTimeLeft(seconds){ + const minutes = Math.floor(seconds / 60); + const reminderSeconds = seconds % 60; + const displayTime = `${minutes}:${reminderSeconds<9?0:""}${reminderSeconds}`; + document.title = displayTime; + timerDisplay.textContent = displayTime; +} + +function displayEndTime(timeStamp){ + const end = new Date(timeStamp); + const hours = end.getHours(); + const minutes = end.getMinutes(); + endTimeDisplay.textContent = `Be Back at ${hours>12? hours -12:hours}:${minutes<10?"0":""}${minutes}${hours>12? "PM":"AM"}`; +} + +function startTimer(){ + timer(parseInt(this.dataset.time)); +} + +buttons.forEach(button => button.addEventListener('click',startTimer)); + +document.customForm.addEventListener("submit", function (e) { + e.preventDefault(); + timer(parseInt(this.minutes.value)*60); + //clear the minutes value + this.reset(); +}); \ No newline at end of file From f1a8a262e902fa7e1f7bcf8e94264ea62a238696 Mon Sep 17 00:00:00 2001 From: Pei Cheng Date: Sun, 12 Feb 2017 21:03:24 +0800 Subject: [PATCH 32/32] 30 finish --- 30 - Whack A Mole/index-START.html | 47 ++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..305c687857 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 randHole(holes){ + const idx = Math.floor(Math.random()*holes.length); + const hole = holes[idx]; + if(hole===lastHole){ + return randHole(holes); + } + lastHole = hole; + return hole; + } + + function peep(){ + const time = randTime(200,1000); + const hole = randHole(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; //fake click + score ++; + this.classList.remove('up'); + scoreBoard.textContent = score; + + } + + moles.forEach(mole=> mole.addEventListener('click',bonk)); +