A personal collection of small, beginner-friendly JavaScript projects focused on learning core concepts through hands-on building.
This repository contains a set of small JavaScript projects I built to practice DOM manipulation, event handling, basic algorithms, and UI interaction. Each project is self-contained inside its own folder and includes a simple HTML/CSS/JS structure so you can open and run each project immediately.
Goal: Learn by building — develop a clean portfolio of practical mini-projects and improve JavaScript fundamentals one project at a time.
02-quiz-generator/
03-fd-calculator/
04-password-generator/
05-vowel-checker/
06-age-calculator/
07-tip-calculator/
08-to-do-list/
09-digital-clock/
10-expense-tracker/
11-poper-application/
12-ascii-unicode-detector/
13-music-player/
14-count-down-maker/
15-book-marker/
16-video-player/
api/
Each project folder typically contains:
index.html— the main webpage for the projectstyles.cssorstyle.css— styles for the projectscript.js— JavaScript file containing the project logic
Click a project name to open its
index.htmlin your browser (works locally).
A small quiz app that presents multiple-choice questions, collects answers, and displays a score with feedback.
Fixed Deposit calculator that computes maturity value given principal, rate of interest, and tenure.
A utility to generate random passwords with options for length and inclusion of uppercase, numbers, and symbols.
Simple tool that checks whether the entered character is a vowel or not and displays the result.
Calculate age based on a user-provided birthdate. Demonstrates date handling and basic arithmetic in JS.
Compute tip amount and total bill based on bill value and chosen tip percentage.
A simple to-do list app featuring add, remove, and persist (localStorage) functionality.
A real-time digital clock built with JavaScript that updates every second.
Basic expense tracker that allows adding expenses and viewing totals; a foundation for a more advanced finance app.
A small UI utility demonstrating popover behavior using JavaScript event handling and DOM manipulation.
Tool to detect and display ASCII or Unicode values for user-entered characters.
🚀 Open ASCII / Unicode Detector
A browser-based music player featuring playlist control, play/pause functionality, and audio handling using the HTML5 Audio API.
A countdown timer that calculates remaining time until a selected future date.
A simple bookmark manager that allows saving, listing, and persisting website links using localStorage.
A custom video player with JavaScript-based controls demonstrating media event handling.
📁 [Source Code(./16-video-player/index.html)
Demonstrates the Picture-in-Picture Web API using video elements.
Demonstrates a desktop-based drag-and-drop Kanban board with editable items and local storage support.
Demonstrates Extracting Youtube Image From Youtube Video .
Projects that demonstrate working with external APIs using Fetch API and async JavaScript.
A dictionary application that fetches word meanings from an external API and displays definitions dynamically.
Generates and displays random quotes fetched from a public API.
Fetches jokes from an external API and displays them dynamically.
Search for images using an external image API and display results dynamically.
Implements infinite scrolling by loading new content dynamically as the user scrolls.
- Clone this repository:
git clone <your-repo-url>
cd <repo-folder>
```
2. Open any project in your browser by double-clicking the `index.html` file or serve the repo using a simple static server (recommended for consistent behavior):
```bash
# using Python 3
python -m http.server 8000
# then open http://localhost:8000/02-quiz-generator/
```
3. Modify HTML/CSS/JS files to experiment and learn.
---
## ✅ Contributing
Contributions and improvements are welcome! A few suggestions:
* Add comments and documentation to JavaScript files for readability.
* Improve styling and responsive behavior in CSS.
* Add tests or validation where appropriate (e.g., input validation for calculators).
* Create new mini-projects and follow the same folder structure.
If you'd like to contribute, open a PR describing the change.
---
## 📝 Notes & TODO
* Standardize naming of `styles.css` vs `style.css` across projects.
* Add README files inside complex project folders to describe specific features and usage.
* Add small screenshots or GIF demos for each project in `assets/`.
---
## 📬 Contact
**Georgekutty Jose**
Email: [georgekuttyjose84@gmail.com](mailto:georgekuttyjose84@gmail.com)
GitHub: [https://github.com/georgekuttyjose84](https://github.com/georgekuttyjose84)
---
## 📜 License
This repository is available under the **MIT License**. See `LICENSE` for details.
---
*Happy coding — build, break, fix, repeat!*