A
diff --git a/01 - JavaScript Drum Kit/index-ME.html b/01 - JavaScript Drum Kit/index-ME.html
new file mode 100644
index 0000000000..968d3c1590
--- /dev/null
+++ b/01 - JavaScript Drum Kit/index-ME.html
@@ -0,0 +1,104 @@
+
+
+
+
+ JS Drum Kit
+
+
+
+
+
+ JS + CSS Clock
+
+
+
+
+
+ Scoped CSS Variables and JS
+
+
+
+
+
+
+
+
+
+
+
diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md
new file mode 100644
index 0000000000..9e9e8a1a5e
--- /dev/null
+++ b/04 - Array Cardio Day 1/README.md
@@ -0,0 +1,30 @@
+# 4 Day
+
+本次主要是学习一些数组操作。
+
+## 优化
+
+本次项目没有什么优化，只是我的代码风格和原作者不同。
+
+
+
+## 我学到的新知识
+
+- `console.table()` 可以以表格形式输出对象或数组。
+
+- `reduce()` 方法将数组缩减为单个值，用法：
+
+ ```js
+ /**
+ * @param total：必需。initialValue，或函数先前返回的值。
+ * @param currentValue：必需。当前元素的值。
+ * @param index：可选。当前元素的数组索引。
+ * @param arr：可选。当前元素所属的数组对象
+ *
+ * @param initialValue：可选。作为初始值传递给函数的值。
+ **/
+ array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
+ ```
+
+ 项目中第四和第八题是 `reduce()` 例子。
+
diff --git a/04 - Array Cardio Day 1/index-ME.html b/04 - Array Cardio Day 1/index-ME.html
new file mode 100644
index 0000000000..81ed0dbc10
--- /dev/null
+++ b/04 - Array Cardio Day 1/index-ME.html
@@ -0,0 +1,83 @@
+
+
+
+
+ Array Cardio 💪
+
+
+
+Flex Panels 💪
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index bfdba84312..10bdd182bf 100644
--- a/01 - JavaScript Drum Kit/style.css
+++ b/01 - JavaScript Drum Kit/style.css
@@ -2,6 +2,8 @@ html {
font-size: 10px;
background: url('./background.jpg') bottom center;
background-size: cover;
+ user-select: none;
+ cursor: url('https://fav.farm/🖕') 15 0, auto
}
body,html {
diff --git a/02 - JS and CSS Clock/README.md b/02 - JS and CSS Clock/README.md
new file mode 100644
index 0000000000..3dcd80006c
--- /dev/null
+++ b/02 - JS and CSS Clock/README.md
@@ -0,0 +1,20 @@
+# 2 Day
+
+## 优化：
+
+- 添加 `user-select: none;` 提升体验。
+- 添加时钟数字。（比想象中困难）
+- 修改指针长度、宽度。（比想象中困难）
+- 指针更线性的移动 `transition: all 1s`。
+- 修复角度突变时，指针跳动。
+
+
+
+## 我学到的新知识
+
+- 添加时钟数字使用了 `Grid` 布局。
+
+- 设置 `transform: rotate(*deg)` 旋转元素。
+- 设置 `transform-origin: 100%;` 设置旋转原点。
+- `setInterval(function, milliseconds)` 方法会周期性调用函数，直到调用 `clearInterval()` 或关闭窗口。
+
diff --git a/02 - JS and CSS Clock/index-ME.html b/02 - JS and CSS Clock/index-ME.html
new file mode 100644
index 0000000000..4cded80c25
--- /dev/null
+++ b/02 - JS and CSS Clock/index-ME.html
@@ -0,0 +1,175 @@
+
+
+
+
+
+ A
+ clap
+
+
+ S
+ hihat
+
+
+ D
+ kick
+
+
+ F
+ openhat
+
+
+ G
+ boom
+
+
+ H
+ ride
+
+
+ J
+ snare
+
+
+ K
+ tom
+
+
+ L
+ tink
+
+
+
+
+
+
+
+
+
+
diff --git a/03 - CSS Variables/README.md b/03 - CSS Variables/README.md
new file mode 100644
index 0000000000..889ea82b1b
--- /dev/null
+++ b/03 - CSS Variables/README.md
@@ -0,0 +1,40 @@
+# 3 Day
+
+## 优化：
+
+本次项目没有优化。
+
+因为在我完成本次练习，并和原项目做对比后，原项目的写法让我惊叹。我的编码过于冗余，最后我通过学习原项目优化了自己的代码。
+
+
+
+## 我学到的新知识
+
+- 原来 `input` 标签的 `type` 选项还有 `range`（滑块控件）、`color`（拾色器）的选项。
+
+- 设置标签的 `data-*` 属性，可在 `js` 中通过调用该 `DOM` 对象的 `dataset.*` 获取该属性的值。
+
+- 在 `css` 中可以使用 `--*` 来定义变量，该变量受级联约束，通过var(--*)调用。例子：全局自定义属性，并调用：
+
+ ```css
+ :root {
+ --spacing: 1px;
+ --blur: 0;
+ --base: #ffc600;
+ }
+
+ img {
+ padding: var(--spacing);
+ filter: blur(var(--blur));
+ background-color: var(--base);
+ }
+ ```
+
+ 在 `js` 中修改自定义属性的值需要通过 `setProperty(propertyname, value)` 方法修改：
+
+ ```javascript
+ document.documentElement.style.setProperty('--spacing', '10px')
+ ```
+
+- `css` 的 `filter` 属性，通常用于定义 `img` 的视觉效果，例如 `filter: blur(5px);` 可设置图片模糊效果。
+
diff --git a/03 - CSS Variables/index-ME.html b/03 - CSS Variables/index-ME.html
new file mode 100644
index 0000000000..b48282a598
--- /dev/null
+++ b/03 - CSS Variables/index-ME.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+ 12
+ 3
+ 6
+ 9
+
+
+
+
+
+
+ Update CSS Variables with JS
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/04 - Array Cardio Day 1/README.md b/04 - Array Cardio Day 1/README.md
new file mode 100644
index 0000000000..9e9e8a1a5e
--- /dev/null
+++ b/04 - Array Cardio Day 1/README.md
@@ -0,0 +1,30 @@
+# 4 Day
+
+本次主要是学习一些数组操作。
+
+## 优化
+
+本次项目没有什么优化，只是我的代码风格和原作者不同。
+
+
+
+## 我学到的新知识
+
+- `console.table()` 可以以表格形式输出对象或数组。
+
+- `reduce()` 方法将数组缩减为单个值，用法：
+
+ ```js
+ /**
+ * @param total：必需。initialValue，或函数先前返回的值。
+ * @param currentValue：必需。当前元素的值。
+ * @param index：可选。当前元素的数组索引。
+ * @param arr：可选。当前元素所属的数组对象
+ *
+ * @param initialValue：可选。作为初始值传递给函数的值。
+ **/
+ array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
+ ```
+
+ 项目中第四和第八题是 `reduce()` 例子。
+
diff --git a/04 - Array Cardio Day 1/index-ME.html b/04 - Array Cardio Day 1/index-ME.html
new file mode 100644
index 0000000000..81ed0dbc10
--- /dev/null
+++ b/04 - Array Cardio Day 1/index-ME.html
@@ -0,0 +1,83 @@
+
+
+
+
+ Psst: have a look at the JavaScript Console 💁
+ + + diff --git a/05 - Flex Panel Gallery/README.md b/05 - Flex Panel Gallery/README.md new file mode 100644 index 0000000000..1447132366 --- /dev/null +++ b/05 - Flex Panel Gallery/README.md @@ -0,0 +1,49 @@ +# 5 Day + +## 优化 + +- 添加 `user-select: none;` 提升体验。 +- 循环添加事件在一个循环内完成。 +- 修复了一个bug，原项目中的盒子在双击后，文字动画逻辑将会错误。 + +## 我学到的新知识 + +- `CSS` 中的 `flex` 属性： + + ```css + flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; + ``` + + 本次主要是使用了 `flex-grow` 。该属性可以使 `flex` 布局中的盒子根据设定的 `flex-grow` 值，按比例增长。 + + + +- `classList.toggle(className, force)`: + + 该方法用于在调用者的元素上添加或删除指定的 `className`。`className` 参数是必填的，而 `force` 参数是可选的。 + + - 当 `force` 参数未提供时：`toggle()` 方法会在类列表中添加或删除指定的类名，并返回一个布尔值。如果类名已存在，则删除并返回 false；如果类名不存在，则添加并返回 true。 + - `force` 参数可以用来强制 `toggle()` 方法执行添加或删除操作，而不考虑类名是否存在。当 `force` 参数为 `true` 时，将强制添加类名；当 `force` 参数为 `false` 时，将强制删除类名。 + +- 媒体查询 `@media` ： + + 可以根据不同条件使用不同 `css` 规则 + + ```css + @media media-type and (media-feature) { + /* CSS 规则 */ + } + ``` + + 例如，当屏幕宽度小于 600 像素时，段落文本颜色变为红色： + + ```css + @media screen and (max-width: 600px) { + p { + color: red; + } + } + ``` + + + diff --git a/05 - Flex Panel Gallery/index-ME.html b/05 - Flex Panel Gallery/index-ME.html new file mode 100644 index 0000000000..539ab21ab9 --- /dev/null +++ b/05 - Flex Panel Gallery/index-ME.html @@ -0,0 +1,162 @@ + + + + +
+
+
+
+
+
+
+
+
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
deleted file mode 100644
index a6876a1908..0000000000
--- a/PULL_REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,14 +0,0 @@
-
diff --git a/images/icon.png b/images/icon.png
new file mode 100644
index 0000000000..ce6da77887
Binary files /dev/null and b/images/icon.png differ
diff --git a/readme.md b/readme.md
index 4212cb16c8..3088b925c9 100644
--- a/readme.md
+++ b/readme.md
@@ -1,79 +1,53 @@
-
-
-# JavaScript30
-
-Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
-
-Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
-
-## Community #JavaScript30 Content
-
-Feel free to submit a PR by adding a link to your own recaps, guides, or reviews!
-
-* [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features.
-* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching.
-* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers.
-* [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释
-* [乔木 录制的讲解视频](https://b23.tv/pSa7rdu) 看中文讲解视频一起学习 Javascript30 吧! Javascript30 中 CSS/JS/HTML 视频讲解
-* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned.
-* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions.
-* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once.
-* [Mike Ekkel](https://medium.com/@mike_ekkel/javascript-30-a-30-day-vanilla-js-challenge-6a733fc9f62c#.9frjtaje9)
-* [Yusef Habib](https://github.com/yhabib/JavaScript30) lessons and tricks learned, and a [gh-page](https://yhabib.github.io/JavaScript30/) to see working all the mini-projects.
-* [Amelie Yeh](https://github.com/amelieyeh/JS30) 30 lesson notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) 🇹🇼😄
-* [Winar](https://github.com/winar-jin/JavaScript30-Challenge)的JavaScript30天挑战，记录练习过程，重难点和其他的解决方案。🎨
-* [Rayhatron](https://rayhatron.github.io/blog/) - walkthroughs, recaps, and lessons learned.
-* [Andrei Dobra](https://github.com/andreidbr/JS30) Full repo with lessons learned and a [gh-page](https://andreidbr.github.io/JS30/) with all the exercises.
-* [从零到壹全栈部落](https://github.com/liyuechun/JavaScript30-liyuechun),春哥发起的从零到壹全栈部落，旨在带领大家一起学习，一起输出，文档化，代码化，中文视频化，全栈部落口号：输出是最好的学习方式。
-* [Usmaan Ali's](https://github.com/usyyy/javascript/blob/master/JavaScript30/analysis.md) summary of the technical skills learned from each project. He's also posting them as separate blog posts [here](https://medium.com/@usyyy).
-* [Axel](https://github.com/afuh/js30)'s lessons learned and a [showcase](https://afuh.github.io/js30/) with the projects.
-* [Chris](https://github.com/dwatow/JavaScript30) 中文實戰，目標描述、過程紀錄。
-* [Muhammad D. Ramadhan's](https://miayam.github.io) blog. He shamlesly mixed his personal life with 30 day JavaScript challenge to increase his learning retention. He also summarised the challenge on [one single page](https://miayam.github.io/js30). Do not read his blog!
-* [Lee Keitel's Blog](https://blog.keitel.xyz/categories/javascript30/) includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future.
-* [Dustin Hsiao](https://github.com/dustinhsiao21/Javascript30-dustin) 包含了各篇介紹、 效果Demo、各篇詳解及記錄過程，附上部分延伸閱讀及[gh-page](https://dustinhsiao21.github.io/Javascript30-dustin/)。
-* [GuaHsu](https://github.com/guahsu/JavaScript30) - 紀錄各篇練習過程與心得，並嘗試擴充部分練習，也做了一個包含全部練習的[介紹站](http://guahsu.io/JavaScript30/)🇹🇼
-* [Daniela](https://github.com/misslild)'s completed challenges on [GitHub Pages](https://misslild.github.io/WesBos-30day-Coding-challenge/) and [Codepen](https://codepen.io/collection/DapZeP/) :raised_hands: :muscle: :+1:
-* [Dmitrii Pashutskii's](https://github.com/guar47) code of all challenges on [GitHub with Pages](https://github.com/guar47/javascript30Summary) and review [blog posts](https://blog.dpashutskii.com/tag/javascript30/).
-* [Abid Hasan's](https://github.com/sabidhasan/javascript-30) completion of all challenges. This was awesome!! Learned so much! :+1:
-* [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo. :star2:
-* [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo.
-* [Herminio Torres](https://github.com/herminiotorres/JavaScript30) lessons and tricks learned, and a [gh-page](https://herminiotorres.github.io/JavaScript30/) to see working all the mini-projects.
-* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days).👍👍👍
-* [Kizito](https://github.com/akhilome/)'s follow along [repo](https://github.com/akhilome/js30) with [completed challenges](https://akhilome.github.io/js30) and [notes](https://akhilome.github.io/js30/notes).
-* [VannTile](https://github.com/vanntile)'s [repository](https://github.com/vanntile/JavaScript30) and [GitHub Pages showcase](https://vanntile.github.io/JavaScript30/). Thank you for a great ⌨️ experience.
-* [Alex Kim](https://github.com/Alex-K1m/js30-challenge) completed all the challenges. You can check them out at [GitHub pages](https://alex-k1m.github.io/js30-challenge/).
-* [Mikhail Thomas](https://github.com/seckela) created [JS30++](https://github.com/seckela/js30plusplus) to add another level of challenge on top of this already great course.
-* [Ramon Morcillo](https://github.com/reymon359/JavaScript30) finished this awesome challenge!. You can see the showcase of his implementations on [this link](https://reymon359.github.io/JavaScript30/).
-* [Santiago Escobar](https://github.com/sescobar99)'s [repository](https://github.com/sescobar99/javascript30-challenge) and [GitHub Pages showcase](https://sescobar99.github.io/javascript30-challenge/).
-* [Harry Xie](https://github.com/a90100/JavaScript30) 紀錄 30 天的練習筆記在 [此連結](https://github.com/a90100/JavaScript30).
-* [ Van Ribeiro's ](https://vanribeiro-30daysofjavascript.netlify.app/) about demos and recaps. On [GitHub Repo](https://github.com/vanribeiro/30days-Of-JavaScript) there's a summary about what was learned and researched.
-* [Mugilan](https://github.com/Mugilan-Codes) is currently doing this challenge. Check out his [Repo](https://github.com/Mugilan-Codes/javascript-30) and the [Live Demo](https://mugilan-codes.github.io/javascript-30/).
-* [Eshan Vohra](https://github.com/eshanvohra) is currently doing this challenge. Check out my repo [here](https://github.com/eshanvohra/JavaScript30).
-* [RegusAl](https://github.com/RegusAl) is currently doing this challenge. Check out my repo [here](https://github.com/RegusAl/JavaScript30).
-* [Ayush Gupta's](https://javascript30.ayushgupta.tech/) implementation of JavaScript30 challenge with some add-ons & updated design.
-* [filipkowal](https://github.com/filipkowal/JS30-05-Flex-Panels-Deactivate) Fix to flex panels (5th day) so the panels deactivate when clicked on another one.
-* [Mo. Saif's](https://github.com/MoSaif00)note on lessons learned and a [gh-pages showcase](https://mosaif00.github.io/30-Days-JavaScript-Challenge/) for the projects.
-* [Stiaannel's](https://stiaannel.co.za/my-projects/javascript30) implementation of the Javascript30 challenge, with small design changes and a couple of extra features.
-* [Kelly CHI's](https://kellychi22.github.io/JavaScript30/) complete JavaScript30 challenges! Click the links to check demos and notes of each challenge. 🇹🇼 🌟
-* [Issam Seghir](https://issam-seghir.github.io/JavaScript30/) added custom solutions and styles 🍧, improved performance, including fixed bugs/issus 💢. , added articles for each exercise 📝.
-
-## Alternative Implementations
-Here are some links of people who have done the tutorials, but in a different language or framework:
-
-* [Thomas Mattacchione](https://github.com/tkjone/clojurescript-30) JavaScript 30 written in ClojureScript.
-* [Dave Follett's](https://github.com/davefollett) blog series, [A New Vue on #JavaScript30](https://davefollett.io/categories/a-new-vue-on-javascript30/), where he explores re-implementing #JavaScript30 projects using [Vue](https://vuejs.org).
-* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises.
-* [Adrien Poly](https://github.com/adrienpoly/javascript30-stimulus) a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to [Stimulus JS](https://stimulusjs.org/) framework in a Rails App.
-* [Bogdan Lazar](https://github.com/tricinel/TypeScript30) all the JavaScript 30 written in [TypeScript](https://www.typescriptlang.org/).
-* [Will Wager](https://github.com/wwags33/JavaScript30) another [TypeScript](https://www.typescriptlang.org/) implementation!
-* [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html).
-* [ALMaclaine](https://github.com/almaclaine) Javascript 30 written in [Dart 2.0](https://github.com/ALMaclaine/Dart30).
-* [Connie Leung](https://github.com/railsstudent) Javascript 30 written in [Angular and RxJS](https://github.com/railsstudent/ng-rxjs-30).
-
-## A note on Pull Requests
-
-These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.
-
-The starter files + solutions will be updated if/when the videos are updated.
-
-Thanks!
+# JS 30-Day Challenge
+
+
+
+
+ Hey
+Let's
+Dance
+
+
+ Give
+Take
+Receive
+
+
+ Experience
+It
+Today
+
+
+ Give
+All
+You can
+
+
+Life
+In
+Motion
+
+
+
+ My JS 30-Day Challenge
+
+ 本仓库记录了个人学习 JS 30 天挑战的经验
+
+
+ 在线Demo
+ ·
+ 报告Bug
+ ·
+ 提出问题
+