在Github上看到了wesbos的一个Javascript30天挑战的repo,旨在使用纯JS来进行练习,不允许使用任何其他的库和框架,该挑战共30天,我会在这里复现这30天遇到的挑战与问题,将其教程化、视频化分享给大家。
在线查看JS30所有项目效果图
Day01 - JavaScript Drum Kit
![](https://camo.githubusercontent.com/5f7c3df35f0b064fdf5303f99069f430cae3f9d09b857ddd53e82a8c4eb49eb5/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c302e6a7067)
![](https://camo.githubusercontent.com/27b5d5519ea5e6962acfc97ada297e2a7b970a89e776a7aa9b2024f9064d6e9b/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c312e6a7067)
![](https://camo.githubusercontent.com/7399462a3a489692ff44b3f67f5e1f59ffd34dba3bd8e149c667c7560c71e633/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c322e6a7067)
Day04 - Array Cardio Day 1
![](https://camo.githubusercontent.com/8ce4b539b5a208b2412760df7a17e5262020f87e43d0fce9e54f075258db9777/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c332e6a7067)
Day05 - Flex Panel Gallery
![](https://camo.githubusercontent.com/84f132341cdd5b8a43c37c60347502e6ac53749a46a33c7f28ab73d2f5a0d603/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c342e6a7067)
![](https://camo.githubusercontent.com/5ecc9d141c54740a296d3b7b7b499c6fdfa5eac7ec8a1d4a32a3456a9250f494/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c352e6a7067)
Day07 - Array Cardio Day 2
![](https://camo.githubusercontent.com/dc97cf123aa523286e44f9dcb262960c4f29579c3139fee3697fe8dc95f51323/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c362e6a7067)
Day08 - Fun with HTML5 Canvas
![](https://camo.githubusercontent.com/c742176397ccc13880ea089b72a3384a41f30a2570d1884cdd7e516b58dacc17/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c372e6a7067)
Day09 - Dev Tools Domination
![](https://camo.githubusercontent.com/313a0a490a34df855db4f33143a33f4c39e682cf41b79f0b677186c51deffd56/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c382e6a7067)
Day10 - Hold Shift and Check Checkboxes
![](https://camo.githubusercontent.com/09d3f83108966f5ec5ba0d9d35825ba7d9f832f6a58afd635992c76005ca3f9c/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c392e6a7067)
Day11 - Custom Video Player
![](https://camo.githubusercontent.com/6de92eb07caad39fdd7445777276095cc02343fe671971b7d1babb2316c9473d/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31302e6a7067)
Day12 - Key Sequence Detection
![](https://camo.githubusercontent.com/c00a60f997b959c1a3d15de6fe0db14c461331da3692cf979cbc69f69ed74daf/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31312e6a7067)
Day13 - Slide in on Scroll
![](https://camo.githubusercontent.com/dc952b609f4a90c7816e470ebcee9ab624d50a8798a7c5da645d62495da07137/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31322e6a7067)
Day14 - JavaScript References VS Copying
![](https://camo.githubusercontent.com/10b9ef935f4682ce85b988bab5f2906f8acd63e756b9003d5f38939ff9875027/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31332e6a7067)
![](https://camo.githubusercontent.com/51e94cbf12c5485847f30557780b294d80cf58a6f2766361a44581e72889c309/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31342e6a7067)
Day16 - Mouse Move Shadow
![](https://camo.githubusercontent.com/650289551a200e0615dfecfb6681853255349514b8643f3965c61b141f116dc3/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31352e6a7067)
Day17 - Sort Without Articles
![](https://camo.githubusercontent.com/7cf49a259ed0ee50ef530a96972d9bcafb99dbc5c50052e11fba9289447c9cfa/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31362e6a7067)
Day18 - Adding Up Times with Reduce
![](https://camo.githubusercontent.com/c9fd4b0db0e84a34ac700771a4f7518191a40dfc7b870364f78319a4bfc2572d/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31372e6a7067)
![](https://camo.githubusercontent.com/e9dc6aa6aedf63e64e7793bdfe745c136496f09d4ffcada84037830bb52b0534/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31382e6a7067)
![](https://camo.githubusercontent.com/2858451f3e4be5eadf04e443a8482db00c2248a77bccaf22127d373cbed9d030/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31392e6a7067)
![](https://camo.githubusercontent.com/7ebc3b4408cfdc3ab39c8cc73313bbf00decf6fc73e1fd040b39d5ae2e938943/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32302e6a7067)
Day22 - Follow Along Link Highlighter
![](https://camo.githubusercontent.com/d3eb415bcb475a27091154736ed153b052143d692ace2d1474f029141adc40d4/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32312e6a7067)
![](https://camo.githubusercontent.com/2b342cb7e582d132604546fb292261003d6f65bc5d44fe6686348c1ad705247f/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32322e6a7067)
![](https://camo.githubusercontent.com/3797e9f2a93cbc4f9ccdce110598f0d6aa87834d5a72d8f5cce1defcc9806e7e/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32332e6a7067)
Day25 - Event Capture, Propagation, Bubbling and Once
![](https://camo.githubusercontent.com/5202d756d591d086d3479b06ef6730604b9ffeb5777b3a49cda2b4f0f095ab81/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32342e6a7067)
Day26 - Stripe Follow Along Nav
![](https://camo.githubusercontent.com/1b5775391907ebd9a414bbedd7d6cf2a9d4065e1c6eaf8ae0e34c356bc3cdfef/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32352e6a7067)
![](https://camo.githubusercontent.com/55b3ddb18f5bbc032a265704dcfeecbb38b797590cbf3811f23931db34a52219/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32362e6a7067)
Day28 - Video Speed Controller
![](https://camo.githubusercontent.com/eb79ae2d58bc5cb9d96f237b1cbcbeea9eb210baf98eaf25774f1ea5d7b3bffc/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32372e6a7067)
![](https://camo.githubusercontent.com/9b7c2f7bb9d478e8c5f5ee73259c6ec44d13c93b46b6e300e2aaaaff65d4bec7/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32382e6a7067)
![](https://camo.githubusercontent.com/aa23f4bad0b04ae47820dc385327b6a079432f0aa6fcb8c595e96040fc7458f2/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32392e6a7067)
社群品牌:从零到壹全栈部落
定位:寻找共好,共同学习,持续输出全栈技术社群
业界荣誉:IT界的逻辑思维
文化:输出是最好的学习方式
官方公众号:全栈部落
社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)
技术交流社区:全栈部落BBS
全栈部落完整系列教程:全栈部落完整电子书学习笔记
关注全栈部落官方公众号,每晚十点接收系列原创技术推送 |
![](https://camo.githubusercontent.com/11df89949273491fdbd623a4bca8c8d542968d4ed1274b4697a7545581e881a6/687474703a2f2f6f72686d38777568642e626b742e636c6f7564646e2e636f6d2f7175616e7a68616e62756c756f2e706e67) |