From 7b7f09d374f6d8038ac202cc0e8e4a582da33cc9 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Wed, 4 Oct 2017 09:58:58 -0400 Subject: [PATCH 01/11] tutorials 1-3 --- 01 - JavaScript Drum Kit/index.html | 86 +++++++++++++++++++++++++ 02 - JS and CSS Clock/index.html | 97 +++++++++++++++++++++++++++++ 03 - CSS Variables/index.html | 76 ++++++++++++++++++++++ 3 files changed, 259 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index.html create mode 100644 02 - JS and CSS Clock/index.html create mode 100644 03 - CSS Variables/index.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..824fac327a --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,86 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html new file mode 100644 index 0000000000..59c3689783 --- /dev/null +++ b/02 - JS and CSS Clock/index.html @@ -0,0 +1,97 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..fc5cd9f076 --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,76 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From b23d4dd62dbdc2cbef606e80f9d75c105fb1b29f Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Fri, 6 Oct 2017 08:50:36 -0400 Subject: [PATCH 02/11] tutorial 4 --- 04 - Array Cardio Day 1/index.html | 115 +++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 04 - Array Cardio Day 1/index.html diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..72b8145b01 --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,115 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From acec97583d5ed07fcc1a8d2409e0cf2113fa5e8c Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Fri, 6 Oct 2017 09:27:19 -0400 Subject: [PATCH 03/11] tutorial 5 --- 05 - Flex Panel Gallery/index.html | 138 +++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 05 - Flex Panel Gallery/index.html diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..8089dce7a8 --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,138 @@ + + + + + Flex Panels 💪 + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + From 42b0c3363dfd86e7e55f90357057bae566ec3a48 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Mon, 16 Oct 2017 10:31:15 -0400 Subject: [PATCH 04/11] lesson 6 --- 06 - Type Ahead/index.html | 62 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 06 - Type Ahead/index.html diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..165b35b6f1 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,62 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From a386cab2d6aae42182c007e610fa94ec366a6a92 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Mon, 16 Oct 2017 10:46:44 -0400 Subject: [PATCH 05/11] lesson 7 --- 07 - Array Cardio Day 2/index.html | 66 ++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 07 - Array Cardio Day 2/index.html diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html new file mode 100644 index 0000000000..22a6a50264 --- /dev/null +++ b/07 - Array Cardio Day 2/index.html @@ -0,0 +1,66 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 4c681633d897619a4afddc1722cef05db6d33ef8 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Wed, 25 Oct 2017 14:52:47 -0400 Subject: [PATCH 06/11] lesson 8 --- 08 - Fun with HTML5 Canvas/index.html | 72 +++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index.html diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..06fe916e0b --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,72 @@ + + + + + HTML5 Canvas + + + + + + + + + From 4950a44e070fe3414626d99e75e4489da5c50e43 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Thu, 26 Oct 2017 08:54:55 -0400 Subject: [PATCH 07/11] lesson 9 --- 09 - Dev Tools Domination/index.html | 86 ++++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 09 - Dev Tools Domination/index.html diff --git a/09 - Dev Tools Domination/index.html b/09 - Dev Tools Domination/index.html new file mode 100644 index 0000000000..f8efaa7d8b --- /dev/null +++ b/09 - Dev Tools Domination/index.html @@ -0,0 +1,86 @@ + + + + + + Console Tricks! + + + + +

×BREAK×DOWN×

+ + + + + \ No newline at end of file From 00ef508abc9fed6ee688d77cc31e74d7ce748c12 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Fri, 3 Nov 2017 08:52:08 -0400 Subject: [PATCH 08/11] lesson 10 --- .../index.html | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index.html diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html new file mode 100644 index 0000000000..fd5fa671b1 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -0,0 +1,136 @@ + + + + + + Hold Shift to Check Multiple Checkboxes + + + + + +
+
+ +

This is an inbox layout.

+
+
+ +

Check one item

+
+
+ +

Hold down your Shift key

+
+
+ +

Check a lower item

+
+
+ +

Everything inbetween should also be set to checked

+
+
+ +

Try do it with out any libraries

+
+
+ +

Just regular JavaScript

+
+
+ +

Good Luck!

+
+
+ +

Don't forget to tweet your result!

