<<<<<<< HEAD 

JavaScript30

Starter Files + Completed solutions for the JavaScript 30 Day Challenge.

Grab the course at https://JavaScript30.com

Community #JavaScript30 Content

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 🙌 💪 👍
• 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! 👍
• 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] (https://github.com/eshanvohra) is currently doing this challenge. Check out my repo at(https://github.com/eshanvohra/JavaScript30)

Alternative Implementations

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.

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!

JavaScript30 - 30 Day JavaScript Challenge

Nitish Dayal, Software & Applications Developer
Last Commit Date: May 12, 2017

Course created by Wes Bos Join the challenge (for free!) here - JavaScript30

This repository contains my written guides for the JavaScript30 course by Wes Bos. I wrote these in the hopes of expanding the ways in which people can access this course; not everyone has the data allotments or internet speeds or...whatever the case may be to load multiple high definition videos. Or, maybe, you prefer to have a text-based guide to follow along with/ refer back to. Orrr you're in a library and don't have headphones. Who knows! If you want some documentation to go along with those sweet Wes Bos vids, here you go.

DISCLAIMER: My approach to some of the challenges will vary from the provided answers (found in the files that end with -FINISHED on the main repo). Some of the tweaks are just to include various 'best practices' and some have huge chunks of differences. I try to provide thorough explanations when I do stray from the path and explain why I chose to do so, but I want to make it clear that some of these guides don't go hand-in-hand with the videos.

About

Build 30 things in 30 days with vanilla JavaScript; no frameworks, libraries, etc. Pacing is totally up to the individual; if you feel like knocking out 30 challenges in 30 minutes, hey, more power to you, but that would miss the point of this course (IMO). The idea behind these exercises is to utilize small amounts of what would regularly be 'downtime' as moments in which we can build on our knowledge through some simple exercises.

I think it's fair to say that, coming into this course, you should have a decent grasp of JavaScript fundamentals. Comfort when working with functions, callbacks, arrays, and objects will help a great deal in working through the challenges. If you don't, don't worry and do it anyways <3. It might take you more than downtime to complete a challenge, but given that these exercises require you to work with those very topics time and time again, JavaScript30 is still an excellent learning resource.

The starter files (available here) include solutions to most challenges, so this isn't really meant to be taken as some kind of competition. JavaScript30 is focused more on helping developers enhance their current skillset and reducing developer reliance on external JS libraries; if it can be done with a JS library, it can (probably) be done with vanilla JS.

Table Of Contents

1. JavaScript Drum Kit
2. JS + CSS Clock
3. CSS Variables
4. Array Cardio, Day 1
5. Flex Panel Gallery
6. Type Ahead
7. Array Cardio, Day 2
8. Fun with HTML5 Canvas
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. LocalStorage
16. Mouse Move Shadow
17. Sort Without Articles
18. Adding Up Times with 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
26. Stripe Follow Along Nav
27. Click and Drag
28. Video Speed Controller
29. Countdown Timer
30. Whack A Mole

ca5a8693bb140d5026bf7e68de756a0b13a8d602