This repository is a curated collection of beginner-friendly frontend projects built purely with HTML, CSS, and JavaScript. The primary goal is to demonstrate a solid understanding of web fundamentals like DOM manipulation, event handling, and state management before advancing to modern frameworks.
Each project is a self-contained module designed to tackle a specific challenge and reinforce key concepts.
| Project | Core Functionality | Key Concepts Learned |
|---|---|---|
| 1. Distance Converter | Converts units bidirectionally (e.g., kilometers ↔ miles). | input event listeners, number coercion, basic math operations. |
| 2. Digital Clock | Displays the current time, auto-refreshing every second. | JavaScript Date object, setInterval(), and conditional rendering. |
| 3. Color Changer | Generates a random hex color and applies it to the background. | Random number generation, string interpolation, and style.backgroundColor. |
| 4. To-Do List | A stateful task manager with add, remove, and complete features. | Dynamic element creation (createElement), event delegation, localStorage. |
| 5. Calculator | A functional calculator for basic arithmetic operations. | UI state management, operator precedence logic, and algorithm design. |
This portfolio exclusively uses the "vanilla" stack to focus on the core technologies that power the web.
- HTML5: Used for creating a semantic and accessible structure for each application.
- CSS3: Applied for styling, layout (including Flexbox/Grid), and basic responsiveness.
- JavaScript (ES6+): Powers all the logic, interactivity, and DOM manipulation.
To explore these projects locally on your machine, follow these simple steps:
-
Clone the Repository
git clone [https://github.com/your-username/your-repository-name.git](https://github.com/your-username/your-repository-name.git)
-
Navigate to a Project Directory
cd your-repository-name/project-folder-name -
Run the Project Simply open the
index.htmlfile in your preferred web browser. No compilers or servers are needed!
This portfolio is a living project. Future plans include:
- Refactor: Abstract common functionalities into reusable JavaScript modules.
- Testing: Implement unit tests for the Calculator and Converter logic using a framework like Jest.
- Framework Migration: Rebuild a project in React to compare vanilla JS with component-based architecture.
- Deployment: Host the projects live using GitHub Pages for easy public access.