乐趣区

关于javascript:JS30Wes-Bos30天原生JS挑战总结

jiezi

title:【原生 javascript 我的项目】JS30- 总结
date: 2022-03-12 21:47:12
tags: JS30;30 个原生 javascript 我的项目
categories: 30 个原生 javascript 我的项目

作者：©iaineisalsoyan
简介：Atypical frond-end developer. 非典型前端开发者。

残缺指南在 GitHub，喜爱请 Star 哦♪(^∇^*)

Have fun with the website! ♪(^∇^*)

我的项目简介

30 Day Challenge 是 Wes Bos 设计的一个 30 天原生 JS 编程挑战。

我的项目收费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目标是在不借助框架、库、编译器和援用的状况下，帮忙初学者了解纯 JavaScript 语言。

我的项目内容

  1. Drum kit（架子鼓模拟器）
  2. JS and CSS Clock（网页时钟）
  3. CSS Variables（CSS 变量）
  4. Array Cardio Day1（数组操作 1）
  5. Flex Panel Gallery（Flex 画廊面板）
  6. Type Ahead（异步输入）
  7. Array Cardio Day2（数组操作 2）
  8. Fun with HTML5 Canvas（乏味的 HTML5 画布）
  9. Dev Tools Domination（）
  10. Hold Shift and Check Checkboxes（打算清单）
  11. Custom Video Player（自定义视频播放器）
  12. Key Sequence Detection（字符串序列彩蛋检测）
  13. Slide in on Scroll（滚动鼠标滚轮滑动显示）
  14. JavaScript References VS Copying（援用与拷贝）
  15. Local Storage（本地存储）
  16. Mouse Move Shadow（随鼠标挪动的文字暗影）
  17. Sort with Articles（去掉冠词排列）
  18. Adding up Times with Reduce（用 Reduce 实现工夫累加器）
  19. Webcam Fun（乏味的网络摄像头）
  20. Speech Detection（语音辨认）
  21. Geolocation（地理位置信息获取）
  22. Follow along Link Highlighter（链接高亮显示）
  23. Speech Synthesis（语音合成）
  24. Sticky Nav（固定的导航栏）
  25. Event Capture, Propagation, Bubbling and Once（事件捕获，流传，冒泡与 Once 办法）
  26. Stripe Follow along Nav（导航栏追随挪动显示特效）
  27. Click and Drag（点击并拖拽）
  28. Video Speed Controller（视频速度控制器）
  29. Countdown Timer（倒计时计时器）
  30. Whack A Mole（打地鼠小游戏）

用 VUE 实现的 JS30

查看 index-VUE.html 文件

  1. Drum kit（架子鼓模拟器）
  2. JS and CSS Clock（网页时钟）
  3. CSS Variables（CSS 变量）
  4. Flex Panel Gallery（Flex 画廊面板）
  5. Type Ahead（异步输入）
  6. Fun with HTML5 Canvas（乏味的 HTML5 画布）
  7. Hold Shift and Check Checkboxes（打算清单）
  8. Custom Video Player（自定义视频播放器）
  9. Whack A Mole（打地鼠小游戏）

社区内容 #JavaScript30

