✨ 20+ mini projects using HTML5, CSS & JavaScript. No frameworks, no libraries. ✨
Explore the projects »
Visit Projects Website
- Form Validator
- Movie Seat Booking App
- Video Player
- Exchange Rate Calculator
- Wealth Calculator
- Menu Slider
- Hangman Game
- Meal Finder
- Expense Tracker
- Music Player
- Infinite Scrolling
- Typing Game
- Speech Text Reader
- Memory Cards
- Lyrics Search App
- Relexar App
- Breakout Game
- New Year Countdown
- Sortable List
- Speak Number Guessing Game
Simple client side form validation. Checks required, length, email and password match. Show error messages under specific inputs. check passwords match to match confirm password
Display movie choices and seats in a theater to select from in order to purchase tickets. User can select a movie/price. User can select/deselect seats. Save seats, movie and price to local storage so that UI is still populated on refresh.
Custom video player using the HTML5 video element and it's JavaScript API with a custom design. It contains Play/pause, Stop, Video progress bar, progress bar time features.
Select countries to get the exchange rate for a specific amount.Display UI with 2 select lists for countries and 2 inputs for amounts. Display the values for both countries.
Explore Exchange Rate Calculator
Project to learn high order array methods and DOM manipulation. Used forEach() to loop and output user/wealth. Used map() to double wealth. Used filter() to filter only millionaires. Used sort() to sort by wealth. Used reduce() to add all wealth.
Simple landing page with sliding menu and modal. Created and style landing page. Style side nav and modal. Added functionality to make menu open/close on button click. Added functionality to make modal open/close on button click.
Select a letter to figure out a hidden word in a set amount of chances.
Search and generate random meals from the themealdb.com API.
Keep track of income and expenses. Add and remove items and save to local storage.
Create beautiful UI to play music stored in the "music folder" using the HTML5 audio API.
Display blog posts from jsonplaceholder and add infinite scroll to fetch posts and also add filter box.
Game to beat the clock by typing random words.
A text to speech app for non-verbal people. Pre-made buttons and custom text speech. This project uses the Web Speech API.
Flash card app for learning. Display, add and remove memory cards with questions and answers.
Find songs, artists and lyrics using the lyrics.ovh API.
A relaxing breathing app with a visual director to tell you when to breathe in, hold and breathe out.
Game where you control a paddle with the arrow keys to bounce a ball up to break bricks. This app uses the HTML5 canvas element and API.
Landing page that counts down from the current date to the next new year.
Display a scrambled list that can be sorted with drag and drop.
Number guessing game where you speak your guess into the microphone using the speech recognition API.
Explore Speak Number Guessing Game
Zeeshan Haider Shaheen - @zeeshanhshaheen