diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 0e9d90b..9a44f38 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -1,83 +1,86 @@ + - - JS Drum Kit - + + JS Drum Kit + + -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - + + + + + + + + + - + const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素 + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听 + window.addEventListener('keydown', playSound); // + - + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-QUEENA.html b/01 - JavaScript Drum Kit/index-QUEENA.html new file mode 100644 index 0000000..e045328 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-QUEENA.html @@ -0,0 +1,83 @@ + + + + + + JS Drum Kit + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html index c3217fc..fca2fe3 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -1,79 +1,81 @@ + - - Scoped CSS Variables and JS + + Scoped CSS Variables and JS - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - - + + body { + text-align: center; + } + + body { + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; + } + + .controls { + margin-bottom: 50px; + } + + input { + width: 100px; + } + + + - + + \ No newline at end of file diff --git a/03 - CSS Variables/index-QUEENA.html b/03 - CSS Variables/index-QUEENA.html new file mode 100644 index 0000000..0a97035 --- /dev/null +++ b/03 - CSS Variables/index-QUEENA.html @@ -0,0 +1,83 @@ + + + + + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + + \ No newline at end of file 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..89cc52c 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,61 +1,152 @@ + - - Array Cardio 💪 + + Array Cardio 💪 + -

Psst: have a look at the JavaScript Console 💁

