The aaa-js30-projects-aimanski12-2 from uvacoder

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 😎.

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.