Feel free to submit a PR adding a link to your own recaps, guides or reviews!

  • Arjun Khode’s blog about summaries for each day, including fixed glitches, bugs and extra features
  • Nitish Dayal’s Text Guides are great for those who like reading over watching
  • Meredith Underell’s Quick Lessons Learned
  • Rowan Weismiller’s Recaps + Lessons Learned
  • Thorsten Frommen shares how he solved the exercises before viewing the answers
  • Soyaine 写的中文指南蕴含了过程记录和难点解释
  • Ayo Isaiah’s Recaps and Lessons Learned
  • Adriana Rios shares her alternative solutions
  • Michael Einsohn publishes each challenge after watching the video once
  • Mike Ekkel
  • Yusef Habib lessons and tricks learned, and a gh-page to see working all the mini-projects.
  • Amelie Yeh 30 lessons notes with things I’ve learned, and those important recaps. and directly view my demos here 🇹🇼😄
  • Winar 的 JavaScript30 天挑战，记录练习过程，重难点和其余的解决方案。🎨
  • Rayhatron – walkthroughs, recaps and lessons learned.
  • Andrei Dobra Full repo with lessons learned and a gh-page with all the exercises.
  • 从零到壹全栈部落, 春哥发动的从零到壹全栈部落，旨在率领大家一起学习，一起输入，文档化，代码化，中文视频化，全栈部落口号：输入是最好的学习形式。
  • Usmaan Ali’s summary of the technical skills learned from each project. He’s also posting them as separate blog posts here
  • Axel’s lessons learned and a showcase with the projects.
  • Chris 中文實戰，目標形容、過程紀錄。
  • Muhammad D. Ramadhan’s blog. He shamlesly mixed his personal life with 30 day JavaScript challenge so as to increase his learning retention. He also summarised the challenge on one single page. Do not read his blog!
  • Lee Keitel’s Blog 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 蕴含了各篇介紹、成果 Demo、各篇詳解及記錄過程，附上局部延长閱讀及 gh-page。
  • GuaHsu – 紀錄各篇練習過程與心得，並嘗試擴充局部練習，也做了一個蕴含全副練習的介紹站🇹🇼
  • Daniela’s completed challenges on GitHub Pages and Codepen :+1:
  • Dmitrii Pashutskii’s code of all challenges on GitHub with Pages and review blog posts
  • Abid Hasan’s completion of all challenges. This was awesome!! Learned so much! :+1:
  • Yusong Notes Records Yusong JS 30 days note and demo
  • Ding’s Implementation code and online demo
  • Herminio Torres lessons and tricks learned, and a gh-page to see working all the mini-projects.
  • Dmytro Borysovskyi says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available here and demos can be reached by the link to gh-pages 👍👍👍
  • Kizito’s follow along repo with completed challenges and notes.
  • VannTile’s repository and GitHub Pages showcase. Thank you for a great ⌨️ experience.
  • Alex Kim completed all the challenges. You can check them out at github pages.
  • Mikhail Thomas created JS30++ to add another level of challenge ontop of this already great course.
  • Ramon Morcillo finished this awesome challenge!. You can see the showcase of his implementations on this link.
  • Santiago Escobar’s repository and GitHub Pages showcase.
  • Harry Xie 紀錄 30 天的練習筆記在 此連結.
  • Van Ribeiro’s about demos and recaps. On GitHub Repo there’s a summary about what was learned and researched.
  • Mugilan is currently doing this challenge. Check out his Repo and the Live Demo.
  • Eshan Vohra is currently doing this challenge. Check out my repo here.
  • RegusAl is currently doing this challenge. Check out my repo here.
  • Ayush Gupta’s implementation of JavaScript30 challenge with some add-ons & updated design.
  • filipkowal Fix to flex panels (5th day) so the panels deactivate when clicked on another one.
  • Mo. Saif’snote on lessons learned and a gh-pages showcase for the projects.
  • Stiaannel’s implementation of the Javascript30 challenge, with small design changes and a couple of extra features.

其余办法实现的 JS30

Here are some links of people who have done the tutorials, but in a different language or framework:

  • Thomas Mattacchione JavaScript 30 written in ClojureScript
  • Dave Follett’s blog series, A New Vue on #JavaScript30, where he explores re-implementing #JavaScript30 projects using Vue.
  • Akinjide Bankole used Node.js with Jade to solve the exercises
  • Adrien Poly a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to Stimulus JS framework in a Rails App.
  • Bogdan Lazar all the JavaScript 30 written in TypeScript
  • Will Wager another TypeScript implementation!
  • marcoSven solution suggestion for 10 – Hold Shift and Check Checkboxes
  • ALMaclaine Javascript 30 written in Dart 2.0.
退出移动版