Client Scripting

Objective

Document Object Model (DOM) definition, access, traversal, and update.
Asynchronous functions definition and usage.
Event handler/listener definition and usage.
Event dispatch mechanism: capturing, targeting, and bubbling.
Fetch API usage.

1 Task Tracker

Develop a web application that manages a list of tasks. The user can add, complete, and delete tasks, while keeping track of the list of tasks they have created. An interactive demonstration is shown in Figure 1.

Figure 1: Task tracker application

Use an array to keep track of the list of tasks and render them whenever the list is updated. The rendered list of tasks should always reflect the underlying list of tasks.
script.js
```
document.addEventListener("DOMContentLoaded", function () {
  let tasks = [];
 
  function renderTask(task) {}
 
  function renderTasks() {}
});
```

Define event listeners to handle adding, completing, and deleting a task. Tasks should have unique non-empty titles, that is, a duplicate task or a task lacking a title should not be added.

script.js

document.addEventListener("DOMContentLoaded", function () {
  function addTask() {}
 
  function clearTasks() {}
 
  function completeTask(title) {}
 
  function deleteTask(title) {}
});

Serialize the lists of tasks and persist it using local storage so that it can be reloaded between sessions.

Complete the 4 Web Storage guide to learn more about web storage.

2 Country Facts

Complete the 5 Asynchronicity guide to learn more about asynchronous programming.

Develop a web application that explores facts about countries. The user can navigate through regions and subregions to select a given country and display its corresponding facts. An interactive demonstration is shown in Figure 2.

Figure 2: Country facts application

Use the Rest Countries API (opens in a new tab) to fetch all countries and their facts data.

script.js

document.addEventListener("DOMContentLoaded", async function () {
  const res = await fetch("https://restcountries.com/v3.1/all");
  let data = [];
  if (res.ok) {
    data = await res.json();
  }
});

Extract the regions and use them to populate the corresponding drop-down list.

Use an object (POJO) to keep track of the hierarchy of regions, subregions, countries, and facts:

const hierarchy = {
  Africa: {
    "Eastern Africa": {
      "British Indian Ocean Territory": {},
      Burundi: {},
    },
  },
  Asia: {},
};

Note that some countries do not have a subregion defined.

script.js

document.addEventListener("DOMContentLoaded", async function () {
  const hierarchy = {};
  data.forEach((country) => {});
});

Define event listeners to handle user selection updates:

When changing the region, the list of subregions should be updated.
When changing the subregion, the list of countries should be updated.
When changing the country, the table of facts should be updated.

script.js

document.addEventListener("DOMContentLoaded", async function () {
  function updateRegions() {}
 
  function updateSubregions(region) {}
 
  function updateCountries(region, subregion) {}
 
  function updateFacts(region, subregion, country) {}
 
  const regions = ;
  regions.addEventListener("change", function () {});
 
  const subregions = ;
  subregions.addEventListener("change", function () {});
 
  const countries = ;
  countries.addEventListener("change", function () {});
});

3 Photo Gallery

Develop a web application that fetches several random photos on demand and displays them in a responsive gallery. An interactive demonstration is shown in Figure 3.

Figure 3: Photo gallery application

Add a button that fetches random photos from the Lorem Picsum API (opens in a new tab) and adds them to the document.
Use a RAM layout pattern to render the photos in a grid.
Define event listeners to allow the user to remove a photo by clicking on it.

Complete the 2 Fifteen Puzzle tutorial to learn more about client scripting.

Resources

6 Classes + Testing 8 RESTfulness