From 6a4a8ca9c866f358123196702b3534b6d44f2ef4 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Tue, 13 Dec 2016 09:46:18 +0100 Subject: [PATCH 01/33] Exercise 01 --- 01 - JavaScript Drum Kit/index-FINISHED.html | 83 -------------------- 01 - JavaScript Drum Kit/index-START.html | 66 ---------------- 01 - JavaScript Drum Kit/index.html | 27 ++++--- 3 files changed, 15 insertions(+), 161 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-FINISHED.html delete mode 100644 01 - JavaScript Drum Kit/index-START.html diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..64ac0a23e0 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,26 +58,29 @@ + From d371e0851cf93da34c687dfcfd784433fe3654e4 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Tue, 20 Dec 2016 20:24:50 +0100 Subject: [PATCH 02/33] Exercise 02 --- 02 - JS + CSS Clock/index-FINISHED.html | 98 ------------------------- 02 - JS + CSS Clock/index-START.html | 73 ------------------ 02 - JS + CSS Clock/index.html | 39 +++++----- 3 files changed, 17 insertions(+), 193 deletions(-) delete mode 100644 02 - JS + CSS Clock/index-FINISHED.html delete mode 100644 02 - JS + CSS Clock/index-START.html diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index d4cb3b56a8..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 1c777557da..346757f8b6 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -64,33 +64,28 @@ transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transition-timing-function: cubic-bezier(0.1, 3.7, 0.6, 1); } - - + From d06daa13c687f2828c42358fb3f1c1e0986cb9fd Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Tue, 20 Dec 2016 21:01:27 +0100 Subject: [PATCH 03/33] Excercise 03 --- 03 - CSS Variables/index-START.html | 54 ------------------- .../{index-FINISHED.html => index.html} | 16 +++--- 2 files changed, 8 insertions(+), 62 deletions(-) delete mode 100644 03 - CSS Variables/index-START.html rename 03 - CSS Variables/{index-FINISHED.html => index.html} (95%) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html deleted file mode 100644 index 7171607a8b..0000000000 --- a/03 - CSS Variables/index-START.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - - - - diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index.html similarity index 95% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables/index.html index c3217fc003..fa3649e2de 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index.html @@ -22,15 +22,15 @@

Update CSS Variables with JS

- - -
-
-

Hey

-

Let's

-

Dance

-
-
-

Give

-

Take

-

Receive

-
-
-

Experience

-

It

-

Today

-
-
-

Give

-

All

-

You can

-
-
-

Life

-

In

-

Motion

