Webbo3 Level 2 · JavaScript Development · Day 5 of 20

Project 1: Make It Work

Your first solo build. A problem statement, not a tutorial, and a Friday where you defend what you wrote.

There is no tutorial today. You are given a problem and a standard, and the gap between them is the work.

This is deliberate. Copying a tutorial teaches you to copy tutorials. The first time you face a blank file with nobody to copy is the first time you find out whether you can actually do this. Better that it happens here, on a Friday, with your instructor in the room.

Before the brief, two ideas the whole project stands on. Understand these and the ten requirements become ten small jobs instead of one big fog.

1. One Array of Truth, One render()

Definition

Rendering from data means your tasks live in one JavaScript array, and one function, render(), draws the page from that array. Every action (add, complete, delete) changes the array and then calls render() again. You never read the page to find out what tasks exist.

Real-Life Example

A restaurant keeps its orders in the order book, and the kitchen screen shows what the book says. When an order changes, the waiter changes the book, and the screen redraws from it. Nobody walks over to the screen and squints at it to work out what the orders are.

The array is the order book. The page is the screen. You saw this on Day 4 in the final scenario; today the whole project is built this way.

How It Works

1. State: the array of tasks, plus the current filter and search text.
2. Derived data: a function such as visibleTasks() that works out which tasks should be on screen right now. It never touches the page.
3. Render: render() draws exactly what visibleTasks() returns.
4. Actions: every click or keystroke changes the state, then calls render.

Example 1: Deciding What Is Visible

toLowerCase() turns text into small letters, so a search for "GitHub" still matches "github". includes() asks whether one piece of text appears inside another.

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

// The state: the tasks, the current filter and the search text
const tasks = [
  { id: 1, text: 'Finish Day 4 exercise', done: true },
  { id: 2, text: 'Push project to GitHub', done: false },
  { id: 3, text: 'Read the Day 5 brief', done: false }
];
let filter = 'all';   // 'all', 'active' or 'completed'
let search = '';

// Does a task pass the current filter?
function matchesFilter(task) {
  if (filter === 'active') return !task.done;
  if (filter === 'completed') return task.done;
  return true;
}

// Does a task contain the search text (ignoring capitals)?
function matchesSearch(task) {
  return task.text.toLowerCase().includes(search.toLowerCase());
}

// Which tasks should be on screen right now?
function visibleTasks() {
  return tasks.filter(matchesFilter).filter(matchesSearch);
}

// Try it with different filters and searches
console.log('all:', visibleTasks().length);

filter = 'active';
console.log('active:', visibleTasks().map((task) => task.text));

search = 'github';
console.log('active + "github":', visibleTasks().map((task) => task.text));

➜ webbo3 node app.js
all: 3
active: [ 'Push project to GitHub', 'Read the Day 5 brief' ]
active + "github": [ 'Push project to GitHub' ]

visibleTasks() answers one question: given the filter and search right now, which tasks should be visible? Separating "what is true" from "what is drawn" is the most useful structural idea in this project, and it is exactly what React will do for you in Level 3.

Example 2: The Render Loop on a Page

1
2

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

1

.done { text-decoration: line-through; color: #888; }

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

// State: the one array of truth
const tasks = [
  { id: 1, text: 'Read the brief', done: false },
  { id: 2, text: 'Build the render loop', done: false }
];

const list = document.querySelector('#list');
const left = document.querySelector('#left');

// Draw the page from the array, every time
function render() {
  list.innerHTML = tasks
    .map((task) => {
      const cls = task.done ? 'done' : '';
      return `<li class="${cls}" data-id="${task.id}">${task.text} <button>Toggle</button></li>`;
    })
    .join('');

  // A derived value: never stored, always worked out
  const remaining = tasks.filter((task) => !task.done).length;
  left.textContent = `${remaining} left`;
}

// One listener: change the ARRAY, then redraw
list.addEventListener('click', (event) => {
  if (!event.target.closest('button')) return;
  const id = Number(event.target.closest('li').dataset.id);
  const task = tasks.find((item) => item.id === id);
  task.done = !task.done;
  render();
});

render();

2. Every Task Needs an id

Definition

An id is a number (or text) that belongs to one task and never changes. You stamp it onto the task's element with a data-id attribute, and when that element is clicked you read it back with dataset.id to find the right task in the array.

Real-Life Example

A cloakroom ticket. The attendant does not remember that your coat is "the third one from the left", because coats come and go and the positions change. Your ticket number stays the same, so it always finds your coat.

Common Mistake: dataset Always Gives You Text

Everything read from dataset is a string. Your ids in the array are numbers, and === checks the type too (Day 1). So without a conversion, the task is never found.

1
2
3

<ul id="list">
  <li data-id="2">Push project to GitHub <button>Find me</button></li>
</ul>

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

// The array, with ids as numbers
const tasks = [
  { id: 1, text: 'Finish Day 4 exercise' },
  { id: 2, text: 'Push project to GitHub' }
];

document.querySelector('#list').addEventListener('click', (event) => {
  // Read the id back from the clicked row
  const raw = event.target.closest('li').dataset.id;

  // Without converting: '2' === 2 is false
  console.log('without Number():', tasks.find((task) => task.id === raw));

  // With Number(): 2 === 2 is true
  console.log('with Number():', tasks.find((task) => task.id === Number(raw)));
});

without Number(): undefined
with Number(): {id: 2, text: Push project to GitHub}

That is Day 1 coming back: "2" and 2 are different types. It will cost somebody in your cohort an hour today. Always wrap it: Number(element.dataset.id).

3. The Brief

That is the entire brief, and it is meant to feel slightly too open. Decide the rest yourself: what a task looks like, what happens to a completed one, what the empty state says. Those decisions are part of what is assessed.

What It Must Do

4. What to Hand In

• A public GitHub repository with real commit messages. Not one commit called "final": at least six, each describing what changed.
• A README with: what it does, a screenshot, how to run it, and one honest paragraph on what you would improve with more time.
• The folder structured the way you learned last month: index.html at the root, css/ and js/.
• A deployed link if you can manage it. GitHub Pages is free and takes ten minutes. Not required today, required from Day 18.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Task Tracker

A browser-only task list: add, complete, edit, delete, filter and search tasks.

![Screenshot](screenshot.png)

## How to run it

Open index.html in any browser. Nothing to install.

## What I would improve

Tasks disappear on refresh because they only live in memory.
With more time I would save them in the browser (Day 11).

GitHub reads this file and shows it on the front page of your repository.

5. The Friday Evaluation

You do not submit and go home. You demonstrate, and you answer questions. Fifteen minutes each.

The Kind of Question You Will Be Asked

• Show me where the task actually gets deleted. Why does that work for a row you added thirty seconds ago?
• You used === everywhere. What would break if you swapped them for ==?
• Your search runs on every keystroke. What happens with two thousand tasks?
• If I typed <b>hello</b> as a task, what appears on screen, and why?
• Walk me through what happens, in order, between my click and the row disappearing.

The Marking Rubric

Questions You Will Have Today

Next week, Day 6: modern JavaScript and modules. From here your code starts talking to the outside world: modules, asynchronous code, HTTP and real APIs, ending in your first group build.