JavaScript Web Applications Collection

A comprehensive collection of pure JavaScript applications demonstrating mastery of DOM manipulation, Fetch API, OOP, LocalStorage, etc.

This site was built using GitHub Pages.

---

1. Todo List (API Version)

A dynamic task management application that synchronizes with a remote server using RESTful API calls.

Technologies Used:

• JavaScript (ES6+)
• HTML5
• CSS3

Techniques & Approaches Used:

• Fetch API: Handling GET, POST, PUT requests to JSONPlaceholder.
• Asynchronous JavaScript: Usage of Promises (.then/.catch) for non-blocking data fetching.
• Object-Oriented Programming: Task, TasksListView, and dataService classes for clean architecture.
• DOM Manipulation: Dynamic rendering of task elements based on server state.

Features:

• Fetch all tasks or filter by 'not completed'.
• Add new tasks (Real POST request to mock API).
• Mark tasks as done/undone (Handles both server-side and client-side logic).
• Real-time UI updates reflecting server responses.

---

2. User Management System

A CRUD (Read, Update, Delete) application for managing user data with persistent local storage.

Technologies Used:

• JavaScript (ES6+)
• HTML5
• CSS3

Techniques & Approaches Used:

• LocalStorage API: Persisting user data across browser sessions.
• CRUD Operations: Implementation of reading, updating, and deleting records.
• Form Handling: Controlled inputs and form submission management.
• Event Delegation: Efficient handling of list item clicks.

Features:

• View list of users with details (Company, Balance, Email, etc.).
• Select a user to populate the edit form.
• Update user details and save changes.
• Delete users from the list and storage.

---

3. Todo List (Basic)

A persistent client-side todo list focusing on local data management and fast UI interactions.

Technologies Used:

• JavaScript (ES6+)
• HTML5
• CSS3

Techniques & Approaches Used:

• LocalStorage API: Saving and retrieving tasks.
• Class-Based Architecture: TodoListService for logic and TodoFormService for UI interaction.
• Array Methods: Filtering, splicing, and mapping task data.

Features:

• Add, remove, and toggle completion status of tasks.
• Filter tasks by "All" or "Incomplete".
• Data persists after page refresh.

---

4. Advanced Calculator

A functional calculator with memory storage and error handling.

Technologies Used:

• JavaScript
• HTML
• CSS

Techniques & Approaches Used:

• Regular Expressions: Validating input and handling decimal points.
• Event Delegation: Single event listener for all calculator keys.
• Logic Implementation: Handling arithmetic operations, memory storage (M+, M-, MRC), and clearing.

Features:

• Basic arithmetic (Add, Subtract, Multiply, Divide).
• Memory functions (Store, Recall, Clear).
• Error handling (e.g., division by zero).

---

5. Box Animator

An interactive animation tool allowing users to control object movement and speed.

Technologies Used:

• JavaScript
• HTML
• CSS

Techniques & Approaches Used:

• Timer Functions: setInterval and clearInterval for animation loops.
• DOM Style Manipulation: Real-time updates to CSS left properties.
• Boundary Detection: Reversing direction when hitting container limits.

Features:

• Start and stop animation.
• Increase or decrease movement speed.
• Automatic boundary detection and direction reversal.

---

6. Random Interactive Generator

A dynamic tool that generates interactive draggable elements.

Technologies Used:

• JavaScript
• HTML
• CSS

Techniques & Approaches Used:

• DOM Generation: Creating 100+ elements programmatically.
• Randomization: Generating random positions and RGB colors.
• Custom Drag Logic: Using Mouse Events (mousedown, mousemove, mouseup) to calculate offsets.

Features:

• Generate 100 unique interactive elements.
• Drag and drop functionality for all generated items.
• Regenerate layout with new random parameters.