- + // 7. sort Exercise + // Sort the people alphabetically by last name + // const sortByLastName = inventors.sort((a, b) => a.last > b.last ? 1 : -1) + // console.table(sortByLastName) + const sortByLastName = people.sort((a, b) => { + const [afirst, alast] = a.split(', ') + const [bfirst, blast] = b.split(', ') + console.log([afirst, alast]) + return alast > blast ? 1 : -1 + }) + console.table(sortByLastName) + + + // 8. Reduce Exercise + // Sum up the instances of each of these + const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck']; + const static = data.reduce((obj, item) => { + if (!obj[item]) { + obj[item] = 0 + } + obj[item]++; + return obj + }, {}) + - + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-queena.html b/05 - Flex Panel Gallery/index-queena.html new file mode 100644 index 0000000..d4e6220 --- /dev/null +++ b/05 - Flex Panel Gallery/index-queena.html @@ -0,0 +1,176 @@ + + + + + + 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-FINISHED.html b/06 - Type Ahead/index-FINISHED.html index 5902b43..4529d08 100644 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -1,61 +1,63 @@ + - - Type Ahead 👀 - + + Type Ahead 👀 + + -
- - -
- + - - - + \ 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-queena.html b/06 - Type Ahead/index-queena.html new file mode 100644 index 0000000..4b25fb5 --- /dev/null +++ b/06 - Type Ahead/index-queena.html @@ -0,0 +1,56 @@ + + + + + + Type Ahead 👀 + + + + + +
    + + +
    + + + + \ No newline at end of file diff --git a/07 - Array Cardio Day 2/index-queena.html b/07 - Array Cardio Day 2/index-queena.html new file mode 100644 index 0000000..0c496a8 --- /dev/null +++ b/07 - Array Cardio Day 2/index-queena.html @@ -0,0 +1,77 @@ + + + + + + Array Cardio 💪💪 + + + +

    Psst: have a look at the JavaScript Console 💁

    + + + + \ No newline at end of file diff --git a/08 - Fun with HTML5 Canvas/index-queena.html b/08 - Fun with HTML5 Canvas/index-queena.html new file mode 100644 index 0000000..c939ddc --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-queena.html @@ -0,0 +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/queena.html b/10 - Hold Shift and Check Checkboxes/queena.html new file mode 100644 index 0000000..3047c5f --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/queena.html @@ -0,0 +1,144 @@ + + + + + + Document + + + + + +
    +
    + +

    This is an inbox layout.

    +
    +
    + +

    Check one item

    +
    +
    + +

    Hold down your Shift key

    +
    +
    + +

    Check a lower item

    +
    +
    + +

    Everything inbetween should also be set to checked

    +
    +
    + +

    Try do it with out any libraries

    +
    +
    + +

    Just regular JavaScript

    +
    +
    + +

    Good Luck!

    +
    +
    + +

    Don't forget to tweet your result!

    +
    +
    + + + + + \ 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..4e11b80 100644 --- a/14 - JavaScript References VS Copying/index-SOYAINE.html +++ b/14 - JavaScript References VS Copying/index-SOYAINE.html @@ -101,8 +101,8 @@ } }; -// console.clear(); -// console.log(wes); + // console.clear(); + // console.log(wes); const dev = Object.assign({}, wes); diff --git a/README.md b/README.md index 4654e0d..3a0956b 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ 创建日期：2016-12-20 最后更新：2018-12-05 -> Repo by: [未枝丫](https://github.com/soyaine) +> Repo by: [Soyaine](https://github.com/soyaine) > [JavaScript30](https://javascript30.com) 教程作者：[Wes Bos](https://github.com/wesbos) > 完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*) @@ -29,7 +29,7 @@ JavaScirpt30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 下面是完成 Wes Bos 的 JavaScript30 挑战所能借鉴的文档，每个文档的具体使用建议如下： -- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。Wes Bos 还把视频传到了百度云，进入官网直接拉到页面底部就能找到链接。 +- [JavaScript30 官网](https://javascript30.com)：进入官网注册后可以观看和下载所有教程视频。 - [Nitish Dayal 写的英文指南](https://github.com/nitishdayal/JavaScript30/tree/master/exercises)：这是一份非官方的文字版指南，也是激励我写这一系列文章的主要因素。 - [挑战初始文档](https://github.com/wesbos/JavaScript30)：这是 Wes Bos 这份教程涉及的代码，你可以直接 Clone 或者下载到本地，然后开始你 30 天的挑战之旅。文档共有 30 个文件夹，每个文件夹中至少有两个文件。 - **index-START.html**：是提供给我们的初始文档，方便我们专注于 JavaScript 的编写，这个文档已经将基础的 HTML 和 CSS 部分写好，我们只需要在这个基础上编写 JavaScript 代码，实现特定的功能即可。 @@ -81,7 +81,7 @@ Name | Contribution [@zzh466](http://github.com/zzh466) | Review [@Xing Liu](https://github.com/S1ngS1ng) | Review [@大史不说话](https://github.com/dashnowords) | No.[16](https://github.com/soyaine/JavaScript30/tree/master/16%20-%20Mouse%20Move%20Shadow).[17](https://github.com/soyaine/JavaScript30/tree/master/17%20-%20Sort%20Without%20Articles).[18](https://github.com/soyaine/JavaScript30/tree/master/18%20-%20AddingUpTimesWithReduce).[19](https://github.com/soyaine/JavaScript30/blob/master/19%20-%20Webcam%20Fun).[20](https://github.com/soyaine/JavaScript30/tree/master/20%20-%20Speech%20Detection).[21](https://github.com/soyaine/JavaScript30/tree/master/21%20-%20Geolocation).[22](https://github.com/soyaine/JavaScript30/tree/master/22%20-%20Follow%20Along%20Link%20Highlighter).[23](https://github.com/soyaine/JavaScript30/tree/master/23%20-%20Speech%20Synthesis).[24](https://github.com/soyaine/JavaScript30/tree/master/24%20-%20Sticky%20Nav).[25](https://github.com/soyaine/JavaScript30/tree/master/25%20-%20Event%20Related).[26](https://github.com/soyaine/JavaScript30/tree/master/26%20-%20Strip%20Follow%20Along%20Nav).[27](https://github.com/soyaine/JavaScript30/tree/master/27%20-%20Click%20and%20Drag).[28](https://github.com/soyaine/JavaScript30/tree/master/28%20-%20Video%20Speed%20Controller) -[@未枝丫](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying) +[@Soyaine](https://github.com/soyaine) | No.[1](https://github.com/soyaine/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit).[2](https://github.com/soyaine/JavaScript30/tree/master/02%20-%20JS%20%2B%20CSS%20Clock).[3](https://github.com/soyaine/JavaScript30/tree/master/03%20-%20CSS%20%Variables).[4](https://github.com/soyaine/JavaScript30/tree/master/04%20-%20Array%20Cardio%20Day%201).[5](https://github.com/soyaine/JavaScript30/blob/master/05%20-%20Flex%20Panel%20Gallery).[6](https://github.com/soyaine/JavaScript30/blob/master/06%20-%20Type%20Ahead).[7](https://github.com/soyaine/JavaScript30/tree/master/07%20-%20Array%20Cardio%20Day%202).[8](https://github.com/soyaine/JavaScript30/tree/master/08%20-%20Fun%20with%20HTML5%20Canvas).[9](https://github.com/soyaine/JavaScript30/blob/master/09%20-%20Dev%20Tools%20Domination).[10](https://github.com/soyaine/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md).[12](https://github.com/soyaine/JavaScript30/tree/master/12%20-%20Key%20Sequence%20Detection/README.md).[13](https://github.com/soyaine/JavaScript30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md).[14](https://github.com/soyaine/JavaScript30/tree/master/14%20-%20JavaScript%20References%20VS%20Copying) ## JOIN US 如果对这个系列的指南有什么改进的想法，欢迎[提 issue](https://github.com/soyaine/JavaScript30/issues)，如果你也想参与写作，请看 [wiki](https://github.com/soyaine/JavaScript30/wiki/%E6%8C%87%E5%8D%97%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E)，并联系 Soyaine。