Javascript Projects
Welcome to my Javascript Projects. This repo houses my javascript projects. Some items in this project are inspired by WesBos' Javascript30 Project Challenge. Thank you for taking time to check this repo 😎.
Table of Contents
The projects are listed from the latest.
30. Text Clock
OverView
I got this idea for this project from Jennifer Dewalt in oe of her 180 website challenge. I had so much fun building this and learned so many things.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
29. Budget Tracking App
OverView
This app is like a budget tracker. You can add income and expense sources from the form field and the app will generate a statistics of how you spend and how much you save money.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
28. Horoscope
OverView
This app generates random horoscope forecast about your age, sex preferences and marital status. It also generates random number combinations for your luck.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
27. Quotes
OverView
This is an app that generates random quotes from the Quotable API. It is a lightweight API that you can query for free.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
26. Drop Ball
OverView
I would like to call this app drop ball. Its just a basic app that allows the user to click on the screen and a ball comes out from and drop down to its own gravity.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
25. Bubbles
OverView
This is a simple bubbling particles created from a javascript canvas. Whenever the user hovers his mouse to the screen, any bubble near the cursor will grow in size and decrease when it goes away from the cursor.
View it live from your browser. Deployed
with Firebase through ReactJS
View project source code.
Watch Short Video Clip
24. Bouncing Particles
OverView
This is a simple bouncing particle created from a javascript canvas. It allows the use to create multiple particles with variations of color combinations.
View it live from your browser. Deployed
with Firebase through ReactJS
View project source code.
Watch Short Video Clip
23. Calculator
OverView
I always want to build my own calculator app and in this project, I have buid one. It can compute 21 digits or more from the decimal point. It can also handle huge numbers and return an exponent.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
22. Rock Paper Scissors
OverView
Rock Paper Scissors is one of the most common games everybody used to play when they were young. I made one app like so using javascript and so happy about how the app came out.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
21. Color Picker
OverView
Rock Paper Scissors is one of the most common games everybody used to play when they were young. I made one app like so using javascript and so happy about how the app came out.
View it live from your browser. Deployed with Firebase through ReactJS
View project source code.
Watch Short Video Clip
20. Tic Tac Toe
OverView
This is a Tic Tac Toe App. A board game that I used to play with when I was a little boy. I was inspired to build this app to test my Javascript Skills. I was so happy that I was able to make one.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
19. Body Mass Index Calculator
OverView
This is a body mass index counter app. It allows you to calculate your body mass index base on the universal expressed in units pounds/m2. I wanted to apply my javascript skills in building this app was so happy I made one.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
18. Word Guess
OverView
Word Guess is one of the games I used to play with for passt times. Now, with Javascript, I build one and so happy to share this with you. One of the things I really liked when building is app how to scramble words and omit the repeating characters and add more new characters.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
17. Speech Synthesis
OverView
This is a text to speech app where you can type any text and then the app will simulate a voice from the text you have entered. The app is using the
SpeechSynthesisUtterance
API to simulate a voice.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
16. Speech Recognition
OverView
This is a speech recognition app. It is using the
SpeechRecognition
API that is only supported by Chrome browser (as of this time of publication). The API uses the uses microphone to process speech audio and converts the speech into a string of text.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
15. Photo Booth
OverView
I build this Photo Booth app that allows the user to make custom images. This app uses the users camera and then renders the image with the ability to manipulate the image by pixels. The app allows the user to capture images and save it to the users machine.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
14. Word Beater
😎
OverView This is a speed typing app. It is inspired by Traversy Media video tutorial on youtube. In this app, I added a lot of complexities like flicker score, slider bar, flicker counter, save highest score on local storage and many more. I wrote this application using OOP or Object Oriented Programming.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
13. Block Puzzle
😎
OverView Block Puzzles are one of my favorite toys that I always played with when I was a little boy. I was inspired to build this using Javascript. I was so happy after I build it. I learned so many things from this.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
12. Drag and Drop
😎
OverView Making draggable element in JS are one of the most interesting features that I always love to put my hands on. So I tried to build one TodoList to enhance my skills. I learned so many Javascript functions ans HTML elements when I build this app.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
11. Seven Segment Display
😎
OverView Seven Segment Display or SSD is a common display design for electronic devices. I build one like this to understand its core concepts and visualization structure and why it is called seven segment. I enjoyed and learned a lot in building this project.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
10. Pamodoro Timer
😎
OverView Pamodoro timer is one of the examples to exercise your javascript skills. So, for this challenge I build one that contains audio effects, start pause and stop button, functionality and audio controls.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
09. Nokia Snake Game
😎
OverView I build this snake game app that is inspired by the famous Nokia cellphone game.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
08. Canvas Paint
😎
OverView HTML Canvas is one of the most fascinating things that like to play with. So I created this canvas project that allows the user to create images using mouse as their brush. I enjoyed creating this project and I learned a lot from it.
View it live from your browser Deployed with Firebase through ReactJS
Watch Short Video Clip
View project source code.
07. Jet Fighter Arcade Game
😎
OverView This is an app that is inspired by Jet Fighter arcade game. I created this app for this project because I was inspired by the animations and audio effects.
View it live from your browser Deployed with Firebase through ReactJS
Watch Short Video Clip on Youtube.
View project source code.
06. Kill the Dragon
OverView 😎
This is a game app that has the same principles of Whack-A-Mole. In this app, I have added more characters and replace the Mole character to a dragon. I have also added audio effects and some css animations.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip on YouTube
View project source code.
05. Pairing Game
😎
Overview Pairing Game is one the most common programming exercises and so I decided to create one. In this app, I have integrated some audio effects to make this app a little interesting. I had so much fun building this application and I learned a lot from it.
View it live from your browser. Deployed with Firebase through ReactJS
Watch Short Video Clip on YouTube
View project source code.
04. Javascript Circles
😎
Overview This is an application that generates multiple random circles in the browser. It is using javascript canvass to create 2d circles and increase its size as in a fraction of time.
View it live from your browser
Watch Short Video Clip on Youtube
View project source code
03. Analog Clock
Overview 😎
This Analog Clock is built from p5.js a JS client-side library for creating graphic and interactive experiences for the user.
You can use this app if you need to run some clock on your desktop.
View it live from your browser
Watch Short Video Clip
View project source code
02. Analog & Digital Clock
😎
Overview This is an app that outputs digital and analog clock on your browser. The analog clock is using javascript and css animations.
View it live from your browser
Watch Short Video Clip.
View project source code.
01. Music Keyboard
😎
Overview This project is a simple musical keyboard that plays a sound whenever you press a key that corresponds to the sound. This application allows you to create simple music rythms on the fly.
View it live from your browser
Watch Short Video Clip.
View project source code.
Author
Aimanski12. Thank you very very much for giving this project a ⭐
License
Copyright © 2019, Aimanski12. Released under the MIT License.