JavaScript30 - React Edition

30 vanilla JavaScript projects rebuilt with React, TypeScript, and Tailwind CSS

01

JavaScript Drum Kit

Play drums with your keyboard

02

JS and CSS Clock

An analog clock with CSS and JavaScript

03

CSS Variables

Update CSS variables with JavaScript

04

Array Cardio Day 1

Array methods: filter, map, sort, reduce

05

Flex Panel Gallery

Animated image gallery with flexbox

06

Type Ahead

Search cities with autocomplete

07

Array Cardio Day 2

More array methods: some, every, find, findIndex

08

Fun with HTML5 Canvas

Draw on canvas with your mouse

09

Dev Tools Domination

Master the console and debugging tools

10

Hold Shift and Check Checkboxes

Select multiple checkboxes with shift key

11

Custom Video Player

Build a custom HTML5 video player

12

Key Sequence Detection

Konami code style key sequence detection

13

Slide in on Scroll

Animate elements as they scroll into view

14

JavaScript References VS Copying

Understand references vs copying in JavaScript

15

LocalStorage

Store and retrieve data from localStorage

16

Mouse Move Shadow

Text shadow follows mouse movement

17

Sort Without Articles

Sort band names ignoring articles (a, an, the)

18

Adding Up Times with Reduce

Calculate total time from video durations

19

Webcam Fun

Capture and manipulate webcam feed

20

Speech Detection

Convert speech to text

21

Geolocation

Get user's location and display on map

22

Follow Along Link Highlighter

Highlight links with animated background

23

Speech Synthesis

Convert text to speech

24

Sticky Nav

Navigation bar that sticks on scroll

25

Event Capture, Propagation, Bubbling and Once

Understand event propagation

26

Stripe Follow Along Nav

Dropdown navigation with animated background

27

Click and Drag

Horizontal scrolling with click and drag

28

Video Speed Controller

Control video playback speed

29

Countdown Timer

Build a countdown timer

30

Whack A Mole

Classic whack-a-mole game