List Maker App 📝

A simple yet polished list-making application built as a training project with HTML, CSS, and Vanilla JavaScript.

✨ Features

• Create multiple lists with custom titles
• Add, edit, and delete items within each list
• Inline editing for list titles and items
• Persistent data with localStorage (lists remain after page refresh)
• Responsive design: mobile-first, one-column layout that adapts across devices
• Visual polish: curated color palette for list titles, styled buttons (primary, secondary, danger), and clean typography
• Focus flow improvements: after creating a list, the cursor jumps into the “Add item” field for smooth workflow

🚀 Demo

👉 Live Demo on GitHub Pages

---

🖼️ Screenshots

Empty State

Creating a List

Lists with Items

Inline Editing

Delete Action

Mobile View

---

🛠️ Tech Stack

• HTML5
• CSS3 (mobile-first responsive layout, flexbox, utility classes)
• JavaScript (ES6) (DOM manipulation, localStorage persistence)

---

📚 What I Learned

• Designing mobile-first layouts with progressive enhancements
• Managing UI state with vanilla JavaScript
• Creating consistent design systems (typography, spacing, button variants)
• Handling focus and keyboard events for better UX
• Organizing CSS with utility classes vs inline styles

---

🔮 Future Improvements (for later versions)

• Improve accessibility (ARIA roles, keyboard navigation)
• Add animations for smoother transitions
• Allow reordering of lists or items via drag-and-drop
• Dark mode support

---

Licence

MIT License

Copyright 2025 Zafer Yilmaz