A list of 20 projects from the ZTM JS-20-Projects course. Each project built using pure JavaScript, HTML5, and CSS3, and built with best practices for building responsive and mobile-first web applications.
-
Quote Generator - Fetch, Async/Await, Quote API, CORS
Generates inspirational quotes using the Fetch API, Async/Await, and CORS to retrieve quotes from an external API. -
Infinity Scroll - Fetch, Async/Await, Unsplash API, DOM, Scroll Event Listener
Displays an infinite scroll of images by dynamically loading images from the Unsplash API using the Fetch API, Async/Await, and the DOM and Scroll Event Listener. -
Joke Teller - Fetch, Async/Await, Joke API, Text-to-Speech
Tells jokes by retrieving them from an external Joke API using the Fetch API and Async/Await, and voices the jokes aloud using Text-to-Speech. -
Picture in Picture - Screen Capture API
Opens a video in Picture-in-Picture mode by capturing a portion of the screen using the Screen Capture API. -
Light & Dark Mode - DOM, localStorage
Lets users switch between light and dark modes by dynamically switching the color scheme using the DOM, and stores their preference using localStorage. -
Animated - Template, AOS.js
A visually stunning and responsive web app built with a template and AOS.js. -
Navigation Nation - CSS Animations
An interactive web app featuring captivating CSS animations and smooth transitions. -
Music Player - HTML 5 Audio API
A feature-rich and customizable music player that leverages the HTML 5 Audio API and modern JavaScript technologies. -
Custom Countdown - Date, localStorage
A sleek and customizable countdown web app that utilizes the Date object and localStorage. -
Book Keeper - DOM, localStorage
A tool to keep track of reading lists using DOM manipulation and localStorage. -
Video Player - HTML 5 Video API
A customizable HTML5 video player that adds interactive functionality using the HTML5 video element and JavaScript. -
Form Validator - DOM, Forms
A convenient form validation tool that validates input fields and displays error messages in real-time using pure JavaScript, HTML5, and CSS3. -
Spock Rock Game - Confetti.js, Modules
A fun game built with pure JavaScript, HTML, and CSS, featuring Confetti.js and Modules. -
Nasa Pod - Fetch, Async/Await, NASA API, DOM, localStorage
A web app that fetches the astronomy picture of the day from the NASA API and displays it on the page using advanced concepts such as asynchronous programming, working with the DOM, and using localStorage. -
Math Sprint - SetInterval, DOM, Array Methods, localStorage
A fun and challenging game that tests your math skills by presenting a series of questions with a timer. It uses concepts such as setInterval, working with arrays, and dynamically updating the DOM. -
Drag and Drop - Drag and Drop API, localStorage
A web app that showcases the power of the HTML Drag and Drop API by allowing users to drag and drop items between two lists and saves their preferences using localStorage. It teaches important concepts such as working with the DOM, handling events, and using browser storage. -
Calculator - Math Methods
A classic web application that demonstrates the power of math methods in JavaScript, with basic functionality such as addition, subtraction, multiplication, and division. It teaches important concepts such as working with HTML forms, handling events, and using math methods in JavaScript. -
Splash Page - DOM Basics
A simple landing page that showcases the basics of working with the DOM in JavaScript. It teaches important concepts such as manipulating HTML and CSS using JavaScript and handling events to create an interactive user experience. -
Paint Clone - Advanced HTML Canvas, localStorage
A sophisticated HTML canvas application that allows users to draw and save their artwork using localStorage. It demonstrates the power and versatility of the HTML canvas element and teaches important concepts such as handling events, working with arrays, and using browser storage. -
Ping Pong - Advanced HTML Canvas
A fun and challenging game that showcases the power of the HTML canvas element. It features collision detection and object movement in 2D space, and allows you to control your paddle with ease. The game is played against the computer, and you must score as many points as possible to win. It has retro graphics and addictive gameplay.