JavaScript for Kids: Code Your Own Games and Apps at Any Age

Create a random number guessing game in JavaScript by using Math.random to generate 1 to 100, prompt the user for a guess, and loop with conditions until correct.

Create a number guessing game that uses a while loop to repeatedly prompt for guesses, show too high or too low feedback, and stop when correct.

Build an interactive browser guessing game using random numbers, prompts, alerts, and a while loop. Add a for loop to celebrate by printing the player's name after a win.

Build a browser guessing game in JavaScript by prompting for the player's name, looping to celebrate wins, and writing the name to the page 500 times.

Learn to inspect and edit HTML in the browser, using inspect, view source, and design mode to edit a local page; build interactive HTML pages that run JavaScript.

Learn how to make HTML web pages interactive with JavaScript by creating functions, wiring up on click events to draw output like a cat using document.write, and using script tags.

Review HTML basics, including h1, h3, p, and script tags, and practice interactive JavaScript with functions, prompts, and button-driven events through name and guessing game challenges.

Learn to turn simple JavaScript into standalone web pages by copying code, renaming functions, and using HTML forms to create interactive 'say my name' and 'guessing game' programs.

Build an HTML-based guessing game using a text input and a button, display results on the page, and wire the event-driven interaction to JavaScript in the next lesson.

Connect an HTML form to JavaScript by wiring the button to a checkGuess function, read user input by id, compare it to a number, and display high, low, or win.

Enhance a browser-based guessing game by resizing the input field, preventing default submit with on submit return false, and adding newGame to focus and select the input after each guess.

Review a browser guessing game built with a text field, a check guess button, and on-page output using innerHTML. Explore challenges that track tries and add a scoreboard.

Develop two javascript guessing game versions that track tries, reset on new games, and update a live scoreboard with each win.

Learn to create an interactive drawing app with the HTML5 canvas and JavaScript, drawing colorful, transparent circles, rectangles, and arcs on a 2D canvas using mouse drag and random colors.

Learn to draw on the html5 canvas with mouse clicks, placing random colored circles, and outline them with a stroke while computing coordinates relative to the canvas.

Learn to turn a basic canvas drawing into a fluid drag-and-draw experience by adding a page background, consistent transparency, and mouse-move drawing to create stained-glass like circles.

Learn to draw on an HTML canvas using random hex colors and alpha transparency, with on click and mouse move events. Tackle challenges to vary circle size as you draw.

Grow and shrink circle radii with a grow flag to create pulsing visuals as you drag, and share your work on JSFiddle.

Build and run a JavaScript savings calculator that computes future balance from monthly deposits, annual interest, and years using input parsing, a for loop, and dynamic output.

Learn to debug a savings calculator in the browser using the inspect tool and console, identify errors like missing semicolons, quotes, or mis-capitalized getElementById, and fix them.

Review the savings calculator’s form-based interface and calculations, preview an investment graph to visualize growth, and tackle a challenge to turn it into a funny story generator using user-provided words.

Modify a savings calculator to a funny story app by generating stories from an animal, adjective, and verb, updating HTML output, IDs, and string concatenation to display a multi-line tale.

Transform a savings calculator into an investment calculator by drawing a bar chart on a canvas that shows yearly totals, using an array, a graph function, and clear rectangle.

Create an HTML investment calculator with a table-based form and a canvas bar chart, using JavaScript to parse numbers, compute yearly totals, and visualize progress with an outline and labels.

Turn a fully functional investment calculator into a portfolio showcase by adding bar chart outlines and labeled values at 10, 20, 30, and 40 years, improving readability and presentation.

Build a bouncing ball app with JavaScript using a Ball class, a constructor, and a draw method. Create new Ball on click to animate on a canvas.

Build an object-oriented bouncing balls app in JavaScript by creating a Ball class with draw and update methods, managing balls in an array, and animating with setInterval.

Animate bouncing balls by assigning each ball its own x and y velocity, randomizing directions, and updating positions at about 30 frames per second, with collision against canvas edges.

Explore turning a simple drawing app into an object oriented, HTML and JavaScript project with separate files and animated balls with random sizes and a configurable background color.

adds a clear button and prevents balls from getting stuck at edges by adjusting positions, checking for zero velocity, and refreshing the canvas in a JavaScript object-oriented program.

Discover a bonus memory card game built with JavaScript, HTML, and CSS, and learn to modify an existing program, customize colors and polygons, and add a timer and high scores.

Modify a snake game by adjusting points, length, colors, and speed using jQuery and JavaScript, then customize and share your version with friends.

Customize and experiment with a JavaScript snake game by adjusting score, speed, block size, colors, and fonts; learn by editing existing code, testing changes, and reverting when needed.