A 30-day challenge to create 30 projects in HTML, CSS, and "vanilla" JavaScript (i.e., no libraries such as jQuery, React, etc. allowed).
You can visit the deployed site with previews of and links to the individual projects at the following URL: https://maccabe1888.github.io/JavaScript30/
(Note that some projects are mainly exercises, with little if any UI. In such cases, check the console to see the results.)
The JavaScript30 course website can be found here: https://javascript30.com/
-
JavaScript Drum Kit: A virtual drum kit powered by your keyboard.
-
JS and CSS Clock: An analog clock powered by JavaScript and CSS animations.
-
CSS Variables: A customizable web page that uses CSS variables to allow the user adjust the page's style properties along a spectrum.
-
Array Exercise 1: Exercises that make use of JavaScript's array methods.
-
Flex Panel Gallery: A gallery of images whose size and other features the user can manipulate via CSS flexbox properties.
-
Type Ahead: Search for the name of a city to find its population. The web page will "type ahead" to show you city names that include your character string as you type.
-
Array Exercise 2: Exercises that make use of JavaScript's array methods.
-
HTML5 Canvas: A blank canvas on which the user can write/draw multicolored messages/images.
-
Dev Tools Tricks: Exercises that make use of the console in the browser.
-
Checkboxes: Use the "Shift" key to check multiple boxes without clicking each one individually.
-
Video Player: A custom video player with play, pause, skip, scrub, and volume and speed adjustment functions.
-
Key Sequence Detection: Type the secret code for a surprise!
-
Slide In on Scroll: A webpage that uses JavaScript and CSS animations to give images a "slide in" effect as the user scrolls to bring them into view.
-
JS Reference versus Copy: Exercises that highlight the distinction between copies and mere references saved as variables in JavaScript.
-
LocalStorage: A user-editable menu/checklist that is saved to LocalStorage when changed so that it persists even if the user reloads the page.
-
Mousemove Text Shadow: A webpage that uses JavaScript and CSS animations to generate a moving text shadow effect which follows the motion of the user's mouse.
-
Sort without Articles: An exercise that makes use of a regular expression to ignore articles at the beginnings of names when sorting alphabetically.
-
Adding Up Times with Reduce: An exercise that makes use of JavaScript's "reduce" method to add up the total running time of a list of videos.
-
Webcam Interface: A webcam interface that allows the user to take pictures using various backgrounds and filters.
-
Speech Recognition: A webpage that uses speech recognition to take dictation.
-
Geolocation: A webpage that shows you your current speed and coordinates.
-
Follow Along Link Highlighter: A webpage that uses JavaScript and CSS animations to generate a highlighter effect which follows the cursor as it moves from one link to another.
-
Speech Synthesis: A webpage that uses speech synthesis to read user-editable text.
-
Sticky Nav: A webpage featuring a "sticky" nav bar which remains visible at the top of the browser window even as the user scrolls down.
-
Event Propagation: A webpage that demonstrates how event propagation works and how it can be manipulated in JavaScript.
-
Follow Along Dropdown Menu: A webpage that uses JavaScript and CSS animations to generate a dynamic dropdown menu element which follows the cursor and whose content changes accordingly as it moves from one nav tab to another.
-
Click and Drag: A webpage that allows the user to click and drag across the page as an alternative to conventional scrolling.
-
Video Speed Controller UI: A video player interface which allows the user to adjust the video’s playback speed along a spectrum as it plays.
-
Countdown Clock: A timer that performs a countdown in seconds from a user-selected time interval to zero.
-
Whack-a-Mole: A whack-a-mole-style game in which the user is given a set amount of time to click/“whack” as many of the critters as possible.