Skip to content

zeeshanhshaheen/vanilla-javascript-projects

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💻 Vanilla JavaScript Projects 💻


✨ 20+ mini projects using HTML5, CSS & JavaScript. No frameworks, no libraries. ✨


Explore the projects »

Visit Projects Website

Projects List:



Form Validator

alt text



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

Explore Form Validator

Movie Seat Booking App

alt text



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.

Explore Movie Seat Booking

Video Player

alt text



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.

Explore Video Player

Exchange Rate Calculator

alt text



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

Wealth Calculator

alt text



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.

Explore Wealth Calculator

Menu Slider

alt text



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.

Explore Menu Slider

Hangman Game

alt text



Select a letter to figure out a hidden word in a set amount of chances.

Explore Hangman Game

Meal Finder

alt text



Search and generate random meals from the themealdb.com API.

Explore Meal Finder

Expense Tracker

alt text



Keep track of income and expenses. Add and remove items and save to local storage.

Explore Expense Tracker

Music Player

alt text



Create beautiful UI to play music stored in the "music folder" using the HTML5 audio API.

Explore Music Player

Infinite Scrolling

alt text



Display blog posts from jsonplaceholder and add infinite scroll to fetch posts and also add filter box.

Explore Infinite Scrolling

Typing Game

alt text



Game to beat the clock by typing random words.

Explore Typing Game

Speech Text Reader

alt text



A text to speech app for non-verbal people. Pre-made buttons and custom text speech. This project uses the Web Speech API.

Explore Speech Text Reader

Memory Cards

alt text



Flash card app for learning. Display, add and remove memory cards with questions and answers.

Explore Memory Cards

Lyrics Search App

alt text



Find songs, artists and lyrics using the lyrics.ovh API.

Explore Lyrics Search App

Relexar App

alt text



A relaxing breathing app with a visual director to tell you when to breathe in, hold and breathe out.

Explore Relexar App

Breakout Game

alt text



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.

Explore Breakout Game

New Year Countdown

alt text



Landing page that counts down from the current date to the next new year.

Explore New Year Countdown

Sortable List

alt text



Display a scrambled list that can be sorted with drag and drop.

Explore Sortable List

Speak Number Guessing Game

alt text



Number guessing game where you speak your guess into the microphone using the speech recognition API.

Explore Speak Number Guessing Game

Contact

Zeeshan Haider Shaheen - @zeeshanhshaheen