YasirAwan4831/arch-technologies-internship-task-2-todo-list

📌 Table of Contents

📖 About The Project
✨ Features
🖼️ Screenshots
📊 Lighthouse Report
🛠 Tech Stack
📂 Project Structure
🚀 Getting Started
💡 How It Works
🎯 Learning Outcomes
🗺️ Roadmap
👨‍💻 Author
📄 License

📖 About The Project

To-Do List Application is Task 2 of my Web Development Internship at Arch Technologies. The primary goal was to practice and demonstrate core JavaScript concepts — DOM Manipulation, Event Handling and LocalStorage — while delivering a clean, modern and fully responsive user interface.

This project intentionally uses no frameworks or libraries (zero dependencies) to showcase the raw power of Vanilla JavaScript in building a real-world application.

🎯 Goal	💡 Approach	🏆 Result
Practice DOM Manipulation	Pure Vanilla JS	Dynamic UI with zero frameworks
Learn Event Handling	addEventListener API	Smooth, responsive interactions
Master LocalStorage	JSON serialization	Data persists across sessions
Build Modern UI	CSS Variables + Flexbox	Dark/Light mode, fully responsive

✨ Features

Feature	Description	Status
➕ Add Tasks	Type and press Enter or click Add	✅ Done
✏️ Inline Edit	Click edit icon to modify any task	✅ Done
🗑️ Delete Tasks	Remove individual tasks instantly	✅ Done
✅ Mark Complete	Toggle tasks as done/pending	✅ Done
💾 LocalStorage	Tasks saved across browser sessions	✅ Done
🌙 Dark / Light Mode	Toggle theme with preference saved	✅ Done
🔍 Filter Tasks	View All / Pending / Completed	✅ Done
📊 Progress Bar	Visual completion percentage	✅ Done
🔔 Toast Notifications	Feedback on every user action	✅ Done
📱 Responsive Design	Works on Mobile, Tablet, Desktop	✅ Done
⌨️ Keyboard Shortcuts	Enter to add, Escape to cancel	✅ Done
🛡️ XSS Protection	Input sanitized via escapeHTML()	✅ Done

🖼️ Screenshots

🖥️ Desktop View

Full-featured layout with all controls visible

📱 Mobile View

Responsive single-column layout, touch-friendly buttons

Tablet View

Balanced layout optimized for medium screens

📊 Lighthouse Report

Tested using Google Chrome DevTools — Lighthouse Audit
All four metrics scored green (90+)

Metric	Score	Badge
⚡ Performance	66 / 100
♿ Accessibility	97 / 100
🛡️ Best Practices	100 / 100
🔍 SEO	100 / 100

---

🛠 Tech Stack

Technology	Purpose	Version
HTML5	App structure and semantic markup	HTML 5
CSS3	Styling, animations, theming, responsive layout	CSS 3
JavaScript	All app logic, DOM manipulation, event handling	ES6+
LocalStorage API	Client-side data persistence	Browser Built-in
Google Fonts	Typography — Syne & DM Sans	Latest
Font Awesome	Icons for buttons and UI elements	v6.5

✅ Zero dependencies — No npm, no frameworks, no build tools required.

📂 Project Structure

todo-list-app/
│
├──  index.html
├──  style.css
├──   script.js
│
├── 📁 assets/
│   ├── 📁 screenshots/
│   │   ├── desktop-view.pn
│   │   ├── mobile-view.png
│   │   ├── tablet-view.png
│   │   └── lighthouse-report.png
│   └── 📁 icons/
│       └── favicon.ico
└── 📄 README.md
└── 📄 LICENSE
└──    git Ignor

Getting Started

Prerequisites

No installation required! Just a modern web browser.

Run Locally

# 1. Clone this repository
git clone https://github.com/muhammad-yasir/todo-list-app.git

# 2. Navigate into the project folder
cd todo-list-app

# 3. Open index.html in your browser
# Option A — Double-click index.html
# Option B — Use VS Code Live Server extension (recommended)

Or Open Directly

Simply download the ZIP, extract it, and double-click index.html. No server needed.

💡 How It Works

User Input
    │
    ▼
addTask() ──► Validates Input ──► Creates Task Object { id, text, completed, createdAt }
    │
    ▼
tasks[] Array ──► saveTasks() ──► LocalStorage (JSON)
    │
    ▼
renderTasks() ──► getFilteredTasks() ──► createTaskElement()
    │
    ▼
DOM Update ──► updateStats() ──► updateProgressBar()

Core JavaScript Concepts Used

Concept	Where Used
`document.getElementById()`	Selecting DOM elements
`addEventListener()`	Button clicks, keyboard events
`createElement()` / `innerHTML`	Building task elements dynamically
`JSON.stringify()` / `JSON.parse()`	LocalStorage read and write
`Array.filter()` / `Array.find()`	Filtering and searching tasks
`CSS Custom Properties`	Dynamic theme switching at runtime
`replaceWith()`	Inline edit mode swap