+
+
+ + + + + \ No newline at end of file From 1e4e354b03745aef542010ebec2dd3c216d4d879 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Fri, 3 Nov 2017 10:53:55 -0400 Subject: [PATCH 09/11] lesson 11 --- 11 - Custom Video Player/index.html | 30 +++++---- 11 - Custom Video Player/scripts.js | 86 ++++++++++++++++++++++++++ 11 - Custom Video Player/style.css | 94 +++++++++++++++-------------- 3 files changed, 151 insertions(+), 59 deletions(-) diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html index 281a15eaa8..44da6b8b9c 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -1,27 +1,31 @@ + HTML Video Player + -
- +
+ -
-
+
+
-
- - - - - -
-
+
+ + + + + + +
+
- + + \ No newline at end of file diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..f7be39adc2 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,86 @@ +/* Get our elements */ +const player = document.querySelector('.player') +const video = player.querySelector('.viewer') +const progress = player.querySelector('.progress') +const progressBar = player.querySelector('.progress__filled') +const toggle = player.querySelector('.toggle') +const skipButtons = player.querySelectorAll('[data-skip]') +const ranges = player.querySelectorAll('.player__slider') +const fullScreen = player.querySelector('.fullscreen') + +/* Build our functions */ +function togglePlay() { + video.paused ? video.play() : video.pause() +} + +function updateButton() { + this.paused ? (toggle.textContent = '►') : (toggle.textContent = '❚ ❚') +} + +function skip() { + video.currentTime += parseFloat(this.dataset.skip) +} + +function handleRangeUpdate() { + video[this.name] = this.value +} + +function handleProgress() { + const percent = video.currentTime / video.duration * 100 + progressBar.style.flexBasis = `${percent}%` +} + +function scrub(e) { + const scrubTime = e.offsetX / progress.offsetWidth * video.duration + video.currentTime = scrubTime +} + +function toggleFullScreen() { + if (fullscreen) { + if (video.exitFullscreen) { + video.exitFullscreen() + } else if (video.mozExitFullScreen) { + video.mozExitFullScreen() + } else if (video.webkitExitFullScreen) { + video.webkitExitFullScreen() + } else if (video.msExitFullscreen) { + video.msExitFullscreen() + } + } else { + if (video.requestFullscreen) { + video.requestFullscreen() + } else if (video.mozRequestFullScreen) { + video.mozRequestFullScreen() + } else if (video.webkitRequestFullScreen) { + video.webkitRequestFullScreen() + } else if (video.msRequestFullscreen) { + video.msRequestFullscreen() + } + } + + fullscreen = !fullscreen +} + +/* Hook up the event listeners */ +video.addEventListener('click', togglePlay) +video.addEventListener('play', updateButton) +video.addEventListener('pause', updateButton) +video.addEventListener('timeupdate', handleProgress) + +toggle.addEventListener('click', togglePlay) + +skipButtons.forEach(skipButton => skipButton.addEventListener('click', skip)) + +ranges.forEach(rangeSlider => + rangeSlider.addEventListener('change', handleRangeUpdate) +) + +let mousedown = false +let fullscreen = false + +progress.addEventListener('click', scrub) +progress.addEventListener('mousemove', e => mousedown && scrub(e)) +progress.addEventListener('mousedown', () => (mousedown = true)) +progress.addEventListener('mouseup', () => (mousedown = false)) + +fullScreen.addEventListener('click', toggleFullScreen) diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index ab3b5b2ce8..a17601697c 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -2,26 +2,28 @@ html { box-sizing: border-box; } -*, *:before, *:after { +*, +*:before, +*:after { box-sizing: inherit; } body { margin: 0; padding: 0; - display:flex; - background:#7A419B; - min-height:100vh; - background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%); - background-size:cover; + display: flex; + background: #7a419b; + min-height: 100vh; + background: linear-gradient(135deg, #7c1599 0%, #921099 48%, #7e4ae8 100%); + background-size: cover; align-items: center; justify-content: center; } .player { - max-width:750px; - border:5px solid rgba(0,0,0,0.2); - box-shadow:0 0 20px rgba(0,0,0,0.2); + max-width: 750px; + border: 5px solid rgba(0, 0, 0, 0.2); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); position: relative; font-size: 0; overflow: hidden; @@ -43,15 +45,15 @@ body { } .player__button { - background:none; - border:0; - line-height:1; - color:white; + background: none; + border: 0; + line-height: 1; + color: white; text-align: center; - outline:0; + outline: 0; padding: 0; - cursor:pointer; - max-width:50px; + cursor: pointer; + max-width: 50px; } .player__button:focus { @@ -59,19 +61,19 @@ body { } .player__slider { - width:10px; - height:30px; + width: 10px; + height: 30px; } .player__controls { - display:flex; + display: flex; position: absolute; - bottom:0; + bottom: 0; width: 100%; transform: translateY(100%) translateY(-5px); - transition:all .3s; - flex-wrap:wrap; - background:rgba(0,0,0,0.1); + transition: all 0.3s; + flex-wrap: wrap; + background: rgba(0, 0, 0, 0.1); } .player:hover .player__controls { @@ -79,52 +81,52 @@ body { } .player:hover .progress { - height:15px; + height: 15px; } .player__controls > * { - flex:1; + flex: 1; } .progress { - flex:10; + flex: 10; position: relative; - display:flex; - flex-basis:100%; - height:5px; - transition:height 0.3s; - background:rgba(0,0,0,0.5); - cursor:ew-resize; + display: flex; + flex-basis: 100%; + height: 5px; + transition: height 0.3s; + background: rgba(0, 0, 0, 0.5); + cursor: ew-resize; } .progress__filled { - width:50%; - background:#ffc600; - flex:0; - flex-basis:50%; + width: 50%; + background: #ffc600; + flex: 0; + flex-basis: 0%; } /* unholy css to style input type="range" */ -input[type=range] { +input[type='range'] { -webkit-appearance: none; - background:transparent; + background: transparent; width: 100%; margin: 0 5px; } -input[type=range]:focus { +input[type='range']:focus { outline: none; } -input[type=range]::-webkit-slider-runnable-track { +input[type='range']::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); - background: rgba(255,255,255,0.8); + background: rgba(255, 255, 255, 0.8); border-radius: 1.3px; border: 0.2px solid rgba(1, 1, 1, 0); } -input[type=range]::-webkit-slider-thumb { +input[type='range']::-webkit-slider-thumb { height: 15px; width: 15px; border-radius: 50px; @@ -132,12 +134,12 @@ input[type=range]::-webkit-slider-thumb { cursor: pointer; -webkit-appearance: none; margin-top: -3.5px; - box-shadow:0 0 2px rgba(0,0,0,0.2); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); } -input[type=range]:focus::-webkit-slider-runnable-track { +input[type='range']:focus::-webkit-slider-runnable-track { background: #bada55; } -input[type=range]::-moz-range-track { +input[type='range']::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; @@ -146,7 +148,7 @@ input[type=range]::-moz-range-track { border-radius: 1.3px; border: 0.2px solid rgba(1, 1, 1, 0); } -input[type=range]::-moz-range-thumb { +input[type='range']::-moz-range-thumb { box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); height: 15px; width: 15px; From 40d6375bfd30ba458a2644becf7b491878ae8de1 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Fri, 10 Nov 2017 14:25:50 -0500 Subject: [PATCH 10/11] lessons 12-13 --- 12 - Key Sequence Detection/index.html | 28 +++ 13 - Slide in on Scroll/index.html | 239 +++++++++++++++++++++++++ 2 files changed, 267 insertions(+) create mode 100644 12 - Key Sequence Detection/index.html create mode 100644 13 - Slide in on Scroll/index.html diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html new file mode 100644 index 0000000000..b0e995c25d --- /dev/null +++ b/12 - Key Sequence Detection/index.html @@ -0,0 +1,28 @@ + + + + + + Key Detection + + + + + + + + \ No newline at end of file diff --git a/13 - Slide in on Scroll/index.html b/13 - Slide in on Scroll/index.html new file mode 100644 index 0000000000..2fa23a1bc0 --- /dev/null +++ b/13 - Slide in on Scroll/index.html @@ -0,0 +1,239 @@ + + + + + + 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 5c8c73eab11a230278ebcd703cae5b358fd4ff02 Mon Sep 17 00:00:00 2001 From: Bryan Hutchinson Date: Fri, 15 Dec 2017 17:05:38 -0500 Subject: [PATCH 11/11] lessons 14-16 --- .../index.html | 100 ++++++++++++++++++ 15 - LocalStorage/index.html | 95 +++++++++++++++++ 16 - Mouse Move Shadow/index.html | 70 ++++++++++++ 3 files changed, 265 insertions(+) create mode 100644 14 - JavaScript References VS Copying/index.html create mode 100644 15 - LocalStorage/index.html create mode 100644 16 - Mouse Move Shadow/index.html diff --git a/14 - JavaScript References VS Copying/index.html b/14 - JavaScript References VS Copying/index.html new file mode 100644 index 0000000000..acde00e84b --- /dev/null +++ b/14 - JavaScript References VS Copying/index.html @@ -0,0 +1,100 @@ + + + + + + JS Reference VS Copy + + + + + + + + + \ No newline at end of file diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.html new file mode 100644 index 0000000000..b74bcb62d1 --- /dev/null +++ b/15 - LocalStorage/index.html @@ -0,0 +1,95 @@ + + + + + + LocalStorage + + + + + + + + + + + + + + + + + +
+

LOCAL TAPAS

+

+
    +
  • Loading Tapas...
    • +
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html new file mode 100644 index 0000000000..5f8410fd18 --- /dev/null +++ b/16 - Mouse Move Shadow/index.html @@ -0,0 +1,70 @@ + + + + + + Mouse Shadow + + + + +
+

🔥WOAH!

+
+ + + + + + + \ No newline at end of file