Wes Bos' (@wesbos) JavaScript 30 Day Challenge. This is a plain vanilla JavaScript exercise, without any libraries, transpilers or frameworks.
Check out the course at https://JavaScript30.com
This repo is just a follow along to the course.
Live Link - JavaScript Drum Kit
Thoughts:
Learned about keydown event, transitionend event and little bit about the audio element.
Live Link - JS and CSS Clock
Thoughts:
Learned about CSS transform, the JavaScript method setInterval and a little bit about the global object Date
Apart from learning these, made a modification to the clock, added the clock
numbers as an SVG, then played around with the width, top and left
properties of the hour, minute and second hands to have a better looking clock.
Better being relative. 😆
Live Link - CSS Variables
Thoughts:
Woah, I wasn't even aware vanilla CSS had variable support(in whatever way). But I learned it today. 😎
I also learned about the :root CSS element and that in JavaScript it can be referenced by document.documentElement. Also used dataset attributes to set the suffix for each CSS property modified by the inputs.
Live Link - Array Cardio Day 1
Thoughts:
I had previously encountered and practiced some stuff on Array.prototype.map(), Array.prototype.reduce(), Array.prototype.filter(). I had also encountered Array.prototype.sort() in the MDN docs while solving a problem. So today I completed the whole exercise without looking even at the process, let alone the solution. Proud! 😎
Live Link - Flex Panel Gallery
Thoughts: Flexible Box Layout is completely new to me. Read the CSS properties, Alignnment properties and glossary terms mentioned on the MDN that I used in this challenge. Will have to read the other properties also to have a complete view of Flex Box Layout.
Live Link - Type Ahead
Thoughts:
Almost all the topics today are new to me. So I read up on MDN like always. I actually found that the input event was fired every time the value of an input changed, instead of only when it is being committed(press enter, click elsewhere, etc). So instead of using change and keyup, I swapped it with the input event only. I also swapped the cities list with a list of Indian cities 🇮🇳. But it didn't have a population count, so I removed everything related to population.
Live Link - Array Cardio Day 2
Thoughts:
Similar to the Day 4, today was a breeze and I did the exercise within 1 Pomodoro. (I follow the Pomodoro technique). I had already read up on Array.prototype.some(), Array.prototype.every(), Array.prototype.find() and Array.prototype.findIndex()
Live Link - Fun with HTML5 Canvas
Thoughts:
Today was completely new for me again. Had never worked with the Canvas element. Read about all the methods and attributes of canvas I used on MDN, and then some. I tied up CanvasRenderingContext2D.clearRect() to a button.
Live Link - Dev Tools Domination
Thoughts:
Wow, even the console was hiding so much functionality. I just new about console.log, console.warn, console.error, console.info. Especially love the console.group() feature and the console.time() feature.
Live Link - Hold Shift and Check Checkboxes
Thoughts: In this exercise, I tried it myself first, and then saw the solution. Once you see the solution, it seems simple enough. Even though the code I wrote is not as clean or optimal, I'm happy that I was able to complete it without using any libraries and without looking at the solution! 😅💪
Live Link - Custom Video Player
Thoughts:
This was pretty cool. I'll revisit this once I'm done with all the challenges. I learnt quite a few properties and methods of HTMLMediaElement and also about using the flex-basis CSS property.
Live Link - Key Sequence Detection
Thoughts: It was fun today. Apparently the KONAMI code exists on a lot of websites. I modified the demo a little to display the key that was pressed.
Live Link - Slide in on Scroll
Thoughts:
Lots of new stuff learned today. Used in the demo were window.scrollY, window.innerHeight, HTMLelement.offsetTop. Also this article on debouncing explains what it does along with the code example.
Live Link - JavaScript References VS Copying
Thoughts:
This one was a quick study. I had already learnt about copying before. Although the _.cloneDeep was new.
Live Link - LocalStorage
Thoughts:
Learned about the LocalStorage methods localStorage.setItem and localStorage.getItem. Will revisit this after the whole challenge completes to add the Delete All, Check All and Uncheck All buttons.
Live Link - Mouse Move Shadow
Thoughts: Mostly new stuff. Few of the values were familiar from previous challenges. But at the end, it's wicked cool when you get to play around! 😆
Live Link - Sort Without Articles
Thoughts: This was an easy one. Although, the code I wrote was not an optimal one, but I'm still happy I got it completely without getting any help from the solution part of the video.
Live Link - Adding Up Times With Reduce
Thoughts: Really starting to appreciate map and reduce in general.
Live Link - Webcam Fun
Thoughts: This was tiring but fun. Also the more weird ones end up having browser compatibility issues. But this was lots of information packed into one challenge. Will have to revisit this one too, not for modifying, just understanding all the methods available on media streams and stuff.
Live Link - Speech Detection
Thoughts: Wow. This was interesting. Speech recognition right there in the browser. But currently it's Chrome only, but according to docs, Firefox plans to add it by 2020.
Live Link - Geolocation
Thoughts: Well, I didn't use a simulator and went for a walk! 😆 But the speed was only being changed in decimal places for km/hr setting.
Live Link - Follow Along Link Highlighter
Thoughts:
The Element.getBoundingClientRect() was new. Also learnt about the mouseenter event.
Live Link - Speech Synthesis
Thoughts: Okay, so a lot of new stuff. The whole SpeechSynthesis WebAPI was new. It was fun. Having this work cross browser, cross platform will be a pain! 😅
Live Link - Sticky Nav
Thoughts: This is something I've always used Bootstrap for! 😆 It's nice to do this without framework.
Live Link - Event Capture, Propagation, Bubbling and Once
Thoughts:
This was a confusing one. I am pretty sure I have not understood the real use cases of each of the permutations of these methods/attributes/options - options for addEventListener, event.stopPropagation(). Will have to revisit this again.
Live Link - Stripe Follow Along Nav
Thoughts: This exercise was a good introduction to explain the fact that we can use the same methods and properties in various combinations and add a little bit of math to create amazing functions.
Live Link - Click and Drag
Thoughts:
So I learnt about the pageX method which was used to create this cool click and drag event. But mostly it was more about how to use the same position and other properties of elements and the mouse to create cool effects.
Live Link - Video Speed Controller
Thoughts: I'm really thankful to Wes for creating this course. It's really fun learning the behind the scenes of these awesome effects. Now whenever I see cool effects I start thinking of how can I replicate it! 👀
Live Link - Countdown Timer
Thoughts: This is a tool I might start using along with a ToDo list feature and using localStorage to have it work offline too! 😆
Live Link - Whack A Mole
Thoughts: So it was fun to follow along and create this. But I am not sure I could've created this from scratch without any help. Will still need loads of practice. But it was even more fun to play with it! Not able to go beyond 13 though for the score. 😅
Well, this brings us to an end of the JavaScript30 course. I am planning on doing another 30 days challenge in the future where I don't take help from any course and build things on my own. The ideas could be from something I see in the wild on the internet. If I do anything else, I'll just keep adding more to this repo.