1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# Job Application Tracker

## Problem
I apply to a lot of roles and lose track of which I have heard back from,
which need chasing, and which are dead. Right now this lives in my head and
in a WhatsApp message to myself.

## Who it is for
Me, and anybody job hunting who does not want a spreadsheet.

## The one thing it must do well
Tell me, at a glance, which applications need action today.

## Core features (this build)
- Add an application: company, role, date applied, link, status
- Statuses: applied, interviewing, offer, rejected
- Mark an application as needing follow-up if applied 14 or more days ago
  and still "applied"
- Filter by status, search by company
- Everything persists across a refresh

## Out of scope (deliberately)
- Accounts and login. One person, one browser.
- Email reminders. There is no backend.
- File uploads for CVs.

## User stories
- As a job hunter, I can add an application in under 15 seconds
- As a job hunter, I can see which applications are stale without reading dates
- As a job hunter, I can find a company by typing three letters

## How I will know it is done
- I can add 10 applications, close the browser, reopen, and see all 10
- The stale badge appears on exactly the right rows, tested at 13, 14 and 15 days
- Lighthouse Accessibility above 95
- It is usable on my phone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// Same check function as Day 14
function check(description, actual, expected) {
  const pass = JSON.stringify(actual) === JSON.stringify(expected);
  if (pass) {
    console.log(`PASS  ${description}`);
  } else {
    console.log(`FAIL  ${description}`);
    console.log(`      expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}

const DAY_MS = 24 * 60 * 60 * 1000;

// Whole days between two dates
function daysBetween(earlier, later) {
  return Math.floor((later.getTime() - earlier.getTime()) / DAY_MS);
}

// Stale: still "applied" and applied 14 or more days ago
function isStale(application, today) {
  if (application.status !== 'applied') return false;
  return daysBetween(new Date(application.applied), today) >= 14;
}

const today = new Date('2026-03-15');

check('13 days: not yet', isStale({ status: 'applied', applied: '2026-03-02' }, today), false);
check('14 days: stale', isStale({ status: 'applied', applied: '2026-03-01' }, today), true);
check('15 days: stale', isStale({ status: 'applied', applied: '2026-02-28' }, today), true);
check('old but interviewing', isStale({ status: 'interviewing', applied: '2026-01-10' }, today), false);

1
2
3
4
5
6
7

<form id="add">
  <input id="label" placeholder="What" value="">
  <input id="amount" type="number" placeholder="Amount (₦)">
  <button>Add</button>
</form>
<ul id="list"></ul>
<p id="total"></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// The total is STORED in state and updated by hand
const state = { expenses: [], total: 0 };

function render() {
  document.querySelector('#list').innerHTML = state.expenses
    .map((item, index) =>
      `<li>${item.label}: ₦${item.amount} <button data-index="${index}">Delete</button></li>`)
    .join('');
  document.querySelector('#total').textContent = `Total: ₦${state.total}`;
}

// Add: push the expense and add to the stored total
document.querySelector('#add').addEventListener('submit', (event) => {
  event.preventDefault();
  const amount = Number(document.querySelector('#amount').value);
  state.expenses.push({ label: document.querySelector('#label').value, amount });
  state.total += amount;
  render();
});

// Delete: remove the expense, and forget the total
document.querySelector('#list').addEventListener('click', (event) => {
  if (!event.target.dataset.index) return;
  state.expenses.splice(Number(event.target.dataset.index), 1);
  render();
});

1
2
3
4
5
6
7

<form id="add">
  <input id="label" placeholder="What" value="">
  <input id="amount" type="number" placeholder="Amount (₦)">
  <button>Add</button>
</form>
<ul id="list"></ul>
<p id="total"></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Only the records are stored; the total is not
const state = { expenses: [] };

function render() {
  document.querySelector('#list').innerHTML = state.expenses
    .map((item, index) =>
      `<li>${item.label}: ₦${item.amount} <button data-index="${index}">Delete</button></li>`)
    .join('');

  // Derived: worked out from the current list on every render
  const total = state.expenses.reduce((sum, item) => sum + item.amount, 0);
  document.querySelector('#total').textContent = `Total: ₦${total}`;
}

document.querySelector('#add').addEventListener('submit', (event) => {
  event.preventDefault();
  const amount = Number(document.querySelector('#amount').value);
  state.expenses.push({ label: document.querySelector('#label').value, amount });
  render();
});

document.querySelector('#list').addEventListener('click', (event) => {
  if (!event.target.dataset.index) return;
  state.expenses.splice(Number(event.target.dataset.index), 1);
  render();
});

1
2

<p id="status"></p>
<ul id="list"></ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const KEY = 'tracker.expenses';

// Load saved expenses; start empty if nothing is saved or it is not valid JSON
function load() {
  try {
    const saved = JSON.parse(localStorage.getItem(KEY));
    if (!Array.isArray(saved)) return [];
    return saved;
  } catch (error) {
    console.warn('Saved data was unreadable, starting fresh:', error.name);
    return [];
  }
}

const expenses = load();
document.querySelector('#status').textContent = `${expenses.length} saved expenses`;
document.querySelector('#list').innerHTML =
  expenses.map((item) => `<li>${item.label}: ₦${item.amount}</li>`).join('');

1

<div id="chart"></div>

1
2
3
4

#chart { font-family: sans-serif; }
.row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.name { width: 70px; }
.bar { background: #3b8eea; height: 18px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const spending = [
  { category: 'Food', amount: 42000 },
  { category: 'Transport', amount: 18000 },
  { category: 'Data', amount: 9000 },
];

// The biggest amount becomes a full-width bar
const biggest = Math.max(...spending.map((item) => item.amount));

document.querySelector('#chart').innerHTML = spending
  .map((item) => {
    const percent = Math.round((item.amount / biggest) * 100);
    return `<div class="row">
      <span class="name">${item.category}</span>
      <div class="bar" style="width: ${percent}%"></div>
      <span>₦${item.amount}</span>
    </div>`;
  })
  .join('');