Bootstrap 5 Todo List with Tabs and Archive
A clean daily planner with Today and Tomorrow groups, time ranges, durations and tick-to-archive tasks. Add new tasks and switch between the Tasks and Archive tabs.
<section class="wdw-stage">
<div class="container" style="max-width:640px">
<div class="wdw-card border-0 overflow-hidden" id="planner">
<div class="d-flex align-items-center justify-content-between gap-3 px-4 pt-4 pb-3">
<div>
<span class="wdw-eyebrow">Planner · <span id="today-date">Tuesday, 14 May</span></span>
<h2 class="wdw-heading h3 mb-0 mt-1">My day</h2>
</div>
<ul class="nav nav-pills bg-body-tertiary rounded-pill p-1 flex-nowrap" role="tablist" aria-label="Planner views">
<li class="nav-item" role="presentation"><button class="nav-link rounded-pill active" data-bs-toggle="pill" data-bs-target="#pane-tasks" id="tab-tasks" type="button" role="tab" aria-controls="pane-tasks" aria-selected="true">Tasks</button></li>
<li class="nav-item" role="presentation"><button class="nav-link rounded-pill" data-bs-toggle="pill" data-bs-target="#pane-archive" id="tab-archive" type="button" role="tab" aria-controls="pane-archive" aria-selected="false">Archive <span class="badge rounded-pill text-bg-primary ms-1" id="archive-count">0</span></button></li>
</ul>
</div>
<div class="px-4 pb-3">
<div class="d-flex justify-content-between small mb-2"><span class="text-body-secondary fw-semibold" id="progress-label">0 of 5 done</span><span class="text-body-secondary" id="progress-pct">0%</span></div>
<div class="progress" style="height:.5rem" role="progressbar" aria-label="Tasks completed today" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" id="progress-bar" style="width:0"></div></div>
</div>
<div class="tab-content px-4 pb-4">
<div class="tab-pane fade show active" id="pane-tasks" role="tabpanel" aria-labelledby="tab-tasks" tabindex="0">
<div class="d-flex justify-content-between align-items-baseline mb-2">
<h3 class="h5 fw-bold mb-0 text-body-emphasis mt-1">Today</h3>
<span class="small text-body-secondary" data-total="today">4h 15min planned</span>
</div>
<ul class="list-unstyled mb-0" id="today-list">
<li class="todo-item"><input class="form-check-input" type="checkbox" id="t1" aria-label="Take kids to school"><label for="t1" class="todo-title">Take kids to school</label><span class="todo-time"><i class="bi bi-calendar-event"></i> 8:00–8:30 AM</span><span class="todo-dur">30 min</span></li>
<li class="todo-item"><input class="form-check-input" type="checkbox" id="t2" aria-label="Process email"><label for="t2" class="todo-title">Process email</label><span class="todo-time"><i class="bi bi-pin-angle-fill"></i> 8:00–9:30 AM</span><span class="todo-dur">1 h</span></li>
<li class="todo-item"><input class="form-check-input" type="checkbox" id="t3" aria-label="Daily stand-up meeting"><label for="t3" class="todo-title">Daily stand-up meeting</label><span class="todo-time"><i class="bi bi-calendar-event"></i> 9:00–10:00 AM</span><span class="todo-dur">30 min</span></li>
<li class="todo-item"><input class="form-check-input" type="checkbox" id="t4" aria-label="Create new templates"><label for="t4" class="todo-title">Create new templates</label><span class="todo-time"><i class="bi bi-pin-angle-fill"></i> 10:00–11:45 AM</span><span class="todo-dur">1 h 45 min</span></li>
<li class="todo-item"><input class="form-check-input" type="checkbox" id="t5" aria-label="Lunch with Anna"><label for="t5" class="todo-title">Lunch with Anna</label><span class="todo-time"><i class="bi bi-calendar-event"></i> 12:00–12:30 PM</span><span class="todo-dur">30 min</span></li>
</ul>
<form class="d-flex gap-2 mt-3" id="add-form">
<label class="visually-hidden" for="new-task">New task</label>
<input class="form-control" id="new-task" type="text" placeholder="Add a task for today" autocomplete="off">
<button class="btn btn-primary rounded-pill px-4" type="submit"><i class="bi bi-plus-lg"></i> Add</button>
</form>
<div class="d-flex justify-content-between align-items-baseline mt-4 mb-2 pt-4 border-top">
<h3 class="h6 fw-bold mb-0 text-body-emphasis">Tomorrow</h3>
<span class="small text-body-secondary">30min planned</span>
</div>
<ul class="list-unstyled mb-0">
<li class="todo-item"><input class="form-check-input" type="checkbox" id="t6" aria-label="Breakfast with the marketing team"><label for="t6" class="todo-title">Breakfast with the marketing team</label><span class="todo-time"><i class="bi bi-calendar-event"></i> 8:00–8:30 AM</span><span class="todo-dur">30 min</span></li>
</ul>
</div>
<div class="tab-pane fade" id="pane-archive" role="tabpanel" aria-labelledby="tab-archive" tabindex="0">
<h3 class="h6 fw-bold text-body-emphasis mb-2">Completed</h3>
<ul class="list-unstyled mb-0" id="archive-list" aria-live="polite">
<li class="small text-body-secondary py-4 text-center" id="archive-empty">Nothing archived yet. Tick a task and it lands here.</li>
</ul>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast align-items-center text-bg-dark border-0" id="undo-toast" role="status" aria-live="polite" aria-atomic="true" data-bs-delay="4000">
<div class="d-flex align-items-center">
<div class="toast-body">Task moved to Archive.</div>
<button type="button" class="btn btn-sm btn-link text-white fw-bold me-2 ms-auto" id="undo-btn">Undo</button>
<button type="button" class="btn-close btn-close-white me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</section>
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css");
/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root,
[data-bs-theme="light"] {
--wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-body-font-family: var(--wdw-font);
--bs-primary: #4f46e5;
--bs-primary-rgb: 79, 70, 229;
--bs-primary-text-emphasis: #3730a3;
--bs-primary-bg-subtle: #eef2ff;
--bs-primary-border-subtle: #c7d2fe;
--bs-link-color: #4f46e5;
--bs-link-color-rgb: 79, 70, 229;
--bs-link-hover-color: #4338ca;
--bs-link-hover-color-rgb: 67, 56, 202;
--bs-focus-ring-color: rgba(79, 70, 229, 0.25);
--bs-border-radius: 0.75rem;
--bs-border-radius-lg: 1rem;
--bs-border-radius-xl: 1.25rem;
--wdw-radius-card: 1.25rem;
--wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
--wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
--wdw-stage: #f5f6fb;
}
[data-bs-theme="dark"] {
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
--bs-primary-text-emphasis: #c7d2fe;
--bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
--bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
--bs-link-color: #a5b4fc;
--bs-link-color-rgb: 165, 180, 252;
--bs-link-hover-color: #c7d2fe;
--bs-link-hover-color-rgb: 199, 210, 254;
--bs-focus-ring-color: rgba(129, 140, 248, 0.35);
--wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
--wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
--wdw-stage: #0f1117;
}
body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }
/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
--bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
--bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
--bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
--bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }
/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
/* Component */
.todo-item{display:grid;grid-template-columns:auto 1fr auto;column-gap:.875rem;align-items:center;padding:.75rem .5rem;border-radius:.75rem;transition:background .15s}
.todo-item:hover{background:var(--bs-tertiary-bg)}
.todo-item .form-check-input{width:1.25rem;height:1.25rem;margin:0;border-radius:50%;grid-row:1 / span 2;cursor:pointer}
.todo-title{font-weight:600;color:var(--bs-emphasis-color);cursor:pointer}
.todo-time{grid-column:2;font-size:.8125rem;color:var(--bs-secondary-color)}
.todo-time .bi{color:var(--bs-primary);margin-right:.25rem}
.todo-dur{grid-column:3;grid-row:1 / span 2;font-size:.8125rem;font-weight:600;color:var(--bs-secondary-color);background:var(--bs-tertiary-bg);padding:.25rem .625rem;border-radius:50rem;white-space:nowrap}
.todo-item:hover .todo-dur{background:var(--bs-body-bg)}
.todo-item.done .todo-title{text-decoration:line-through;color:var(--bs-secondary-color);font-weight:500}
#planner .nav-link{min-height:36px;padding:.25rem 1rem;font-weight:600;font-size:.875rem}
#planner .nav-link:not(.active){color:var(--bs-secondary-color)}
@media (max-width:480px){.todo-dur{display:none}}
#planner .tab-pane:focus-visible{outline:2px solid var(--bs-primary);outline-offset:4px;border-radius:.5rem}
.todo-item{transition:background .15s,opacity .4s,transform .4s}
.todo-item.leaving{opacity:0;transform:translateX(1rem)}
.todo-item.done .todo-dur{opacity:.6}
#undo-toast .btn-link{min-height:36px;text-decoration:none}
@media (max-width:480px){.todo-dur{display:none}}
#planner .nav-link{white-space:nowrap}@media (max-width:480px){#planner .wdw-eyebrow{font-size:.68rem}}
(function () {
function fmt(min) {
var h = Math.floor(min / 60), m = min % 60;
return (h ? h + 'h ' : '') + (m ? m + 'min' : '') || '0min';
}
function minutes(txt) {
var h = /(\d+)\s*h/.exec(txt), m = /(\d+)\s*min/.exec(txt);
return (h ? +h[1] * 60 : 0) + (m ? +m[1] : 0);
}
function initDate() {
var el = document.getElementById('today-date');
if (!el) return;
el.textContent = new Date().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' });
}
function initTodo() {
var root = document.getElementById('planner');
if (!root) return;
var today = document.getElementById('today-list');
var archive = document.getElementById('archive-list');
var empty = document.getElementById('archive-empty');
var total = root.querySelector('[data-total="today"]');
var count = document.getElementById('archive-count');
var bar = document.getElementById('progress-bar');
var barWrap = bar.parentNode;
var label = document.getElementById('progress-label');
var pct = document.getElementById('progress-pct');
var toastEl = document.getElementById('undo-toast');
var toast = bootstrap.Toast.getOrCreateInstance(toastEl);
var n = 100, doneCount = 0, last = null;
function updateTotal() {
var sum = 0, open = today.querySelectorAll('.todo-item:not(.done)').length;
today.querySelectorAll('.todo-item:not(.done) .todo-dur').forEach(function (d) { sum += minutes(d.textContent); });
total.textContent = fmt(sum) + ' planned';
var arch = archive.querySelectorAll('.todo-item').length;
var done = today.querySelectorAll('.todo-item.done').length + arch;
var all = open + done;
var p = all ? Math.round(done / all * 100) : 0;
bar.style.width = p + '%';
barWrap.setAttribute('aria-valuenow', p);
label.textContent = done + ' of ' + all + ' done';
pct.textContent = p + '%';
count.textContent = archive.querySelectorAll('.todo-item').length;
}
function toArchive(item) {
var li = document.createElement('li');
li.className = 'todo-item done';
li.style.gridTemplateColumns = 'auto 1fr auto';
li.innerHTML = '<i class="bi bi-check-circle-fill text-success fs-5" aria-hidden="true"></i><span class="todo-title"></span><span class="todo-dur"></span>';
li.querySelector('.todo-title').textContent = item.querySelector('.todo-title').textContent;
li.querySelector('.todo-dur').textContent = item.querySelector('.todo-dur').textContent;
li.dataset.src = item.id || '';
archive.appendChild(li);
empty.hidden = true;
return li;
}
today.addEventListener('change', function (e) {
var cb = e.target.closest('input[type="checkbox"]');
if (!cb) return;
var item = cb.closest('.todo-item');
item.classList.toggle('done', cb.checked);
if (cb.checked) {
setTimeout(function () {
if (!cb.checked) return;
item.classList.add('leaving');
setTimeout(function () {
var next = item.nextElementSibling;
var arch = toArchive(item);
item.parentNode.removeChild(item);
last = { item: item, cb: cb, arch: arch, next: next };
doneCount = 0;
updateTotal();
toast.show();
}, 400);
}, 600);
}
updateTotal();
});
document.getElementById('undo-btn').addEventListener('click', function () {
if (!last) return;
last.arch.remove();
last.cb.checked = false;
last.item.classList.remove('done', 'leaving');
today.insertBefore(last.item, last.next && last.next.parentNode === today ? last.next : null);
empty.hidden = archive.querySelectorAll('.todo-item').length > 0;
last = null;
toast.hide();
updateTotal();
});
root.querySelector('#add-form').addEventListener('submit', function (e) {
e.preventDefault();
var input = document.getElementById('new-task');
var text = input.value.trim();
if (!text) return;
var id = 't' + (++n);
var li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = '<input class="form-check-input" type="checkbox" id="' + id + '"><label for="' + id + '" class="todo-title"></label><span class="todo-time"><i class="bi bi-clock"></i> Anytime</span><span class="todo-dur">30 min</span>';
li.querySelector('label').textContent = text;
li.querySelector('input').setAttribute('aria-label', text);
today.appendChild(li);
input.value = '';
updateTotal();
});
updateTotal();
}
initDate();
initTodo();
})();
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
