About this set
Task lists that show when each task is due and how much it matters, without relying on colour. Priority, due date and overdue is a print catalogue project with six tasks. Each one carries a priority label that says High, Medium or Low in words beside a signal-bar icon with one, two or three filled bars, and a due date inside a time element with a machine-readable datetime. Overdue tasks get a red edge, a warning icon and the word Overdue before the date; the task due today gets a clock icon and the word Today. Ticking a task strikes it through and mutes its date, so a finished task stops looking urgent. Grouped by when it is due is a freelancer’s week split into Overdue, Today and Later this week, each heading with an icon and a task count, and compact rows with the time on a second line and the priority label on the right. Both lists are plain HTML and CSS with no JavaScript. The plain and Bootstrap versions style ticked rows with the sibling combinator; the Tailwind version uses group-has-checked.
What’s included
- Priority written as High, Medium or Low beside a one-to-three bar icon
- Due dates in time elements with datetime attributes
- Overdue rows say Overdue in words and add a warning icon
- Ticked tasks are struck through and their dates muted
- Second list grouped into Overdue, Today and Later this week, no JavaScript
Accessibility
Each task is a real checkbox with a label, and priority and due state are written in words, so nothing depends on colour: a screen reader hears Priority: High and Overdue Tue 9 Jun. Icons are hidden from assistive technology, group headings carry visually hidden task counts, checkboxes show a visible focus outline, and colour transitions stop under prefers-reduced-motion.
Customise it
Change --dd-accent, --dd-red and the --dd-high, --dd-med and --dd-low pairs on .dd for the label colours. Bootstrap uses the same variables on .badge and .form-check-input; in Tailwind swap the #1d4ed8, #b91c1c and label colour utilities.
