#JavaScript30

Welcome to my #JavaScript30 Showcase Page.

Design Idea copied from JavaScript30.com No Copyright infrignment Intended!

Hi, I'm Mitanshu. In Dec'20, I took the #Javascript30 Challenge and completed 30 projects on Vanilla JS. All the projects collectively helped me to gain confidence over different Javascript features, For eg; core programming logics, Events, Browser APIs, etc. This is a showcase page of all my projects that I made with live demo and project code. And, don't missout the functionalities I added to take the projects one step ahead.
Many thanks to @wesBos for these wonderful ideas and JavaScript30 course/challenge which helped me to learn a lot about vanilla Javascript and bring this page to life.

 

#Day1

JavaScript Drum Kit

A project focused on Keyboard Event, plays the sounds on key press.

  • Key Code Detection
  • JS to handle CSS change
  • Dataset Attributes
Live Demo Project Code
 

#Day2

JS and CSS Clock**

A live analog clock, implementing JavaScript Date class and maths logics.

  • Live and Working Clock
  • Improved the Clock Design
  • Improved Hour-Hand calculation
** Improved
Live Demo Project Code
 

#Day3

Playing with CSS Variables and JS

A basic project to trick/handle CSS and manipulate style using Javascript.

  • Dataset Attributes
  • Style manipulation of Root element
Live Demo Project Code
 

#Day4

Array Cardio Day 1

A project dedicated to Javascript Arrays.

  • Fundamentals Concepts
  • Array Methods
  • Programming Logics
Live Demo Project Code
 

#Day5

Flex Panel Gallery**

Another DOM based project with a taste of Flex box.

  • Hands-on Flex
  • DOM and CSS
  • Improved User Experience
** Improved
Live Demo Project Code
 

#Day6

AJAX Type Ahead**

A great project to show the power of Javascript and API.

  • API fetched Data
  • Get Country Info
  • Regular Expressions
** Improved
Live Demo Project Code
 

#Day7

Array Cardio Day 2

Some more Array methods to search and copy data.

  • Array Copy
  • Array Search
  • Programming Logics
Live Demo Project Code
 

#Day8

Fun With HTML5 Canvas**

A great example of HTML5 Canvas handling with Javascript.

  • JS Canvas Methods
  • HTML5 Canvas Concepts
  • Added Colorpicker and Eraser
** Improved
Live Demo Project Code
 

#Day9

Some Must Know Console Methods

A project to demonstrate some not-so-famous console methods.

  • Console Outputs
  • Console Methods
Live Demo Project Code
 

#Day10

Hold Shift Key with Checkboxes**

A great project to fill the knowledge gaps of DOM selectors.

  • Core JavaScript
  • DOM Live Sync
  • Add or Delete Items
** Improved
Live Demo Project Code
 

#Day11

Custom Video Player**

JavaScript can help you get your own video player.

  • JS Video prop. & Methods
  • Custom Video Player
  • Improved UX features
** Improved
Live Demo Project Code
 

#Day12

Key Sequence Detection

Another Keyboard Event based project with 3rd-party Script.

  • JS KeyEvents
  • Used Cornify JS
  • Fun Project
Live Demo Project Code
 

#Day13

Slide in on Scroll

A good project to develop responsive webpages.

  • JS Scroll Events
  • Real-Life Example
  • Programming Logics
Live Demo Project Code
 

#Day14

JavaScript Reference vs Copy

A gap filling project dedicated to Objects and Arrays.

  • Fundamentals Concepts
  • Object Reference vs Copy
Live Demo Project Code
 

#Day15

Local Storage**

A good project on Javascript LocalStorage feature for Beginners.

  • JS localStorage
  • Programming Logics
  • Added Delete & Uncheck Button
** Improved
Live Demo Project Code
 

#Day16

Mouse Move Shadow**

A fun project to manipulate CSS with cursor Move.

  • JS Cursor Position
  • CSS and Logics
  • Added Animation Effect
** Improved
Live Demo Project Code
 

#Day17

Sort Without Articles

A good example of Array Use with Regex and programming logics.

  • Fundamental Concepts
  • Regular Expression
  • Programming Logics
Live Demo Project Code
 

#Day18

Adding Times with Reduce

Yet another basic project dedicated to Array core concept.

  • JS Array Reduce
  • Programming Logics
Live Demo Project Code
 

#Day19

Webcam Fun

Let's play with browser API and canvas, packed with advanced knowledge.

  • Browser - Video API
  • HTML5 Canvas
  • Advanced Concepts
Live Demo Project Code
 

#Day20

Speech Detection

Another great project to interact with Browser API.

  • Audio API and Methods
  • Advanced Concepts
Live Demo Project Code
 

#Day21

Geolocation

Yet another great project in the series of Browser API.

  • Speed and Direction
  • Browser API
  • Advanced Concept
Live Demo Project Code
 

#Day22

Follow Along Links

A good project to learn creating exceptional User Interface.

  • Javascript Core
  • Programming Logics
Live Demo Project Code
 

#Day23

Speech Synthesis

Another Speech API based project with Advanced concepts and methods.

  • Browser API
  • Fun Project
  • Advanced Concept
Live Demo Project Code
 

#Day24

Sticky Nav

A project to learn about well-known Sticky Nav in Vanilla style.

  • Plugin with Vanilla
  • JS Scroll Events
  • Programming Logics
Live Demo Project Code
 

#Day25

Event Capture, Propagation, Bubbling and Once

A gap filling advanced concepts of EventListners.

  • JavaScript EventListeners
  • Advanced Concept
Live Demo Project Code
 

#Day26

Stripe Follow Along Nav

A next level project in the series of Follow along links to learn better styling.

  • Javascript Core
  • CSS Styling with JS
  • Programming Logics
Live Demo Project Code
 

#Day27

Click and Drag

An another project to get familiar with click-n-drag plugin with Vanilla JS.

  • JS Mouse Events
  • Programming Logics
Live Demo Project Code
 

#Day28

Video Speed Controller

A good project to learn about Javascript Video properties and methods.

  • JavaScript Core
  • JS Video methods
  • Programming Logics
Live Demo Project Code
 

#Day29

Countdown Timer**

A great project to learn about Javascript Date object.

  • Added Timer Alarm
  • Added extra features
  • Get Chrome Extension
** Improved
Live Demo Project Code
 

#Day30

Whack A Mole**

A fun javascript game with eventlistners and intervals.

  • Eventlistners & Intervals
  • Added HighScore feature
  • Programming Logics
** Improved
Live Demo Project Code