Skip to content

Javascript 30

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

Javascript 30

readme.md

30 Days of JavaScript

Want to learn new and intresting things of JavaScript and become an Ace of JavaScript😎. Start this 30 Days of JavaScript Challenge by WesBos.

Let's have a look at the content:

  • Day 1 - JS Drum Kit🥁🥁 : In this challenge you will learn how to assign an audio to keys of the keyboard and play that audio clip using JS on keypress.

  • Day 2 - JS Analog Clock⏰⏰ : In this challenge you are going to learn how to convert current time to angles for hour, minute and second hands of the clock.

  • Day 3 - Changing CSS vars with JS : In this challenge you are going to learn how to modify and play with CSS variables using JavaScript.

  • Day 4 - Array Cardio Part 1💪💪 : In this challenge you are going to learn some array methods like filter(), map(), sort() and reduce(). That is going to make you strong against JS arrays.

  • Day 5 - Flex Panel Gallery : In this challenge you are going to grab flexbox skills. We will make gallery which widens the pic you click. Flexbox + JS = 🔥🔥

  • Day 6 - Live Search with Typing : In this challenge you will fetch data and do live searching in the data. We will make a search box in which you get relevant suggesstions as you keep typing just like Instagram search.

  • Day 7 - Array Cardio Part 2💪💪 : In this challenge you are going to learn some more array methods like some(), every(), find(), findIndex() and splice().

  • Day 8 - HTML Canvas Fun🎨🎨 : In this challenge you will be learning how to play with HTML Canvas API. Grab the skills of canvas api and make a paint board.

  • Day 9 - Learn Devtools💻💻 : In this challenge you will brush up your developer skills. You will learn to use devtools an essential tools for all web developers.

  • Day 10 - Check Multiple CheckBox✅✅ : In this challenge you will be making an UI in which a user can check multiple checkboxes by with the help of shift + click.

  • Day 11 - Custom Video Player : In this challenge you will learn how to make a basic video player which can play/pause a video, change it's volume and speed and much more.

  • Day 12 - Unlock Key Sequence🔐🔐 : In this challenge you will have to detect a key sequence entered from the keyboard and unlock if that matches with our key sequence.

  • Day 13 - Slide on Scroll : In this challenge you will learn how to detect scroll amount of the webpage and how to create animation depending on the scroll amounts. We will make the images slide in and out depending on the scroll amounts.

  • Day 14 - Copy vs Reference in JS : This challenge will teach you the difference between copying a variable and referencing it.

  • Day 15 - How to Use LocalStorage :

  • Day 16 - Moving Shadows :

  • Day 17 - Custom Sort without Articles(a, an, the) :

  • Day 18 - JS Array Reduce Method :

  • Day 19 - Webcam Fun :

  • Day 20 - Speech to Text with JS :

  • Day 21 - Geolocation with JS :

  • Day 22 - Follow along Highlighter :

  • Day 23 - Text to Speech with JS :

  • Day 24 - Sticky Navbar :

  • Day 25 - Event Capture, Propogation and Bubbling :

  • Day 26 - Follow along Navbar :

  • Day 27 - Dragable Content :

  • Day 28 - Control video speed with JS :

  • Day 29 - Countdown Timer :

  • Day 30 - Whack a Mole Game :

  • Day 31 - OTP input section (additional) :