在Github上看到了wesbos的一个Javascript30天挑战的repo,旨在使用纯JS来进行练习,不允许使用任何其他的库和框架,该挑战共30天,我会在这里复现这30天遇到的挑战与问题,将其教程化、视频化分享给大家。
在线查看JS30所有项目效果图
Day01 - JavaScript Drum Kit
![](https://camo.githubusercontent.com/887841a7dadc49dcbe93cfd782ed2f55475da1284c75f2efa36d2cd9721c4b68/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c302e6a7067)
![](https://camo.githubusercontent.com/88972dcab39807625a10479ab8ad258c1264c1c1045764ef6f110d84d16dfcf4/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c312e6a7067)
![](https://camo.githubusercontent.com/5ece07894dbcfc758134524ebe88a0fd6f2df5ce74fe31afbd189551729f65ef/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c322e6a7067)
Day04 - Array Cardio Day 1
![](https://camo.githubusercontent.com/c2c565141e09e4ef48a9f5eaa928fd1d575812d9e54ff546cddbb23fe712f5bb/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c332e6a7067)
Day05 - Flex Panel Gallery
![](https://camo.githubusercontent.com/11a271c6136e2e5e4f18964ad2cf76c19b754c3aa17a67a424755cb5f4612bfd/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c342e6a7067)
![](https://camo.githubusercontent.com/08c136925a958e7e79ef469a60ce296e351d3652a07c97994418315f8c159920/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c352e6a7067)
Day07 - Array Cardio Day 2
![](https://camo.githubusercontent.com/e5db9e1a9c701d8738a60cc2b9fed7b18b793537d05e9719b1ef62a4799426e3/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c362e6a7067)
Day08 - Fun with HTML5 Canvas
![](https://camo.githubusercontent.com/93c0298a875e52290490b1c99f5dfea2cb1128d6b3d8066596cb1ae967106c6c/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c372e6a7067)
Day09 - Dev Tools Domination
![](https://camo.githubusercontent.com/6d946abf23a13bbaaad1d0af2812db4e793a6d712fb5decbdb2a7c321e180b53/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c382e6a7067)
Day10 - Hold Shift and Check Checkboxes
![](https://camo.githubusercontent.com/55fffab2934a1999ebaa6f8645e497bb92526c636d45f9ae36b37250120987ad/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c392e6a7067)
Day11 - Custom Video Player
![](https://camo.githubusercontent.com/a57de7536787927248d0f0bb4c847ef728bd7eb0dbe79dea1ed91ccb41ee01a7/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31302e6a7067)
Day12 - Key Sequence Detection
![](https://camo.githubusercontent.com/dea4d6ea0c2a9d3db09e59353a4011b8639bf554a296d038ca1b79c141c04c7e/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31312e6a7067)
Day13 - Slide in on Scroll
![](https://camo.githubusercontent.com/96d380dae1646473dea2b3cefb7dd6bb494f70099c498ecbd5f7d2b815f2e9a8/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31322e6a7067)
Day14 - JavaScript References VS Copying
![](https://camo.githubusercontent.com/1cb59f1b5f98a70eca67cafcb48dd72f213ee7cdc582d45695bdded13d2c7568/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31332e6a7067)
![](https://camo.githubusercontent.com/3b896ccf8936225c22a0c65276a16129b374ca54b368b4f3a9c76546bb883e91/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31342e6a7067)
Day16 - Mouse Move Shadow
![](https://camo.githubusercontent.com/f21c4b546396d0330cafbd61f9db0054a849c218644a91fbf337231f2a02862f/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31352e6a7067)
Day17 - Sort Without Articles
![](https://camo.githubusercontent.com/c0e099dee92a032865a001b4d39b3c27acf4ce24cf6d30f3c5e5e93215ff9708/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31362e6a7067)
Day18 - Adding Up Times with Reduce
![](https://camo.githubusercontent.com/ad857c1a22676259ef469c1fb0023e36e82891efc2ce188afc893043bca45acb/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31372e6a7067)
![](https://camo.githubusercontent.com/cb0a5c58ac5309876450f41846c7ef38237df03e6ce63305d3004ddfe3059ce7/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31382e6a7067)
![](https://camo.githubusercontent.com/6df538a533fe9d09906650bf092a719f5159c53f340d336e26a4268f4408f71e/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c31392e6a7067)
![](https://camo.githubusercontent.com/3d4f1995a3fb305ffa110267ff94026e0c2711a06bedcdcb4ded00853e791c26/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32302e6a7067)
Day22 - Follow Along Link Highlighter
![](https://camo.githubusercontent.com/3b055154f3773d74f2421b1042a19123d60d1ac817eb6d7c75ff48ba0eaa1c67/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32312e6a7067)
![](https://camo.githubusercontent.com/a20e32adb621089d9e6548ec8b5bff75d840f8fbbcaf4bf91c1dcdff559fde48/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32322e6a7067)
![](https://camo.githubusercontent.com/b4452f38eaf68e5e841b187270fd09d591012c0ca1d5e1feed9e39b777500a8a/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32332e6a7067)
Day25 - Event Capture, Propagation, Bubbling and Once
![](https://camo.githubusercontent.com/d948942c37f630b75f3f8be03759409e066cd3177b43f947704953b3395a66c4/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32342e6a7067)
Day26 - Stripe Follow Along Nav
![](https://camo.githubusercontent.com/c268d049057dfb8ce6a52f9428f50e536782841d2969a21f10b9f4584b9ecdd7/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32352e6a7067)
![](https://camo.githubusercontent.com/24683fe6a3e70ab760b04fc7dcbc3bdfea206467abccafa9f9c9b1e41ad067bd/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32362e6a7067)
Day28 - Video Speed Controller
![](https://camo.githubusercontent.com/da8305c9b110fe348a814c2607014a058cecd347dc0e59fd85c3bd826891e818/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32372e6a7067)
![](https://camo.githubusercontent.com/11c1930469ddb71fe483d7e71299df9ac85ec5312432d3584fe6833340b3726d/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32382e6a7067)
![](https://camo.githubusercontent.com/4d1130d1c9659999fefaa7f4eeffd5857a0f61bde9a7ca2624176bc43b9eb793/687474703a2f2f6f736c7761666237312e626b742e636c6f7564646e2e636f6d2f736d616c6c32392e6a7067)
社群品牌:从零到壹全栈部落
定位:寻找共好,共同学习,持续输出全栈技术社群
业界荣誉:IT界的逻辑思维
文化:输出是最好的学习方式
官方公众号:全栈部落
社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)
技术交流社区:全栈部落BBS
全栈部落完整系列教程:全栈部落完整电子书学习笔记
关注全栈部落官方公众号,每晚十点接收系列原创技术推送 |
![](https://camo.githubusercontent.com/6c4a84efbcbae6a302885df1e4709ff6228fb5d35e4cb5547ca11aa13f3bf7de/687474703a2f2f6f72686d38777568642e626b742e636c6f7564646e2e636f6d2f7175616e7a68616e62756c756f2e706e67) |