diff --git a/01 - JavaScript Drum Kit/images/background.jpg b/01 - JavaScript Drum Kit/images/background.jpg new file mode 100644 index 0000000..590036d Binary files /dev/null and b/01 - JavaScript Drum Kit/images/background.jpg differ diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index c771dea..7cde0ec 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,10 +1,12 @@ + JS Drum Kit - + + @@ -47,19 +49,59 @@ - - - - - - - - - + + + + + + + + + - + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320..cbb38d4 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background:url(images/background.jpg) bottom center; background-size: cover; } body,html { diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384..be90e34 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -1,34 +1,36 @@ + JS + CSS Clock + -
-
-
-
-
-
+
+
+
+
+
+
+ - + + \ No newline at end of file diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607..916a16d 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -26,6 +26,12 @@

Update CSS Variables with JS

misc styles, nothing to do with CSS variables */ + :root { + --base: #ffc600; + --blur: 0px; + --spacing: 0px; + } + body { text-align: center; } @@ -38,16 +44,57 @@

Update CSS Variables with JS

font-size: 50px; } - .controls { + .controls { margin-bottom: 50px; } input { width:100px; } + + img { + padding: var(--spacing); + filter: blur(var(--blur)); + background: var(--base); + } + diff --git a/04 - Array Cardio Day 1/index-SOYAINE.html b/04 - Array Cardio Day 1/index-SOYAINE.html index f9f8dbf..a1ff32a 100644 --- a/04 - Array Cardio Day 1/index-SOYAINE.html +++ b/04 - Array Cardio Day 1/index-SOYAINE.html @@ -132,7 +132,7 @@ // 7. sort Exercise // Sort the people alphabetically by last name // 按照姓氏的字母进行排序 - const sortName = inventors.sort((a, b) => { + const sortName = people.sort((a, b) => { return (a.last > b.last) ? 1 : -1; }) console.table(sortName); diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 4162bce..c3cdcad 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,9 +1,11 @@ + Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

- + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-Yzh.html b/05 - Flex Panel Gallery/index-Yzh.html new file mode 100644 index 0000000..677ab46 --- /dev/null +++ b/05 - Flex Panel Gallery/index-Yzh.html @@ -0,0 +1,205 @@ + + + + + + Flex Panels 💪 + + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/06 - Type Ahead/index-SOYAINE.html b/06 - Type Ahead/index-SOYAINE.html index 927d08d..890247a 100644 --- a/06 - Type Ahead/index-SOYAINE.html +++ b/06 - Type Ahead/index-SOYAINE.html @@ -14,61 +14,53 @@
  • - - - - - - - - + }).join(''); + // console.log(html); + suggestions.innerHTML = html; + } + const search = document.querySelector('.search'); + const suggestions = document.querySelector('.suggestions'); + search.addEventListener('change', displayMatches); + search.addEventListener('keyup', displayMatches); + // console.log(poetrys); + + + \ No newline at end of file diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886..25f1ca6 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,10 +1,12 @@ + Type Ahead 👀 +
    @@ -14,9 +16,55 @@
  • or a state
    • - + - - - + \ No newline at end of file diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 206ec31..9a6ef49 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -24,6 +24,35 @@ { text: 'Nice Nice Nice!', id: 542328 } ]; + + // 针对 people 数组： + + // 是否有人超过 19 岁？ + const currentYear = (new Date()).getFullYear(); + const isAllOver19 = people.every(person => person.year - currentYear >= 19); + console.log(isAllOver19); + // 是否所有人都是成年人？ + const isAllOver18 = people.every(person => person.year - currentYear >= 18); + console.log(isAllOver18); + // 针对 comments 数组： + + // 找到 ID 号为 823423 的评论 + const findComment = comments.find(person => person.id === 823423); + console.log(findComment); + + // 删除 ID 号为 823423 的评论 + // 获取此 ID 对应元素在数组中所处的位置 + // 利用位置，删除该子元素 + // 或者拼接新的数组 + const findCommentIndex = comments.findIndex(person => person.id === 823423); + // 不改变原数组 + const newComments = [ + ...comments.slice(0, findCommentIndex), + ...comments.slice(findCommentIndex + 1) + ]; + // comments.splice(findCommentIndex, 1); + // console.log(comments); + // Some and Every Checks // Array.prototype.some() // is at least one person 19? // Array.prototype.every() // is everyone 19? diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148d..b543f04 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,19 +1,89 @@ + HTML5 Canvas + - - + + + + + - + + \ No newline at end of file diff --git a/09 - Dev Tools Domination/index-SOYAINE.html b/09 - Dev Tools Domination/index-SOYAINE.html index a8780bd..4dcbabd 100644 --- a/09 - Dev Tools Domination/index-SOYAINE.html +++ b/09 - Dev Tools Domination/index-SOYAINE.html @@ -9,7 +9,13 @@

    ×点×我×呀×

    diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed31..81a90f9 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -1,51 +1,52 @@ + Document + - diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29..6e3cec2 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,68 @@ +; (function () { + const player = document.querySelector('.player'); + const video = player.querySelector('.viewer'); + const toggleButton = player.querySelector('.toggle'); + const sliders = player.querySelectorAll('.player__slider'); + const skipsButton = player.querySelectorAll('[data-skip]'); + const progress = player.querySelector('.progress'); + const progressFiled = progress.querySelector('.progress__filled'); + + + function toggleHandler() { + const method = video.paused ? 'play' : 'pause'; + video[method](); + } + + function updatePlayButton() { + const icon = this.paused ? '►' : '| |'; + toggleButton.innerHTML = icon; + } + + function sliderHandler() { + video[this.name] = this.value; + } + + function skipHandler() { + video.currentTime += parseFloat(this.dataset.skip); + } + + function updateProgressFiled() { + progressFiled.style.flexBasis = `${(video.currentTime / video.duration) * 100}%`; + } + + function jumpProgress(e){ + // 进度跳转 + const jumpTime = (e.offsetX / this.offsetWidth) * video.duration; + video.currentTime = jumpTime; + } + + // 播放进度条 + video.addEventListener('timeupdate', updateProgressFiled); + + // 拖动进度条 + let mousedown = false; + progressFiled.addEventListener('mousedown', () => mousedown = true); + /* + 这里使用了 bool && function() 语法 + 代表 bool === true 时 执行 function + 省去 if(bool){function()}; + 类似的还有 bool || function() + 即 bool === false 时 执行 function + */ + progress.addEventListener('mouseup', (e) => mousedown && jumpProgress(e)); + progress.addEventListener('click', jumpProgress); + + + // 按钮暂停/开始 + toggleButton.addEventListener('click', toggleHandler); + video.addEventListener('click', toggleHandler); + video.addEventListener('play', updatePlayButton); + video.addEventListener('pause', updatePlayButton); + + // 播放速度/音量 + sliders.forEach(s => s.addEventListener('change', sliderHandler)) + // 快进/回退 + skipsButton.forEach(s => s.addEventListener('click', skipHandler)) + + +}()) \ No newline at end of file diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c..b6253af 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -89,7 +89,7 @@ body { width:50%; background:#ffc600; flex:0; - flex-basis:50%; + flex-basis:0%; } /* unholy css to style input type="range" */ diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 8cab786..b47868c 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -1,12 +1,40 @@ + Key Detection + + - - + + \ No newline at end of file diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 0b9fb8f..fa1b60d 100755 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -1,41 +1,143 @@ + 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.

    +

    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. 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

    +

    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.

    +

    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

    +

    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.

    +

    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.

    +

    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.

    @@ -44,34 +146,73 @@

    Slide in on Scroll

    - + + \ No newline at end of file diff --git a/14 - JavaScript References VS Copying/index-SOYAINE.html b/14 - JavaScript References VS Copying/index-SOYAINE.html index acf3f62..c420122 100644 --- a/14 - JavaScript References VS Copying/index-SOYAINE.html +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -101,12 +101,17 @@ } }; -// console.clear(); -// console.log(wes); + + + console.clear(); + console.log(wes); const dev = Object.assign({}, wes); const dev2 = JSON.parse(JSON.stringify(wes)); + wes.name = 'yzh'; + + console.log(dev, dev2); diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html index d444f1d..b9e3fba 100755 --- a/15 - LocalStorage/index-START.html +++ b/15 - LocalStorage/index-START.html @@ -1,38 +1,98 @@ - - - LocalStorage - - - - - + + + + + + + + + + -
    -

    LOCAL TAPAS

    -

    -
      -
    • Loading Tapas...
      • -
    -
    - - -
    -
    +
    +

    LOCAL TAPAS

    +

    +
      +
    • Loading Tapas...
      • +
    +
    + + +
    +
    - + function createItemList(_items, _itemsList) { + _itemsList.innerHTML = _items + .map((item, i) => { + return ` +
  • + + +
    • `; + }) + .join(""); + } - - + function addItem(e) { + e.preventDefault(); + const value = this.querySelector('input[name="item"]').value; + items.push({ text: value, done: false }); + localStorage.setItem("items", JSON.stringify(items)); + createItemList(items, itemsList); + } + + function toggleItem(e) { + // e.target 可能有两种不同的选项 + if (!e.target.matches("input")) return; + const el = e.target; + const i = el.dataset.index; + items[i].done = el.checked; + localStorage.setItem("items", JSON.stringify(items)); + } + createItemList(items, itemsList); + addItems.addEventListener("submit", addItem); + itemsList.addEventListener("click", toggleItem); + + + + diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index 543cb51..88ccf10 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -1,40 +1,69 @@ - - - Mouse Shadow - - - -
    -

    🔥WOAH!

    -
    - - - - - + + + Mouse Shadow + + +
    +

    🔥WOAH!

    +
    + + + + + +0 diff --git a/17 - Sort Without Articles/index-start.html b/17 - Sort Without Articles/index-start.html index 9bbd250..533d658 100644 --- a/17 - Sort Without Articles/index-start.html +++ b/17 - Sort Without Articles/index-start.html @@ -1,53 +1,72 @@ - - - Sort Without Articles - - + + + Sort Without Articles + + + - a { - color: #ffc600; - text-decoration: none; - } + - + - - + const bandsUl = document.getElementById("bands"); + bandsUl.innerHTML = bands + .sort((a, b) => (delPrefix(a) > delPrefix(b) ? 1 : -1)) + .map((band) => `
  • ${band}
    • `) + .join(""); + + diff --git a/18 - AddingUpTimesWithReduce/index-start.html b/18 - AddingUpTimesWithReduce/index-start.html index abdf4c9..df0f36d 100644 --- a/18 - AddingUpTimesWithReduce/index-start.html +++ b/18 - AddingUpTimesWithReduce/index-start.html @@ -1,187 +1,87 @@ - - - Videos - - - - - + + + Videos + + + + + diff --git a/19 - Webcam Fun/README.md b/19 - Webcam Fun/README.md index 389458d..77683d3 100644 --- a/19 - Webcam Fun/README.md +++ b/19 - Webcam Fun/README.md @@ -1,13 +1,13 @@ # 19 Webcam Fun 中文指南 > 本篇作者：©[大史不说话](https://github.com/dashnowords)——Chinasoft Frontend Web Developer - +**** > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 19 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-08-31 最后更新：2017-09-02 -## 挑战任务 +****## 挑战任务 在`index-start.html`中提供了一个名为**Take Photo**的按钮，该按钮的点击事件会触发`takePhoto()`函数，并提供了一组标有RGBmin/max标记的`range`类型`input`元素，一个`canvas`元素，一个`video`元素，以及带有`strip`类名的空`div`元素。 本次的编程任务： 1.通过编写javascript代码，请求调用用户的网络摄像头; diff --git a/22 - Follow Along Link Highlighter/index-start.html b/22 - Follow Along Link Highlighter/index-start.html index 8476112..6611363 100644 --- a/22 - Follow Along Link Highlighter/index-start.html +++ b/22 - Follow Along Link Highlighter/index-start.html @@ -1,12 +1,11 @@ - - - 👀👀👀Follow Along Nav - - - - + + + 👀👀👀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!

    +

    + 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/23 - Speech Synthesis/index-finished-Dashrun.html b/23 - Speech Synthesis/index-finished-Dashrun.html index 56affc8..810c70f 100644 --- a/23 - Speech Synthesis/index-finished-Dashrun.html +++ b/23 - Speech Synthesis/index-finished-Dashrun.html @@ -40,6 +40,7 @@

    听说 5000

    //获得浏览器支持的阅读语言并填充至下拉列表 function getSupportVoice() { voices = synth.getVoices(); + console.log(voices); for(i = 0; i < voices.length ; i++) { var option = document.createElement('option'); option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; diff --git a/23 - Speech Synthesis/index-start.html b/23 - Speech Synthesis/index-start.html index b909453..70ce65d 100644 --- a/23 - Speech Synthesis/index-start.html +++ b/23 - Speech Synthesis/index-start.html @@ -1,40 +1,90 @@ - - - Speech Synthesis - - - + + + Speech Synthesis + + + +
    +

    The Voiceinator 5000

    -
    + -

    The Voiceinator 5000

    + + - + - - + + + + +
    - + + function getSupportVoice() { + voices = synth.getVoices(); + voices.forEach((voice) => { + const option = document.createElement('option'); + option.textContent = voice.name; + option.dataset.lang = voice.lang; + voicesDropdown.appendChild(option); + }); + } + function changeSynth() { + msg[this.name] = this.value; + } + function getSupportVoice() { + voices = synth.getVoices(); + voices.forEach((voice) => { + const option = document.createElement('option'); + option.textContent = voice.name; + option.dataset.lang = voice.lang; + voicesDropdown.appendChild(option); + }); + } + synth.addEventListener('voiceschanged', getSupportVoice); + speakButton.addEventListener('click', () => synth.speak(msg)); + stopButton.addEventListener('click', () => synth.cancel(msg)); + const options = [ + ...document.querySelectorAll('[type="range"], [name="text"]'), + ]; + options.forEach((opt) => { + opt.addEventListener('change', changeSynth); + + }); - + function dropdownChangeHandler(e) { + msg.voice = voices.find((voice) => voice.name === this.value); + const dropdowns = Array.from(voicesDropdown.children); + console.log(dropdowns); + // msg.lang = dropdowns.find((option) => option.value === this.value).getAttribute('data-lang'); + console.log(msg); + } + + voicesDropdown.addEventListener('change', dropdownChangeHandler); + + diff --git a/24 - Sticky Nav/index-start.html b/24 - Sticky Nav/index-start.html index 27ecf6c..ca47be1 100644 --- a/24 - Sticky Nav/index-start.html +++ b/24 - Sticky Nav/index-start.html @@ -1,61 +1,291 @@ - - - Sticky Nav - - - + + + Sticky Nav + + + +
    +

    A story about getting lost.

    +
    -
    -

    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. 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 +

    - + -

    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. +

    -

    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.

    - - - -

    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/25 - Event Related/index-start.html b/25 - Event Related/index-start.html index f07d00d..3da0596 100644 --- a/25 - Event Related/index-start.html +++ b/25 - Event Related/index-start.html @@ -50,23 +50,23 @@ let two = document.querySelector('.two'); let three = document.querySelector('.three'); divs.forEach(div => div.addEventListener('click', logText, { - once: true, - capture: false + capture: false, + })); // one.addEventListener('click', logText1, { - // // capture: true + // capture: true // }); // two.addEventListener('click', logText2, { - // // capture: true + // capture: false // }); // three.addEventListener('click', logText3, { - // capture: true + // capture: false // }); - function logText(e) { console.log(this.classList.value); + console.log(e.path); // e.stopPropagation(); } @@ -82,7 +82,7 @@ function logText3(e) { console.log(this.classList.value); - e.stopPropagation(); + // e.stopPropagation(); } diff --git a/26 - Stripe Follow Along Nav/index-finished-Dashrun.html b/26 - Stripe Follow Along Nav/index-finished-Dashrun.html index edb536e..21197b2 100644 --- a/26 - Stripe Follow Along Nav/index-finished-Dashrun.html +++ b/26 - Stripe Follow Along Nav/index-finished-Dashrun.html @@ -230,7 +230,7 @@

    Cool

    var itemPos; if(item === 1 || item === 2 || item ===3){ //计算位置 - itemPos = document.querySelector('.dropdown'+item).getBoundingClientRect(); + itemPos = document.querySelector('.dropdown'+item). (); bg.style.left = `${itemPos.left}px`; bg.style.top = `${itemPos.top-60}px`; bg.classList.add('open'); diff --git a/26 - Stripe Follow Along Nav/index-start.html b/26 - Stripe Follow Along Nav/index-start.html index 9780d0d..acf523c 100644 --- a/26 - Stripe Follow Along Nav/index-start.html +++ b/26 - Stripe Follow Along Nav/index-start.html @@ -1,214 +1,254 @@ - - - Follow Along Nav - - -

    Cool

    - - - - - - - + +
  • + Courses + +
    • +
  • + Other Links + +
    • + + + + + + + diff --git a/27 - Click and Drag/README.md b/27 - Click and Drag/README.md index 1ab97b3..c48c35c 100644 --- a/27 - Click and Drag/README.md +++ b/27 - Click and Drag/README.md @@ -5,7 +5,7 @@ > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 27 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) > 创建时间：2017-10-24 -最后更新：2017-10-229 +最后更新：2017-10-29 ## 挑战任务 初始文档`index-start.html`中提供了一组条幅，本次的编程任务需要实现的效果是当鼠标拖动画面移动时，条幅同步向水平方向移动。 diff --git a/27 - Click and Drag/index-start.html b/27 - Click and Drag/index-start.html index b860931..e6d8530 100644 --- a/27 - Click and Drag/index-start.html +++ b/27 - Click and Drag/index-start.html @@ -1,41 +1,75 @@ - - - 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
    -
    + + + 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/style.css b/27 - Click and Drag/style.css index 348a71b..ae48cfa 100644 --- a/27 - Click and Drag/style.css +++ b/27 - Click and Drag/style.css @@ -40,7 +40,7 @@ body { background: rgba(255,255,255,0.3); cursor: grabbing; cursor: -webkit-grabbing; - transform: scale(1); + transform: (1); } .item { diff --git a/28 - Video Speed Controller/index-start.html b/28 - Video Speed Controller/index-start.html index 8bd536b..c1b2083 100644 --- a/28 - Video Speed Controller/index-start.html +++ b/28 - Video Speed Controller/index-start.html @@ -1,20 +1,56 @@ - - - Video Speed Scrubber - - - - -
    - -
    -
    1×
    + + + Video Speed Scrubber + + + +
    + +
    +
    1×
    +
    -
    - - + + diff --git a/29 - Countdown Timer/index-start.html b/29 - Countdown Timer/index-start.html index d54f447..d18f7a7 100644 --- a/29 - Countdown Timer/index-start.html +++ b/29 - Countdown Timer/index-start.html @@ -1,29 +1,85 @@ - - - Countdown Timer - - - - -
    -
    - - - - - -
    - -
    + + + Countdown Timer + + + + +
    +
    + + + + + +
    + +
    +
    +
    +

    +

    +
    -
    -

    -

    -
    -
    - - + + + diff --git a/30 - Whack A Mole/dirt.svg b/30 - Whack A Mole/dirt.svg new file mode 100644 index 0000000..8726a9e --- /dev/null +++ b/30 - Whack A Mole/dirt.svg @@ -0,0 +1,40 @@ + + + + dirt + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/30 - Whack A Mole/index-FINISHED.html b/30 - Whack A Mole/index-FINISHED.html new file mode 100644 index 0000000..39bbc40 --- /dev/null +++ b/30 - Whack A Mole/index-FINISHED.html @@ -0,0 +1,87 @@ + + + + + Whack A Mole! + + + + + +

    Whack-a-mole! 0

    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html new file mode 100644 index 0000000..532ac8c --- /dev/null +++ b/30 - Whack A Mole/index-START.html @@ -0,0 +1,62 @@ + + + + + Whack A Mole! + + + + +

    Whack-a-mole! 0

    + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + diff --git a/30 - Whack A Mole/mole.svg b/30 - Whack A Mole/mole.svg new file mode 100644 index 0000000..73769a1 --- /dev/null +++ b/30 - Whack A Mole/mole.svg @@ -0,0 +1,56 @@ + + + + mole + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css new file mode 100644 index 0000000..03779ff --- /dev/null +++ b/30 - Whack A Mole/style.css @@ -0,0 +1,69 @@ +html { + box-sizing: border-box; + font-size: 10px; + background: #ffc600; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + padding: 0; + margin: 0; + font-family: 'Amatic SC', cursive; +} + +h1 { + text-align: center; + font-size: 10rem; + line-height: 1; + margin-bottom: 0; +} + +.score { + background: rgba(255,255,255,0.2); + padding: 0 3rem; + line-height: 1; + border-radius: 1rem; +} + +.game { + width: 600px; + height: 400px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; +} + +.hole { + flex: 1 0 33.33%; + overflow: hidden; + position: relative; +} + +.hole:after { + display: block; + background: url(dirt.svg) bottom center no-repeat; + background-size: contain; + content: ''; + width: 100%; + height:70px; + position: absolute; + z-index: 2; + bottom: -30px; +} + +.mole { + background: url('mole.svg') bottom center no-repeat; + background-size: 60%; + position: absolute; + top: 100%; + width: 100%; + height: 100%; + transition:all 0.4s; +} + +.hole.up .mole { + top: 0; +} diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..ec5ea6a --- /dev/null +++ b/debug.log @@ -0,0 +1 @@ +[0120/103718.734:ERROR:directory_reader_win.cc(43)] FindFirstFile: ϵͳҲָ· (0x3) diff --git a/sounds/boom.wav b/sounds/boom.wav new file mode 100644 index 0000000..8d6423b Binary files /dev/null and b/sounds/boom.wav differ diff --git a/sounds/clap.wav b/sounds/clap.wav new file mode 100644 index 0000000..ef952e5 Binary files /dev/null and b/sounds/clap.wav differ diff --git a/sounds/hihat.wav b/sounds/hihat.wav new file mode 100644 index 0000000..885cb19 Binary files /dev/null and b/sounds/hihat.wav differ diff --git a/sounds/kick.wav b/sounds/kick.wav new file mode 100644 index 0000000..8fe46de Binary files /dev/null and b/sounds/kick.wav differ diff --git a/sounds/openhat.wav b/sounds/openhat.wav new file mode 100644 index 0000000..5063752 Binary files /dev/null and b/sounds/openhat.wav differ diff --git a/sounds/ride.wav b/sounds/ride.wav new file mode 100644 index 0000000..e5829df Binary files /dev/null and b/sounds/ride.wav differ diff --git a/sounds/snare.wav b/sounds/snare.wav new file mode 100644 index 0000000..c4edfc7 Binary files /dev/null and b/sounds/snare.wav differ diff --git a/sounds/tink.wav b/sounds/tink.wav new file mode 100644 index 0000000..f907ea2 Binary files /dev/null and b/sounds/tink.wav differ diff --git a/sounds/tom.wav b/sounds/tom.wav new file mode 100644 index 0000000..9e2cdf6 Binary files /dev/null and b/sounds/tom.wav differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..3e0a320 --- /dev/null +++ b/style.css @@ -0,0 +1,50 @@ +html { + font-size: 10px; + background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background-size: cover; +} +body,html { + margin: 0; + padding: 0; + font-family: sans-serif; +} + +.keys { + display:flex; + flex:1; + min-height:100vh; + align-items: center; + justify-content: center; +} + +.key { + border:4px solid black; + border-radius:5px; + margin:1rem; + font-size: 1.5rem; + padding:1rem .5rem; + transition:all .07s; + width:100px; + text-align: center; + color:white; + background:rgba(0,0,0,0.4); + text-shadow:0 0 5px black; +} + +.playing { + transform:scale(1.1); + border-color:#ffc600; + box-shadow: 0 0 10px #ffc600; +} + +kbd { + display: block; + font-size: 40px; +} + +.sound { + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: 1px; + color:#ffc600; +} diff --git a/tools/utils.js b/tools/utils.js new file mode 100644 index 0000000..5760687 --- /dev/null +++ b/tools/utils.js @@ -0,0 +1,28 @@ +function getAttr(key, obj, defaults = null) { + // 获取对象属性 不存在返回defaults + if (obj.hasOwnProperty) { + return collection[key] + } + else { + return defaults + } +} + + +function quickCheck(arr, elem) { + if (arr.indexOf(elem) > 0) { + return true; + } + else { + return false; + } +} + +// console tools +let console = { + isDev: true, + log(...args){ + if(!this.isDev) return; + window.console.log(...args); + } +} \ No newline at end of file