Student Planner

About This Project

This website was built as a multi-page front-end web application using HTML5, CSS, and JavaScript. It demonstrates layout design, consistent styling, and interactive features such as form handling, DOM manipulation, filtering, sorting, and local storage.

Key Features

  • Multi-page website (Home / Planner / About)
  • Add / delete / mark tasks as done
  • Search + filters + sorting
  • Progress bar with live statistics
  • Auto-save using LocalStorage
  • Theme toggle (light/dark)

Group Members

Replace with your real names + IDs (required in final report).

Name ID Role
Student 1 000000 HTML Structure
Student 2 000000 CSS Design
Student 3 000000 JavaScript
Go to Planner

How It Works (Beginner Explanation)

  1. The user types a task title and selects category/priority/due date.
  2. When the form is submitted, JavaScript validates the input.
  3. A new task element is created using DOM methods and added to the list.
  4. Tasks are saved in LocalStorage so they remain after refreshing the page.
  5. Filters and search update the displayed tasks without reloading the page.