HTML-CSS-JS-Logic

Repository Overview

This repository is a small portfolio-style collection of front-end projects built with vanilla HTML, CSS, and JavaScript. Each project focuses on real UI behavior and practical browser-side logic (DOM manipulation, event handling, and localStorage persistence).

Project Collection

Project	Description	Live Demo
Advanced Calculator	Expression evaluation engine with operator precedence, parentheses, and unary minus (Shunting Yard algorithm)	Click Here…
To-Do List	CRUD-style to-do app with filters, inline editing, and persistence using localStorage	Click here…

Statistics

• Total Projects: 2
• HTML Projects: 2
• CSS Projects: 2
• JavaScript Projects: 2

Skills Demonstrated

• Building static UI with semantic HTML structure
• Styling and layout with CSS Flexbox and CSS Grid
• Responsive design using media queries (where applicable)
• DOM querying, dynamic rendering, and UI state synchronization
• Event delegation for dynamically created elements
• Persisting user data with localStorage
• Algorithmic JavaScript (tokenization, infix-to-postfix conversion, stack-based evaluation)

Learning Journey

Across these projects, the progression is clear:

1. Advanced Calculator focuses on turning a user-typed expression into tokens, then evaluating it safely using a stack-based parsing approach (instead of relying on eval). This strengthens reasoning about edge cases like precedence and unary minus.
2. To-Do List shifts the focus to application-like UI behavior: creating, updating, filtering, and deleting tasks while keeping the interface consistent after every re-render, and persisting state across refreshes.

Together, they demonstrate both algorithmic problem solving and UI engineering patterns in vanilla web technologies.

Repository Structure

.
├─ Advanced Calculator/
│  ├─ index.html
│  ├─ README.md
│  ├─ Preview_Image-1.png
│  ├─ Preview_Image-2.png
│  ├─ Preview_Image-3.png
│  └─ Script/
│     ├─ script.js
│     └─ style.css
├─ To-Do List/
│  ├─ index.html
│  ├─ Preview_Image-1.png
│  ├─ Preview_Image-2.png
│  ├─ Preview_Image-3.png
│  ├─ Preview_Image-4.png
│  ├─ Assets/
│  │  └─ To-Do List.png
│  ├─ Script/
│  │  └─ script.js
│  └─ Style/
│     └─ style.css
└─ Learning.md

GitHub Pages Links

• Advanced Calculator: Repo Link
• To-Do List: Repo Link

Author

• Mullai Venese - MullaiVenese03
• Repository: HTML-CSS-JS-Logic