Skip to content

README.md

Latest commit

 

History

History
118 lines (87 loc) · 4.63 KB

README.md

File metadata and controls

118 lines (87 loc) · 4.63 KB
Raw

Todo App

My first JavaScript project built completely from scratch — no tutorials used.

This project took around 5 days of work (3–4 hours daily) and involved a lot of debugging, experimentation, and learning how real applications manage data and UI.

Since this is my first complete JavaScript project, I felt it deserved its own repository.

This is Version 3.5 of the project.

Live Preview

https://panwarcodes.github.io/Todo-App

Preview Image

Change Log

Version 3.5
  • Mobile responsive UI added
  • Mobile responsiveness improvements
Version 3
  • Changed tasks from simple strings into objects with status keys
  • Added true/false tracking using an isCompleted boolean property
  • Added line-through text and opacity styling for finished tasks
  • Created a clickable emoji button to toggle completion states
  • Replaced standard <input> boxes with multi-line <textarea> elements
  • Used .scrollHeight to auto-resize text boxes based on content
  • Synchronized the new object status back into localStorage
  • Reset the textarea heights back to original during submission
Version 2
  • Switched from multiple random keys to a single localStorage array
  • Used JSON.stringify() and JSON.parse() to handle the array data
  • Preserved the precise order of tasks using array index positions
  • Moved repeated HTML layout logic into a single uiInstructor() function
  • Fixed duplicate item bugs using taskStorage.replaceChildren()
  • Emptied active memory lists safely using taskList.length = 0
  • Deleted specific tasks from the array using .splice()
  • Reran uiInstructor() to refresh the screen instantly after edits
Version 1
  • Built a basic CRUD app using vanilla JavaScript
  • Saved individual tasks into separate localStorage text strings
  • Generated unique task keys using a custom randomNum() function
  • Used form submit events and window.alert() to block empty tasks
  • Used a standard for loop to load items from localStorage on refresh
  • Created new layout boxes dynamically using document.createElement()
  • Removed text elements and appended temporary inputs to edit tasks
  • Linked delete buttons to storage keys using data-index attributes

Features

  • Add tasks: Create new items instantly on screen
  • Edit tasks: Change text inline using dynamic inputs
  • Delete tasks: Remove tasks permanently from storage
  • Status toggling: Switch completion states with emoji buttons
  • LocalStorage backup: Save data directly in browser memory
  • Auto-loading: Pull saved tasks automatically on reload
  • Real-time UI: Update screen instantly without reloads
  • Form validation: Block empty inputs via window.alert()
  • Multi-line edit: Support long notes using <textarea>
  • Auto-resizing boxes: Adjust input heights via .scrollHeight
  • Session persistence: Keep completion styling intact always

What I Learned

  • DOM manipulation: Modify HTML nodes using JavaScript
  • Event listeners: Handle user submit and click actions
  • Form handling: Process values and reset input text
  • Dynamic creation: Build layouts using document.createElement()
  • LocalStorage & JSON: Convert arrays using JSON.stringify() / parse()
  • Data structures: Group related items using objects
  • Array methods: Delete specific tasks via .splice()
  • State management: Track values like isCompleted booleans
  • UI re-rendering: Clear old layouts using .replaceChildren()
  • Data-driven setups: Separate background data from layout
  • Code refactoring: Group matching logic inside uiInstructor()
  • JavaScript debugging: Trace errors using console.log()

Challenges Faced

  • Duplicate layouts: Prevented double rendering by clearing HTML
  • Data synchronization: Linked localStorage directly to UI updates
  • Dynamic listeners: Attached events safely to new buttons
  • Task ordering: Maintained exact sequences using array indexes
  • Element modification: Swapped text nodes with input boxes
  • Reusable systems: Built one central function for rendering
  • State tracking: Matched line-through styles with true/false states
  • Text overflows: Stopped layout breaking using auto-growing boxes

Future Improvements

  • Fix task order after page refresh
  • Task completion / checkbox support
  • Mobile responsiveness improvements

More projects coming soon in my playground repository.