-
-
- - - - - - - diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index.html similarity index 88% rename from 05 - Flex Panel Gallery/index-FINISHED.html rename to 05 - Flex Panel Gallery/index.html index 243f8a221d..7437dd1698 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index.html @@ -55,21 +55,20 @@ .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } - /* Flex Items */ .panel > * { margin:0; width: 100%; transition:transform 0.5s; flex: 1 0 auto; - display:flex; + display: flex; justify-content: center; align-items: center; } - .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 > *:first-child { transform: translateY(-100%) } + .panel > *:last-child { transform: translateY(100%) } + .panel.open-active > *:first-child { transform: translateY(0) } + .panel.open-active > *:last-child { transform: translateY(0) } .panel p { text-transform: uppercase; @@ -82,8 +81,8 @@ } .panel.open { - flex: 5; font-size:40px; + flex: 5; } .cta { @@ -125,21 +124,19 @@ + + From 7bbffbef9763187878d5d9e3a47e8e7a4963528e Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Tue, 10 Jan 2017 11:36:27 +0100 Subject: [PATCH 06/33] Exercise 06 --- 06 - Type Ahead/index-FINISHED.html | 61 ----------------------------- 06 - Type Ahead/index-START.html | 22 ----------- 06 - Type Ahead/index.html | 58 +++++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 83 deletions(-) delete mode 100644 06 - Type Ahead/index-FINISHED.html delete mode 100644 06 - Type Ahead/index-START.html create mode 100644 06 - Type Ahead/index.html diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html deleted file mode 100644 index 5902b43936..0000000000 --- a/06 - Type Ahead/index-FINISHED.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Type Ahead 👀 - - - - -
- -
    -
  • Filter for a city
    • -
  • or a state
    • -
-
- - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 1436886918..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Type Ahead 👀 - - - - -
- -
    -
  • Filter for a city
    • -
  • or a state
    • -
-
- - - diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..d978af910c --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,58 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From 0e88bf60f05f7b8624c2e0a8526ee3bfec155700 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Tue, 10 Jan 2017 22:05:37 +0100 Subject: [PATCH 07/33] Exercise 07 --- 07 - Array Cardio Day 2/index-START.html | 41 ------------------- .../{index-FINISHED.html => index.html} | 29 ++++--------- 2 files changed, 7 insertions(+), 63 deletions(-) delete mode 100644 07 - Array Cardio Day 2/index-START.html rename 07 - Array Cardio Day 2/{index-FINISHED.html => index.html} (70%) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html deleted file mode 100644 index 206ec31aa0..0000000000 --- a/07 - Array Cardio Day 2/index-START.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - Array Cardio 💪💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index.html similarity index 70% rename from 07 - Array Cardio Day 2/index-FINISHED.html rename to 07 - Array Cardio Day 2/index.html index c8e5b25d3b..a0775d3106 100644 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index.html @@ -13,7 +13,7 @@ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, - { name: 'Lux', year: 2015 }, + { name: 'Lux', year: 2015 } ]; const comments = [ @@ -26,42 +26,27 @@ // 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); - + 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}); + const allAdult = people.every(person => (new Date().getFullYear()) - person.year >= 19); + console.log({allAdult}); // 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); - console.log(index); - - // comments.splice(index, 1); - const newComments = [ - ...comments.slice(0, index), - ...comments.slice(index + 1) + ...comments.slice(0, index), + ...comments.slice(index + 1) ]; + console.table(newComments); From 3889750ef92967a7123fcf0afb2ed749f2551d0b Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Tue, 10 Jan 2017 22:56:17 +0100 Subject: [PATCH 08/33] Exercise 08 --- .../index-FINISHED.html | 73 ------------------- 08 - Fun with HTML5 Canvas/index-START.html | 19 ----- 08 - Fun with HTML5 Canvas/index.html | 66 +++++++++++++++++ 3 files changed, 66 insertions(+), 92 deletions(-) delete mode 100644 08 - Fun with HTML5 Canvas/index-FINISHED.html delete mode 100644 08 - Fun with HTML5 Canvas/index-START.html create mode 100644 08 - Fun with HTML5 Canvas/index.html diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html deleted file mode 100644 index 0791e17d0d..0000000000 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 37c148df07..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..ceb7e99959 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,66 @@ + + + + + HTML5 Canvas + + + + + + + + + From 12cf03d90cc06f73c1108b344340ed0b95eda764 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Thu, 12 Jan 2017 22:07:37 +0100 Subject: [PATCH 09/33] Exercise 09 --- 09 - Dev Tools Domination/index-FINISHED.html | 89 ------------------- 09 - Dev Tools Domination/index-START.html | 46 ---------- 09 - Dev Tools Domination/index.html | 75 ++++++++++++++++ 3 files changed, 75 insertions(+), 135 deletions(-) delete mode 100644 09 - Dev Tools Domination/index-FINISHED.html delete mode 100644 09 - Dev Tools Domination/index-START.html create mode 100644 09 - Dev Tools Domination/index.html diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html deleted file mode 100644 index 55cd3a2f42..0000000000 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - Console Tricks! - - - -

×BREAK×DOWN×

- - - - diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html deleted file mode 100644 index 196fffd719..0000000000 --- a/09 - Dev Tools Domination/index-START.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - Console Tricks! - - - -

×BREAK×DOWN×

- - - - diff --git a/09 - Dev Tools Domination/index.html b/09 - Dev Tools Domination/index.html new file mode 100644 index 0000000000..565061233f --- /dev/null +++ b/09 - Dev Tools Domination/index.html @@ -0,0 +1,75 @@ + + + + + Console Tricks! + + + +

×BREAK×DOWN×

+ + + + From 8caf8c60e16800ba8286abbe4fdc151a8f20583c Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Fri, 13 Jan 2017 11:23:13 +0100 Subject: [PATCH 10/33] Exercise 10: my version --- .../index-START.html | 109 ------------------ .../{index-FINISHED.html => index.html} | 59 ++++++---- 2 files changed, 34 insertions(+), 134 deletions(-) delete mode 100644 10 - Hold Shift and Check Checkboxes/index-START.html rename 10 - Hold Shift and Check Checkboxes/{index-FINISHED.html => index.html} (70%) diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html deleted file mode 100644 index eb7ed310bb..0000000000 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - Document - - - - -
-
- -

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!

-
-
- - - - diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index.html similarity index 70% rename from 10 - Hold Shift and Check Checkboxes/index-FINISHED.html rename to 10 - Hold Shift and Check Checkboxes/index.html index 3ce296cc4b..d8511125ac 100644 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -104,34 +104,43 @@ From 17973b51ec9fc59d16ab47bfd75018c2ffe300db Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Fri, 13 Jan 2017 11:33:11 +0100 Subject: [PATCH 11/33] Exercise 10: simplify --- .../index.html | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html index d8511125ac..61e68a419e 100644 --- a/10 - Hold Shift and Check Checkboxes/index.html +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -104,28 +104,15 @@ - - - - - diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html deleted file mode 100644 index 8cab786140..0000000000 --- a/12 - Key Sequence Detection/index-START.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html new file mode 100644 index 0000000000..069198aeb5 --- /dev/null +++ b/12 - Key Sequence Detection/index.html @@ -0,0 +1,22 @@ + + + + + Key Detection + + + + + + From 2562511c5f7fb983d685336ec32478178bc51aee Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sat, 14 Jan 2017 17:09:44 +0100 Subject: [PATCH 14/33] Exercise 13: reset --- 13 - Slide in on Scroll/index-FINISHED.html | 140 -------------------- 13 - Slide in on Scroll/index-START.html | 140 -------------------- 13 - Slide in on Scroll/index.html | 120 +++++++++++++++++ 3 files changed, 120 insertions(+), 280 deletions(-) delete mode 100644 13 - Slide in on Scroll/index-FINISHED.html delete mode 100644 13 - Slide in on Scroll/index-START.html create mode 100644 13 - Slide in on Scroll/index.html diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13 - Slide in on Scroll/index-FINISHED.html deleted file mode 100644 index bbaf0b6f22..0000000000 --- a/13 - Slide in on Scroll/index-FINISHED.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - 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.

- - - - -
- - - - - - - diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html deleted file mode 100644 index 12591bad30..0000000000 --- a/13 - Slide in on Scroll/index-START.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - 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.

- - - - -
- - - - - - - diff --git a/13 - Slide in on Scroll/index.html b/13 - Slide in on Scroll/index.html new file mode 100644 index 0000000000..d4ccb78815 --- /dev/null +++ b/13 - Slide in on Scroll/index.html @@ -0,0 +1,120 @@ + + + + + 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.

+ + + + +
+ + + + + + + \ No newline at end of file From 1fcd5731c4ca2d8d6a3b252cf5292a761c20d1d6 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sat, 14 Jan 2017 17:21:07 +0100 Subject: [PATCH 15/33] Exercise: 13 --- 13 - Slide in on Scroll/index.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/13 - Slide in on Scroll/index.html b/13 - Slide in on Scroll/index.html index d4ccb78815..06a1b937f7 100644 --- a/13 - Slide in on Scroll/index.html +++ b/13 - Slide in on Scroll/index.html @@ -58,6 +58,22 @@

Slide in on Scroll

}; } + const sliderImages = document.querySelectorAll('.slide-in'); + + function checkSlide(e) { + sliderImages.forEach(sliderImage => { + const slideInAt = window.scrollY + window.innerHeight - sliderImage.height / 2; + const imageBottom = sliderImage.offsetTop + sliderImage.height; + const isHalfShown = slideInAt > sliderImage.offsetTop; + const isNotScrolledPast = window.scrollY < imageBottom; + if (isHalfShown && isNotScrolledPast) { + sliderImage.classList.add('active'); + } else { + sliderImage.classList.remove('active'); + } + }); + } + window.addEventListener('scroll', debounce(checkSlide)); - - - - diff --git a/16 - Mouse Move Shadow/index-finished.html b/16 - Mouse Move Shadow/index.html similarity index 50% rename from 16 - Mouse Move Shadow/index-finished.html rename to 16 - Mouse Move Shadow/index.html index 4328eaf6ab..284fa5c4b7 100644 --- a/16 - Mouse Move Shadow/index-finished.html +++ b/16 - Mouse Move Shadow/index.html @@ -24,7 +24,6 @@

