From 794ddce9060f96f828130f35825f3bbd3ee93cea Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Fri, 10 May 2024 13:13:46 +0800 Subject: [PATCH 01/11] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=AF=B4=E6=98=8E?= =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E5=AE=8C=E6=88=90Day2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01 - JavaScript Drum Kit/README.md | 17 ++ 01 - JavaScript Drum Kit/index-FINISHED.html | 2 - .../{index-START.html => my-index.html} | 43 ++++- 01 - JavaScript Drum Kit/style.css | 2 + 02 - JS and CSS Clock/README.md | 20 ++ 02 - JS and CSS Clock/index-START.html | 75 -------- 02 - JS and CSS Clock/my-index.html | 175 ++++++++++++++++++ PULL_REQUEST_TEMPLATE.md | 14 -- readme.md | 82 +------- 9 files changed, 257 insertions(+), 173 deletions(-) create mode 100644 01 - JavaScript Drum Kit/README.md rename 01 - JavaScript Drum Kit/{index-START.html => my-index.html} (60%) create mode 100644 02 - JS and CSS Clock/README.md delete mode 100644 02 - JS and CSS Clock/index-START.html create mode 100644 02 - JS and CSS Clock/my-index.html delete mode 100644 PULL_REQUEST_TEMPLATE.md diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md new file mode 100644 index 0000000000..f652fd5718 --- /dev/null +++ b/01 - JavaScript Drum Kit/README.md @@ -0,0 +1,17 @@ +# 1 Day + +## 优化： + +- 添加 `user-select: none;` 提升体验。 + +- 添加了点击事件，点击播放对应声音。 + + + +## 我学到的新知识： + +- `audio` 标签可以播放声音，调用 `play()` 方法开始播放，修改 `currentTime` 可改变播放进度。 + +- `transitionend` 事件过渡效果完成后触发的事件。 +- 点击事件的 `e.target`（被点击的目标元素）和 `e.currentTarget`（最终执行方法的元素）。 + diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index ae9aacaf07..d470c2a209 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -7,8 +7,6 @@ - -
A diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/my-index.html similarity index 60% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/my-index.html index 8a2f8e8417..968d3c1590 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/my-index.html @@ -4,11 +4,10 @@ JS Drum Kit - + -
A @@ -57,9 +56,47 @@ - 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..166dcd7eca --- /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-START.html b/02 - JS and CSS Clock/index-START.html deleted file mode 100644 index 55ab1a5331..0000000000 --- a/02 - JS and CSS Clock/index-START.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - JS + CSS Clock - - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS and CSS Clock/my-index.html b/02 - JS and CSS Clock/my-index.html new file mode 100644 index 0000000000..4cded80c25 --- /dev/null +++ b/02 - JS and CSS Clock/my-index.html @@ -0,0 +1,175 @@ + + + + + JS + CSS Clock + + + + + +
+
+
+ 12 + 3 + 6 + 9 +
+
+
+
+
+
+
+
+ + + + + + + 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/readme.md b/readme.md index 4212cb16c8..94d115160c 100644 --- a/readme.md +++ b/readme.md @@ -1,79 +1,3 @@ -![](https://javascript30.com/images/JS3-social-share.png) - -# 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! +
+ +
From df3ed3ee719f0af4c32a92cd12d564e76c446888 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Fri, 10 May 2024 13:17:42 +0800 Subject: [PATCH 02/11] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BB=93=E5=BA=93?= =?UTF-8?q?=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/readme.md b/readme.md index 94d115160c..782e6e2592 100644 --- a/readme.md +++ b/readme.md @@ -1,3 +1,6 @@ 
+ + +# 个人练习仓库，每个 project 下，都有一个 README 做一些说明。每个 project 不单单是完成模仿，我们要争取优化和创造。 From 8601cdeeffd1d2131c4462c3806890f64c66455b Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Fri, 10 May 2024 13:20:07 +0800 Subject: [PATCH 03/11] =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=87=E7=82=B9?= =?UTF-8?q?=E7=AC=A6=E5=8F=B7=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01 - JavaScript Drum Kit/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md index f652fd5718..1a49787fcb 100644 --- a/01 - JavaScript Drum Kit/README.md +++ b/01 - JavaScript Drum Kit/README.md @@ -12,6 +12,6 @@ - `audio` 标签可以播放声音，调用 `play()` 方法开始播放，修改 `currentTime` 可改变播放进度。 -- `transitionend` 事件过渡效果完成后触发的事件。 +- `transitionend` 事件：过渡效果完成后触发的事件。 - 点击事件的 `e.target`（被点击的目标元素）和 `e.currentTarget`（最终执行方法的元素）。 From 03f1623dbadd642ba29d9881cb97268804b0a3b7 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Sat, 11 May 2024 00:25:25 +0800 Subject: [PATCH 04/11] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{my-index.html => index-ME.html} | 0 01 - JavaScript Drum Kit/index-START.html | 67 ++++++++++++++++ .../{my-index.html => index-ME.html} | 0 02 - JS and CSS Clock/index-START.html | 75 ++++++++++++++++++ images/icon.png | Bin 0 -> 3005 bytes readme.md | 52 +++++++++++- 6 files changed, 190 insertions(+), 4 deletions(-) rename 01 - JavaScript Drum Kit/{my-index.html => index-ME.html} (100%) create mode 100644 01 - JavaScript Drum Kit/index-START.html rename 02 - JS and CSS Clock/{my-index.html => index-ME.html} (100%) create mode 100644 02 - JS and CSS Clock/index-START.html create mode 100644 images/icon.png diff --git a/01 - JavaScript Drum Kit/my-index.html b/01 - JavaScript Drum Kit/index-ME.html similarity index 100% rename from 01 - JavaScript Drum Kit/my-index.html rename to 01 - JavaScript Drum Kit/index-ME.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html new file mode 100644 index 0000000000..8a2f8e8417 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-START.html @@ -0,0 +1,67 @@ + + + + + JS Drum Kit + + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/02 - JS and CSS Clock/my-index.html b/02 - JS and CSS Clock/index-ME.html similarity index 100% rename from 02 - JS and CSS Clock/my-index.html rename to 02 - JS and CSS Clock/index-ME.html diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html new file mode 100644 index 0000000000..55ab1a5331 --- /dev/null +++ b/02 - JS and CSS Clock/index-START.html @@ -0,0 +1,75 @@ + + + + + JS + CSS Clock + + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/images/icon.png b/images/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce6da77887a622b39eb144e1335b4e7864849b3e GIT binary patch literal 3005 zcmdUx`#aQWAIHCAVp`UiwTYPFtEeWcUAsd=4nxY&V=6Q<4wWTC84Yug9A+zvdgz;E z+NPY+D#jQLb`ULzsU3{Q5TTqVr&Nqc>Y0AoKj8UcuWNs}@7L?P@9T42pC9heeZ4ad zl00;^jkN&)(Dfv``>5IRWv$mz@8w4Xd1}Dod_3F$K__|&0Cd=%?yi3EA#=Cpn1guK z-YJseng!p2ZYd#Gkt|Q|@bvLijHR+_9BL&9WSY_F^nt{pZTg9N{>z}|bMMB}0AiT& z0vYp#EP!wqgMX6+2i#N-U_c@A1%U?_fzeHG@42D@$o1UhkArI3jV#MSB+vo6#{CwJ z1c1MOq%2yKZF6BET}uHr7$3JA@hLl zC?SgAg-wy)oE>>Ga^AgfE&LPT@}qs%!o>V*out4AIF6r@bDz#~c4wsaDag_L>0(lz zvi&<2Lyw4^n8A6QcNX0 zyT&xy4^@`zp1-O~%-XIp=g7~ZpX<78e%q*Y3}acLA)kvFajnDz(birwC)d2IfQj?F7mrGxHIYeVJVBHH81=+jp7+*5HC; zTFzY1VQXbCj#cgUsKor5FsBIFy{8EiOD>7atuN$hf=a%2Q13}3?&EWZu&q|5nuj8U zZd%9udXv#q@iu*#E&@uP?&!9Jp{$cBC~3uF6d>EY?jMxry3mK!_`u*cRwrg6+{!1p zE}U|;%kmPpE>Y2Yr1C-MY2j}H!!R?RD*T{=+R!7NMGs0et-1@Alm`$ z0s|H66kd6IqOB!+7Reg(0dSDgMu!*Ey?2(2?0d~GneuD22nq+)<<4)RTwAfIXVNe2 zy9A-a7zmijaRC_>!%LrKXiNMM42a>qbxh`uvC3xJuvq;nG@l4@n;iG zLmfp_QKmkib5T|niry-va9_gsL)zD$5}Hn!uo>cDI}QU#C$E!VK?3QMOFOOqb~_F= z`Hnw4eWUrmSzZb_a?SC56g(;Jvw>>3;Sel+qiiQf=wG<8#cF!U4yK8+HenMU$7%52 z2vXl<4J57F0kSH(W^r3$`5${qgWnrQO16i>3mVd?`?1Y!3xB}e>bw}q_n$LMf`EXS zMywNTC1_W-%!`wd3D2{a1Ww4#@iVBdzFx<J+HbaV_>9KK&w_-It>tTT$uZU)qP`v zX#Kxh*zjV3fT}}D>AuLgK0yBIqpkPTE+;b1aki93`WmF@tEannLv#i7*Pu(oYEfHN zzA*t86KvHYS;C5P$3v>CQ*1fZO=sY-wZXp!t;vd>dFX;SDrg1;S@x&$TYkDv>bs~O z87C*0{mj-pTEp&0+3amCl+^zKp;K|c9zRvL+~H!ub>7NOgzy;#!dF+n4*Wp0b1{|L#F*a^d#9z)K50);a)0 z1c$npfSCd~RN8#cxxXErKIxyJF8)U29}?9oPJhKp&dAZ5OKGlCC*P3_4|*NqMrf~u zPYjXzR-0RMl@*A$yIvlsedX)^4DVrv!~yy~9toNjFFbdrErrpp5HlI6qiL zj(s)mjRONISGYD3ocBoHyg7xP>AxAV!^n=e68>{#D@D&LVmqjAig_|r*q?p#fXXE@ zz)sPKai&#sxpzXG$bEWdmrY^BnVfm#3cVu?d7;)cO$3@mh_WX<=@<+?tY~Ya<~`0$ zy01xl{ewapdOha)(fm~uK>$jcjv{Q&q#%&@0}_oue@Ntbt}5lbn}vpmmUc|A2;{oS zr(7u6A*DaNOb7!!&w_7%+<%5BK}NgMz{(XmZ<{g|o|b7(E1%bZ%3kNTXIhl{(-1B5 z%*F`+U7Vnrt%k&$5us9`pEHaW?!4wb;k*>)!Txf=Qufvdb9#I;-+sTp@3J2As}5=Z zL&}E1Yl^W$nxEtCL(Aa7=jr0R0+^Wf>4Z+i`PAGyHBqJuVnc9N{+p?tH@xHIZ)EDM z^?A)>S@)J>ZmA|-%5IlL)={#Jp>o46CHWzfV(V*I%>pFCC2q2)XFdwL%O4 z6^X5uM`Ts5dr5WZ+W^dV{k(!~-G literal 0 HcmV?d00001 diff --git a/readme.md b/readme.md index 782e6e2592..c4a971b318 100644 --- a/readme.md +++ b/readme.md @@ -1,6 +1,50 @@ -
- -
+# JS 30-Day Challenge + + + -# 个人练习仓库，每个 project 下，都有一个 README 做一些说明。每个 project 不单单是完成模仿，我们要争取优化和创造。 +

My JS 30-Day Challenge

+

+ 本仓库记录了个人学习 JS 30 天挑战的经验 +
+
+ 在线Demo + · + 报告Bug + · + 提出问题 +

+ + + + +## 开始 + +您可以 `Fork` 本仓库作为参考并开始自己的创意。 + + + +每个项目中至少有四个文件： + +- `index-START.html` : 您需要完善的文件。该文件为您提供了一些基础代码，您需要完善它。 +- `index-FINISHED.html`: 最终效果。您需要参考它，但不要完全模仿，建议多一点创新。 +- `index-ME.html`: 我模仿 `index-FINISHED.html` 做的页面。 +- `README.md`: 我对该项目的总结。 + +另外有些项目可能会有一些资源文件（例如一些css，js以及一些图片和音乐）。 + + + +## 快速目录 + +| 项目名 | 在线查看 | 项目链接 | +| ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | +| 01 - JavaScript Drum Kit | [30 Day JS -- 1 (codepen.io)](https://codepen.io/LY220214/full/oNRNbYB) | [01 - JavaScript Drum Kit](01%20-%20JavaScript%20Drum%20Kit) | +| 02 - JS and CSS Clock | [30 Day JS -- 2 (codepen.io)](https://codepen.io/LY220214/full/MWdWVpV) | [02 - JS and CSS Clock](02%20-%20JS%20and%20CSS%20Clock) | + + + +## 联系我 + +邮箱：877602782@qq.com From 2c81279d9a431e52a313fc9c3be3a9a10a181456 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Sat, 11 May 2024 15:02:46 +0800 Subject: [PATCH 05/11] 3 Day completed --- 03 - CSS Variables/README.md | 40 ++++++++++++++++ 03 - CSS Variables/index-ME.html | 82 ++++++++++++++++++++++++++++++++ 2 files changed, 122 insertions(+) create mode 100644 03 - CSS Variables/README.md create mode 100644 03 - CSS Variables/index-ME.html 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 @@ + + + + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From d43e6a0965118330af172f93a0f56e370bbdc1db Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Sat, 11 May 2024 15:03:27 +0800 Subject: [PATCH 06/11] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 01 - JavaScript Drum Kit/README.md | 2 +- 02 - JS and CSS Clock/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md index 1a49787fcb..7df38524a0 100644 --- a/01 - JavaScript Drum Kit/README.md +++ b/01 - JavaScript Drum Kit/README.md @@ -8,7 +8,7 @@ -## 我学到的新知识： +## 我学到的新知识 - `audio` 标签可以播放声音，调用 `play()` 方法开始播放，修改 `currentTime` 可改变播放进度。 diff --git a/02 - JS and CSS Clock/README.md b/02 - JS and CSS Clock/README.md index 166dcd7eca..3dcd80006c 100644 --- a/02 - JS and CSS Clock/README.md +++ b/02 - JS and CSS Clock/README.md @@ -10,7 +10,7 @@ -## 我学到的新知识： +## 我学到的新知识 - 添加时钟数字使用了 `Grid` 布局。 From a41c1edace85fc5da6916072f02acc0115f4d3f0 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Sat, 11 May 2024 15:09:35 +0800 Subject: [PATCH 07/11] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=BF=AB=E9=80=9F?= =?UTF-8?q?=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index c4a971b318..7037557784 100644 --- a/readme.md +++ b/readme.md @@ -42,6 +42,7 @@ | ------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | 01 - JavaScript Drum Kit | [30 Day JS -- 1 (codepen.io)](https://codepen.io/LY220214/full/oNRNbYB) | [01 - JavaScript Drum Kit](01%20-%20JavaScript%20Drum%20Kit) | | 02 - JS and CSS Clock | [30 Day JS -- 2 (codepen.io)](https://codepen.io/LY220214/full/MWdWVpV) | [02 - JS and CSS Clock](02%20-%20JS%20and%20CSS%20Clock) | +| 03 - CSS Variables | [30 Day JS -- 3 (codepen.io)](https://codepen.io/LY220214/full/OJYPJKg) | [03 - CSS Variables](03%20-%20CSS%20Variables) | From cf1a20980e181904fbbc0223a9d5739ae4b26b35 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Sun, 12 May 2024 18:04:32 +0800 Subject: [PATCH 08/11] 4th Day completed --- 04 - Array Cardio Day 1/README.md | 30 ++++++++++ 04 - Array Cardio Day 1/index-ME.html | 83 +++++++++++++++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 04 - Array Cardio Day 1/README.md create mode 100644 04 - Array Cardio Day 1/index-ME.html 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 💪 + + + +

Psst: have a look at the JavaScript Console 💁

+ + + From 4aa018ee3bc542e1f3f8e29e0ea48deb07bfbe20 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Sun, 12 May 2024 18:09:58 +0800 Subject: [PATCH 09/11] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=BF=AB=E9=80=9F?= =?UTF-8?q?=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 7037557784..d7a3a9627d 100644 --- a/readme.md +++ b/readme.md @@ -43,6 +43,7 @@ | 01 - JavaScript Drum Kit | [30 Day JS -- 1 (codepen.io)](https://codepen.io/LY220214/full/oNRNbYB) | [01 - JavaScript Drum Kit](01%20-%20JavaScript%20Drum%20Kit) | | 02 - JS and CSS Clock | [30 Day JS -- 2 (codepen.io)](https://codepen.io/LY220214/full/MWdWVpV) | [02 - JS and CSS Clock](02%20-%20JS%20and%20CSS%20Clock) | | 03 - CSS Variables | [30 Day JS -- 3 (codepen.io)](https://codepen.io/LY220214/full/OJYPJKg) | [03 - CSS Variables](03%20-%20CSS%20Variables) | +| 04 - Array Cardio Day 1 | [30 Day JS -- 4 (codepen.io)](https://codepen.io/LY220214/full/eYamEJx) | [04 - Array Cardio Day 1](04%20-%20Array%20Cardio%20Day%201) | From 35ba2fe6a3fd65ecd03ff6095f53036996453d46 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Mon, 13 May 2024 17:23:22 +0800 Subject: [PATCH 10/11] 5th Day completed --- 05 - Flex Panel Gallery/README.md | 49 ++++++++ 05 - Flex Panel Gallery/index-ME.html | 162 ++++++++++++++++++++++++++ 2 files changed, 211 insertions(+) create mode 100644 05 - Flex Panel Gallery/README.md create mode 100644 05 - Flex Panel Gallery/index-ME.html 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 @@ + + + + + Flex Panels 💪 + + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + From 36491931a872343f796933945087d47b0e6e72c9 Mon Sep 17 00:00:00 2001 From: yangs_f <877602782@qq.com> Date: Mon, 13 May 2024 17:28:54 +0800 Subject: [PATCH 11/11] add 5th project to Faster Index --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index d7a3a9627d..3088b925c9 100644 --- a/readme.md +++ b/readme.md @@ -44,6 +44,7 @@ | 02 - JS and CSS Clock | [30 Day JS -- 2 (codepen.io)](https://codepen.io/LY220214/full/MWdWVpV) | [02 - JS and CSS Clock](02%20-%20JS%20and%20CSS%20Clock) | | 03 - CSS Variables | [30 Day JS -- 3 (codepen.io)](https://codepen.io/LY220214/full/OJYPJKg) | [03 - CSS Variables](03%20-%20CSS%20Variables) | | 04 - Array Cardio Day 1 | [30 Day JS -- 4 (codepen.io)](https://codepen.io/LY220214/full/eYamEJx) | [04 - Array Cardio Day 1](04%20-%20Array%20Cardio%20Day%201) | +| 05 - Flex Panel Gallery | [30 Day JS -- 5 (codepen.io)](https://codepen.io/LY220214/full/KKLwrqm) | [05 - Flex Panel Gallery](05%20-%20Flex%20Panel%20Gallery) |