feat: add category selection (Low/Medium/High) to tasks

[Copilot]

Summary

Adds predefined category support to tasks, allowing users to classify each task as Low, Medium, or High at creation time. Each category is color-coded for quick visual identification.

Changes

Backend (backend/controllers/tasksController.js)

• Added VALID_CATEGORIES constant (['Low', 'Medium', 'High'])
• createTask: reads category from request body (defaults to 'Medium'), validates it, and persists it in the task object
• updateTask: validates the new category value before applying it, returning a 400 error for invalid values

Frontend (frontend/index.html)

• Added a <select id="categorySelect"> dropdown with options Low / Medium (default) / High to the task creation form

Frontend (frontend/script.js)

• Added CATEGORIES and DEFAULT_CATEGORY constants to avoid magic strings
• addTaskToDOM: renders a color-coded <span class="category-badge category-{low|medium|high}"> badge next to each task title using safe DOM API (no innerHTML for user data)
• Form submit handler: sends the selected category in the POST body and resets the dropdown to the default after submission

Frontend (frontend/style.css)

• Styled #categorySelect to match the existing input field appearance
• Added .category-badge, .category-low, .category-medium, .category-high classes with distinct colors:
  • Low → green
  • Medium → orange
  • High → red
• Added dark-theme overrides for all three badge variants

[Copilot]

Pull request overview

Adds first-class task category support (Low/Medium/High) across the Node/Express API and the Vanilla JS frontend so users can classify tasks at creation time and see a color-coded badge in the list.

Changes:

• Backend: validate and persist category on create/update.
• Frontend: add category <select> to the task form and send category in POST requests.
• UI: render category badges and add corresponding CSS (including dark theme overrides).

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
backend/controllers/tasksController.js	Adds category validation and persistence in create/update endpoints.
frontend/index.html	Adds category dropdown to the task creation form.
frontend/script.js	Sends selected category and renders category badges using DOM APIs.
frontend/style.css	Styles the category dropdown and adds category badge styles for light/dark themes.

[Copilot]

CATEGORIES is declared but never used. This adds dead code and can cause lint/build failures in stricter setups; either remove it or use it to generate/validate category values in the UI (e.g., populate the <select> or validate categorySelect.value before sending).

[Copilot]

The new category badge is a <span> inside <li>, but the existing global rule li span { flex: 1; } will also apply to .category-badge, causing it to grow/stretch and potentially break the layout. Consider overriding in .category-badge (e.g., ensure it does not flex-grow) or tightening the li span selector to target only the title span.

Suggested change

	margin: 0 0.5em;
	margin: 0 0.5em;
	flex: 0 0 auto;

[Copilot]

The new <select id="categorySelect"> has no accessible name (no <label> and no aria-label/aria-labelledby). Add an explicit label or an ARIA label so screen readers can announce what this control does.