🔥WOAH!

color:black; } - h1 { text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px; @@ -34,27 +33,26 @@

🔥WOAH!

- - - diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index.html similarity index 60% rename from 17 - Sort Without Articles/index-FINISHED.html rename to 17 - Sort Without Articles/index.html index 5de851cbbd..38c908386f 100644 --- a/17 - Sort Without Articles/index-FINISHED.html +++ b/17 - Sort Without Articles/index.html @@ -43,20 +43,14 @@
    From b597d37f501d43d54926206c140e1808bbb556ea Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Fri, 20 Jan 2017 20:23:14 +0100 Subject: [PATCH 21/33] Exercise 18 --- .../index-FINISHED.html | 207 ------------------ .../{index-START.html => index.html} | 13 +- 2 files changed, 12 insertions(+), 208 deletions(-) delete mode 100644 18 - Adding Up Times with Reduce/index-FINISHED.html rename 18 - Adding Up Times with Reduce/{index-START.html => index.html} (88%) diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18 - Adding Up Times with Reduce/index-FINISHED.html deleted file mode 100644 index 9dcbb3d396..0000000000 --- a/18 - Adding Up Times with Reduce/index-FINISHED.html +++ /dev/null @@ -1,207 +0,0 @@ - - - - - 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 -
      • - - - - diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index.html similarity index 88% rename from 18 - Adding Up Times with Reduce/index-START.html rename to 18 - Adding Up Times with Reduce/index.html index 3eaee0f3ef..54c5f57cb7 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index.html @@ -180,8 +180,19 @@
    • Video 58
      • - +
    From 0e3f6a2b39c89cd50c5502954981493914a15570 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Fri, 20 Jan 2017 20:24:05 +0100 Subject: [PATCH 22/33] Exercise 19 --- 19 - Webcam Fun/index.html | 4 +- 19 - Webcam Fun/scripts-FINISHED.js | 102 ---------------------------- 19 - Webcam Fun/scripts.js | 93 +++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 104 deletions(-) delete mode 100755 19 - Webcam Fun/scripts-FINISHED.js diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..cb2d1b18a4 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@
    - +
    diff --git a/19 - Webcam Fun/scripts-FINISHED.js b/19 - Webcam Fun/scripts-FINISHED.js deleted file mode 100755 index 0d62c8dc23..0000000000 --- a/19 - Webcam Fun/scripts-FINISHED.js +++ /dev/null @@ -1,102 +0,0 @@ -const video = document.querySelector('.player'); -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); - video.src = window.URL.createObjectURL(localMediaStream); - video.play(); - }) - .catch(err => { - console.error(`OH NO!!!`, err); - }); -} - -function paintToCanavas() { - const width = video.videoWidth; - const height = video.videoHeight; - canvas.width = width; - canvas.height = height; - - return setInterval(() => { - ctx.drawImage(video, 0, 0, width, height); - // take the pixels out - let pixels = ctx.getImageData(0, 0, width, height); - // mess with them - // pixels = redEffect(pixels); - - pixels = rgbSplit(pixels); - // ctx.globalAlpha = 0.8; - - // pixels = greenScreen(pixels); - // put them back - ctx.putImageData(pixels, 0, 0); - }, 16); -} - -function takePhoto() { - // played the sound - snap.currentTime = 0; - snap.play(); - - // take the data out of the canvas - const data = canvas.toDataURL('image/jpeg'); - const link = document.createElement('a'); - link.href = data; - link.setAttribute('download', 'handsome'); - link.innerHTML = `Handsome Man`; - strip.insertBefore(link, strip.firsChild); -} - -function redEffect(pixels) { - for(let i = 0; i < pixels.data.length; i+=4) { - pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED - pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN - pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue - } - return pixels; -} - -function rgbSplit(pixels) { - for(let i = 0; i < pixels.data.length; i+=4) { - pixels.data[i - 150] = pixels.data[i + 0]; // RED - pixels.data[i + 500] = pixels.data[i + 1]; // GREEN - pixels.data[i - 550] = pixels.data[i + 2]; // Blue - } - return pixels; -} - -function greenScreen(pixels) { - const levels = {}; - - document.querySelectorAll('.rgb input').forEach((input) => { - 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', paintToCanavas); diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..3ceb17e24b 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,96 @@ 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); + video.src = window.URL.createObjectURL(localMediaStream); + video.play(); + }) + .catch(err => { + console.error(`OH NO!!!`, err); + }); +} + +function paintToCanavas() { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + + let pixels = ctx.getImageData(0, 0, width, height); + // pixels = redEffect(pixels); + // pixels = rgbSplit(pixels); + pixels = greenScreen(pixels); + ctx.putImageData(pixels, 0, 0); + }, 16); +} + +function takePhoto() { + snap.currentTime = 0; + snap.play(); + + const data = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.textContent = 'Download Image'; + link.innerHTML = `Handsome`; + strip.insertBefore(link, strip.firstChild); +} + +function redEffect(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i + 0] = pixels.data[i + 0] + 100; // red + pixels.data[i + 1] = pixels.data[i + 1] - 50; // green + pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // blue + } + + return pixels; +} + +function rgbSplit(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i - 150] = pixels.data[i + 0]; // red + pixels.data[i + 100] = pixels.data[i + 1]; // green + pixels.data[i - 150] = pixels.data[i + 2]; // blue + } + + return pixels; +} + +function greenScreen(pixels) { + const levels = {}; + + document.querySelectorAll('.rgb input').forEach((input) => { + 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', paintToCanavas); \ No newline at end of file From e398c24d324830096040c4f6fe3e86fee77c7b43 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sat, 21 Jan 2017 11:32:44 +0100 Subject: [PATCH 23/33] Exercise 20 --- 20 - Speech Detection/index-START.html | 60 ------------------- .../{index-FINISHED.html => index.html} | 18 +++--- 2 files changed, 7 insertions(+), 71 deletions(-) delete mode 100644 20 - Speech Detection/index-START.html rename 20 - Speech Detection/{index-FINISHED.html => index.html} (82%) diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html deleted file mode 100644 index d3395cca35..0000000000 --- a/20 - Speech Detection/index-START.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - - Speech Detection - - - -
    -
    - - - - - - - - diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index.html similarity index 82% rename from 20 - Speech Detection/index-FINISHED.html rename to 20 - Speech Detection/index.html index 413c3eeaaf..e4586ecc10 100644 --- a/20 - Speech Detection/index-FINISHED.html +++ b/20 - Speech Detection/index.html @@ -20,24 +20,20 @@ words.appendChild(p); recognition.addEventListener('result', e => { - const transcript = Array.from(e.results) - .map(result => result[0]) - .map(result => result.transcript) - .join(''); - - const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩'); - p.textContent = poopScript; + const transcript = Array.from(e.results) + .map(result => result[0]) + .map(result => result.transcript) + .join(''); + p.textContent = transcript; if (e.results[0].isFinal) { - p = document.createElement('p'); - words.appendChild(p); + p = document.createElement('p'); + words.appendChild(p); } }); recognition.addEventListener('end', recognition.start); - recognition.start(); - From ce85a08b88887b47e1c0952ab12e29c4d5c881a0 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sun, 22 Jan 2017 10:59:41 +0100 Subject: [PATCH 24/33] Exercise: 21 --- 21 - Geolocation/index-START.html | 74 ------------------- .../{index-FINISHED.html => index.html} | 10 ++- 2 files changed, 6 insertions(+), 78 deletions(-) delete mode 100644 21 - Geolocation/index-START.html rename 21 - Geolocation/{index-FINISHED.html => index.html} (96%) diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html deleted file mode 100644 index d794c144ba..0000000000 --- a/21 - Geolocation/index-START.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - Document - - - - - - -

    - 0 - KM/H -

    - - - - - diff --git a/21 - Geolocation/index-FINISHED.html b/21 - Geolocation/index.html similarity index 96% rename from 21 - Geolocation/index-FINISHED.html rename to 21 - Geolocation/index.html index 0f2ddecf2a..5f71fa9e96 100644 --- a/21 - Geolocation/index-FINISHED.html +++ b/21 - Geolocation/index.html @@ -61,12 +61,14 @@

    const speed = document.querySelector('.speed-value'); navigator.geolocation.watchPosition((data) => { - console.log(data); - speed.textContent = data.coords.speed; - arrow.style.transform = `rotate(${data.coords.heading}deg)`; + console.log(data); + speed.textContent = data.coords.speed; + arrow.style.transform = `rotate(${data.coords.heading}deg)`; }, (err) => { - console.error(err); + console.error(err); + alert('HEY!'); }); + From 9bcdcfabd19cf5865a902387dd97511a0f6cdf36 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sun, 22 Jan 2017 11:11:36 +0100 Subject: [PATCH 25/33] Exercise 22 --- .../index-FINISHED.html | 55 ------------------- .../{index-START.html => index.html} | 14 ++++- 2 files changed, 13 insertions(+), 56 deletions(-) delete mode 100644 22 - Follow Along Link Highlighter/index-FINISHED.html rename 22 - Follow Along Link Highlighter/{index-START.html => index.html} (70%) diff --git a/22 - Follow Along Link Highlighter/index-FINISHED.html b/22 - Follow Along Link Highlighter/index-FINISHED.html deleted file mode 100644 index 74bd06e321..0000000000 --- a/22 - Follow Along Link Highlighter/index-FINISHED.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - 👀👀👀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!

    -
    - - - - - diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index.html similarity index 70% rename from 22 - Follow Along Link Highlighter/index-START.html rename to 22 - Follow Along Link Highlighter/index.html index 8476112b5e..469ce4119f 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index.html @@ -26,7 +26,19 @@ From 4c4fd5929d04d98b4f55987623bd4eca9bc2039e Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Wed, 25 Jan 2017 20:08:24 +0100 Subject: [PATCH 26/33] Exercise 23 --- 23 - Speech Synthesis/index-START.html | 41 ------------------- .../{index-FINISHED.html => index.html} | 33 ++++++++------- 2 files changed, 16 insertions(+), 58 deletions(-) delete mode 100644 23 - Speech Synthesis/index-START.html rename 23 - Speech Synthesis/{index-FINISHED.html => index.html} (77%) diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html deleted file mode 100644 index e890008d36..0000000000 --- a/23 - Speech Synthesis/index-START.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - Speech Synthesis - - - - - -
    - -

    The Voiceinator 5000

    - - - - - - - - - - - - - -
    - - - - - diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23 - Speech Synthesis/index.html similarity index 77% rename from 23 - Speech Synthesis/index-FINISHED.html rename to 23 - Speech Synthesis/index.html index 5ea9a4a8e7..45fb195ad2 100644 --- a/23 - Speech Synthesis/index-FINISHED.html +++ b/23 - Speech Synthesis/index.html @@ -35,40 +35,39 @@

    The Voiceinator 5000

    const options = document.querySelectorAll('[type="range"], [name="text"]'); const speakButton = document.querySelector('#speak'); const stopButton = document.querySelector('#stop'); - msg.text = document.querySelector('[name="text"]').value; + + msg.text = document.querySelector('[name=text]').value; function populateVoices() { voices = this.getVoices(); voicesDropdown.innerHTML = voices - .filter(voice => voice.lang.includes('en')) - .map(voice => ``) - .join(''); + .filter(voice => voice.lang.includes('en')) + .map(voice => ``) + .join(''); } - + function setVoice() { - msg.voice = voices.find(voice => voice.name === this.value); - toggle(); + msg.voice = voices.find(voice => voice.name === this.value); + toggle(); } function toggle(startOver = true) { - speechSynthesis.cancel(); - if (startOver) { - speechSynthesis.speak(msg); - } + speechSynthesis.cancel(); + if (startOver) { + speechSynthesis.speak(msg); + } } - + function setOption() { - console.log(this.name, this.value); - msg[this.name] = this.value; - toggle(); + msg[this.name] = this.value; + toggle(); } - + speechSynthesis.addEventListener('voiceschanged', populateVoices); voicesDropdown.addEventListener('change', setVoice); options.forEach(option => option.addEventListener('change', setOption)); speakButton.addEventListener('click', toggle); stopButton.addEventListener('click', () => toggle(false)); - From e71423968f7a0a5be25897e9422d50494360d712 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Wed, 25 Jan 2017 22:02:25 +0100 Subject: [PATCH 27/33] Exercise 24 --- 24 - Sticky Nav/index-START.html | 74 ------------- .../{index-FINISHED.html => index.html} | 37 ++++--- 24 - Sticky Nav/style-FINISHED.css | 100 ------------------ .../{style-START.css => style.css} | 6 +- 4 files changed, 25 insertions(+), 192 deletions(-) delete mode 100644 24 - Sticky Nav/index-START.html rename 24 - Sticky Nav/{index-FINISHED.html => index.html} (96%) delete mode 100644 24 - Sticky Nav/style-FINISHED.css rename 24 - Sticky Nav/{style-START.css => style.css} (95%) diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html deleted file mode 100644 index 4982537eea..0000000000 --- a/24 - Sticky Nav/index-START.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - 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/index-FINISHED.html b/24 - Sticky Nav/index.html similarity index 96% rename from 24 - Sticky Nav/index-FINISHED.html rename to 24 - Sticky Nav/index.html index 2e5961192c..8f08eb8fbf 100644 --- a/24 - Sticky Nav/index-FINISHED.html +++ b/24 - Sticky Nav/index.html @@ -2,8 +2,8 @@ - Document - + Sticky Nav + @@ -23,6 +23,7 @@

    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.

    @@ -33,35 +34,41 @@

    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. 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-FINISHED.css b/24 - Sticky Nav/style-FINISHED.css deleted file mode 100644 index b551473357..0000000000 --- a/24 - Sticky Nav/style-FINISHED.css +++ /dev/null @@ -1,100 +0,0 @@ -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; -} - -body.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; -} - -body.fixed-nav nav { - position: fixed; - box-shadow:0 5px 0 rgba(0,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 0.5s; - font-weight: 600; - font-size: 30px; -} - -li.logo a { - color:black; -} - -.fixed-nav li.logo { - max-width:500px; -} - -nav a { - text-decoration: none; - padding:20px; - display: inline-block; - color:white; - transition:all 0.2s; - text-transform: uppercase; -} diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style.css similarity index 95% rename from 24 - Sticky Nav/style-START.css rename to 24 - Sticky Nav/style.css index 19961112b4..19dc90fedd 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style.css @@ -54,7 +54,7 @@ nav { .fixed-nav nav { position: fixed; - box-shadow: 0 5px rgba(0,0,0,0.1) + box-shadow: 0 5px rgba(0, 0, 0, 0.1); } nav ul { @@ -82,7 +82,7 @@ li.logo { } .fixed-nav li.logo { - max-width:500px; + max-width: 500px; } li.logo a { @@ -96,4 +96,4 @@ nav a { color:white; transition:all 0.2s; text-transform: uppercase; -} +} \ No newline at end of file From e052d54e947280fcb381511a93e0b61c0628589d Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Wed, 25 Jan 2017 22:37:21 +0100 Subject: [PATCH 28/33] Exercise 25 --- .../index-START.html | 45 ------------------- .../{index-FINISHED.html => index.html} | 21 +++------ 2 files changed, 6 insertions(+), 60 deletions(-) delete mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index-START.html rename 25 - Event Capture, Propagation, Bubbling and Once/{index-FINISHED.html => index.html} (69%) diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html deleted file mode 100644 index 98f5e070c4..0000000000 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - Understanding JavaScript's Capture - - - -
    -
    -
    -
    -
    -
    - - - - - - - diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html b/25 - Event Capture, Propagation, Bubbling and Once/index.html similarity index 69% rename from 25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html rename to 25 - Event Capture, Propagation, Bubbling and Once/index.html index 8856df9d89..e8831e0fbb 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index.html @@ -40,25 +40,16 @@ From d44e7937ba5c77d2a3603d98c7c67dde03a663cd Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Thu, 26 Jan 2017 22:30:21 +0100 Subject: [PATCH 29/33] Exercise 26 --- .../index-FINISHED.html | 246 ----------------- 26 - Stripe Follow Along Nav/index-START.html | 214 --------------- 26 - Stripe Follow Along Nav/index.html | 248 ++++++++++++++++++ 3 files changed, 248 insertions(+), 460 deletions(-) delete mode 100644 26 - Stripe Follow Along Nav/index-FINISHED.html delete mode 100644 26 - Stripe Follow Along Nav/index-START.html create mode 100644 26 - Stripe Follow Along Nav/index.html diff --git a/26 - Stripe Follow Along Nav/index-FINISHED.html b/26 - Stripe Follow Along Nav/index-FINISHED.html deleted file mode 100644 index 9cf05f388d..0000000000 --- a/26 - Stripe Follow Along Nav/index-FINISHED.html +++ /dev/null @@ -1,246 +0,0 @@ - - - - - Follow Along Nav - - -

    Cool

    - - - - - - - - diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html deleted file mode 100644 index 9780d0d1ac..0000000000 --- a/26 - Stripe Follow Along Nav/index-START.html +++ /dev/null @@ -1,214 +0,0 @@ - - - - - Follow Along Nav - - -

    Cool

    - - - - - - - - diff --git a/26 - Stripe Follow Along Nav/index.html b/26 - Stripe Follow Along Nav/index.html new file mode 100644 index 0000000000..2d006f9c85 --- /dev/null +++ b/26 - Stripe Follow Along Nav/index.html @@ -0,0 +1,248 @@ + + + + + Follow Along Nav + + +

    Cool

    + + + + + + + + \ No newline at end of file From 1977e43d510ea9f3e320a3868943febd0f969712 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Thu, 26 Jan 2017 22:48:38 +0100 Subject: [PATCH 30/33] Exercise 27 --- 27 - Click and Drag/index-START.html | 41 ------------------- .../{index-FINISHED.html => index.html} | 23 +++++------ 27 - Click and Drag/style.css | 3 +- 3 files changed, 12 insertions(+), 55 deletions(-) delete mode 100644 27 - Click and Drag/index-START.html rename 27 - Click and Drag/{index-FINISHED.html => index.html} (83%) diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html deleted file mode 100644 index b8609315f7..0000000000 --- a/27 - Click and Drag/index-START.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - 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
    -
    - - - - - diff --git a/27 - Click and Drag/index-FINISHED.html b/27 - Click and Drag/index.html similarity index 83% rename from 27 - Click and Drag/index-FINISHED.html rename to 27 - Click and Drag/index.html index 52eb86628c..c20ffbc471 100644 --- a/27 - Click and Drag/index-FINISHED.html +++ b/27 - Click and Drag/index.html @@ -46,25 +46,22 @@ startX = e.pageX - slider.offsetLeft; scrollLeft = slider.scrollLeft; }); - slider.addEventListener('mouseleave', () => { - isDown = false; - slider.classList.remove('active'); + isDown = false; + slider.classList.remove('active'); }); - slider.addEventListener('mouseup', () => { - isDown = false; - slider.classList.remove('active'); + isDown = false; + slider.classList.remove('active'); }); - slider.addEventListener('mousemove', (e) => { - if (!isDown) return; // stop the fn from running - e.preventDefault(); - const x = e.pageX - slider.offsetLeft; - const walk = (x - startX) * 3; - slider.scrollLeft = scrollLeft - walk; - }); + if (!isDown) return; + e.preventDefault(); + const x = e.pageX - slider.offsetLeft; + const walk = x - startX; + slider.scrollLeft = scrollLeft - walk; + }); diff --git a/27 - Click and Drag/style.css b/27 - Click and Drag/style.css index 209b32cae5..0464786129 100644 --- a/27 - Click and Drag/style.css +++ b/27 - Click and Drag/style.css @@ -31,6 +31,7 @@ body { cursor: pointer; transition: all 0.2s; transform: scale(0.98); + will-change: transform; position: relative; background: rgba(255,255,255,0.1); font-size: 0; @@ -73,4 +74,4 @@ body { width: auto; border:2px solid green; height: 100%; -} +} \ No newline at end of file From 9b1972fa324ca6e9037af7b3bdea4e8714f50b5d Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Fri, 27 Jan 2017 20:14:18 +0100 Subject: [PATCH 31/33] Exercise 28 --- 28 - Video Speed Controller/index-START.html | 20 ------------------- .../{index-FINISHED.html => index.html} | 15 +++++++------- 2 files changed, 7 insertions(+), 28 deletions(-) delete mode 100644 28 - Video Speed Controller/index-START.html rename 28 - Video Speed Controller/{index-FINISHED.html => index.html} (76%) diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html deleted file mode 100644 index c4cbd4259a..0000000000 --- a/28 - Video Speed Controller/index-START.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - Video Speed Scrubber - - - - -
    - -
    -
    1×
    -
    -
    - - - - diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28 - Video Speed Controller/index.html similarity index 76% rename from 28 - Video Speed Controller/index-FINISHED.html rename to 28 - Video Speed Controller/index.html index a7d2f3e38c..0ef4b1014c 100644 --- a/28 - Video Speed Controller/index-FINISHED.html +++ b/28 - Video Speed Controller/index.html @@ -16,7 +16,7 @@ From 4c3a0b244a91198deb274ac0c0c5441c6c682aaf Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sat, 28 Jan 2017 11:45:32 +0100 Subject: [PATCH 32/33] Exercise 29 --- 29 - Countdown Timer/index.html | 2 +- 29 - Countdown Timer/scripts-FINISHED.js | 55 ------------------------ 29 - Countdown Timer/scripts-START.js | 0 29 - Countdown Timer/scripts.js | 55 ++++++++++++++++++++++++ 4 files changed, 56 insertions(+), 56 deletions(-) delete mode 100644 29 - Countdown Timer/scripts-FINISHED.js delete mode 100644 29 - Countdown Timer/scripts-START.js create mode 100644 29 - Countdown Timer/scripts.js diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html index d54f447dd9..95a0f895a2 100644 --- a/29 - Countdown Timer/index.html +++ b/29 - Countdown Timer/index.html @@ -24,6 +24,6 @@

    - + diff --git a/29 - Countdown Timer/scripts-FINISHED.js b/29 - Countdown Timer/scripts-FINISHED.js deleted file mode 100644 index 581cadb270..0000000000 --- a/29 - Countdown Timer/scripts-FINISHED.js +++ /dev/null @@ -1,55 +0,0 @@ -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() { - const seconds = parseInt(this.dataset.time); - timer(seconds); -} - -buttons.forEach(button => button.addEventListener('click', startTimer)); -document.customForm.addEventListener('submit', function(e) { - e.preventDefault(); - const mins = this.minutes.value; - console.log(mins); - timer(mins * 60); - this.reset(); -}); diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/29 - Countdown Timer/scripts.js b/29 - Countdown Timer/scripts.js new file mode 100644 index 0000000000..af21899982 --- /dev/null +++ b/29 - Countdown Timer/scripts.js @@ -0,0 +1,55 @@ +let coundown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds) { + const now = Date.now(); + const then = now + seconds * 1000; + + displayTimeLeft(seconds); + displayEndTime(then); + coundown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + if (secondsLeft < 0) { + clearInterval(coundown); + return; + } + + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + + const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; + timerDisplay.textContent = display; + document.title = display; +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hours = end.getHours(); + const minutes = end.getMinutes(); + + endTime.textContent = `Be Back At ${hours}:${minutes < 10 ? '0' : ''}${minutes}` +} + +function startTimer() { + clearInterval(coundown); + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', function (e) { + e.preventDefault(); + + const minutes = parseInt(this.minutes.value); + + clearInterval(coundown); + timer(minutes * 60); + this.reset(); +}); \ No newline at end of file From 04380ed721664fc28d26d8eaa5e95ac8549b6562 Mon Sep 17 00:00:00 2001 From: Stephan Vock Date: Sat, 28 Jan 2017 12:03:11 +0100 Subject: [PATCH 33/33] Exercise 30 --- 30 - Whack A Mole/index-START.html | 42 -------------- .../{index-FINISHED.html => index.html} | 56 ++++++++++--------- 2 files changed, 29 insertions(+), 69 deletions(-) delete mode 100644 30 - Whack A Mole/index-START.html rename 30 - Whack A Mole/{index-FINISHED.html => index.html} (64%) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html deleted file mode 100644 index 2014ff458c..0000000000 --- a/30 - Whack A Mole/index-START.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - Whack A Mole! - - - - - -

    Whack-a-mole! 0

    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - diff --git a/30 - Whack A Mole/index-FINISHED.html b/30 - Whack A Mole/index.html similarity index 64% rename from 30 - Whack A Mole/index-FINISHED.html rename to 30 - Whack A Mole/index.html index 8d741d5bf0..ddc94a5f81 100644 --- a/30 - Whack A Mole/index-FINISHED.html +++ b/30 - Whack A Mole/index.html @@ -40,48 +40,50 @@

    Whack-a-mole! 0

    let timeUp = false; let score = 0; - function randomTime(min, max) { - return Math.round(Math.random() * (max - min) + min); + 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; - } + const idx = Math.floor(Math.random() * holes.length); + const hole = holes[idx]; - function peep() { - const time = randomTime(200, 1000); - const hole = randomHole(holes); - hole.classList.add('up'); - setTimeout(() => { - hole.classList.remove('up'); - if (!timeUp) peep(); - }, time); + if (hole === lastHole) { + 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) + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + setTimeout(() => timeUp = true, 10000); } function bonk(e) { - if(!e.isTrusted) return; // cheater! + if (!e.isTrusted) return; score++; this.classList.remove('up'); scoreBoard.textContent = score; } - moles.forEach(mole => mole.addEventListener('click', bonk)); -