Day 25: Banish Boredom: Day 2

Lesson 3: Banish Boredom: 7

Take a look at our JavaScript code for a second, you will notice we have code that manages data and code that manages the user interface spread around all over the place.

In an ideal world we would separate them as much as possible to make it easy for us (and other developers) to understand the code.

We have a big block of code that renders our list. When we make changes to the list in LocalStorage, we need to update the displayed list. So to make our life easy we should break out that block of code, in order to render the list into its own function and then call it whenever local storage changes.

So, create a new function called renderList and put all the code from window.onload inside it to do with fetching and rendering savedActivities.

1const renderList = () => {
2  const savedActivitiesString = localStorage.getItem("activities");
3
4  const savedActivities = JSON.parse(savedActivitiesString) ?? [];
5
6  savedActivities.forEach((savedActivity) => {
7    const newCard = placeholderCard.cloneNode(true);
8    console.log(newCard);
9    newCard.id = savedActivity.key;
10
11    const newCardActivity = newCard.querySelector(".activity");
12    newCardActivity.innerText = savedActivity.activity;
13
14    const newCardType = newCard.querySelector(".type");
15    newCardType.innerText = savedActivity.type;
16
17    const newCardParticipants = newCard.querySelector(".participants");
18    newCardParticipants.innerText = savedActivity.participants;
19
20    const newCardPrice = newCard.querySelector(".price");
21    newCardPrice.innerText = savedActivity.price;
22
23    if (savedActivity.link) {
24      const newCardLink = newCard.querySelector(".link");
25      const newCardLinkContainer = newCard.querySelector(".link-container");
26
27      newCardLink.href = savedActivity.link;
28      newCardLinkContainer.hidden = false;
29    }
30
31    const newCardDeleteButton = newCard.querySelector(".delete-button");
32    newCardDeleteButton.onclick = () => {
33      deleteActivity(savedActivity.key);
34    };
35
36    list.appendChild(newCard);
37  });
38};

Then call it in the onload event handler:

1window.onload = () => {
2  renderList();
3  fetchNewActivity();
4};

Next in your deleteActivity function delete these two lines:

1const deletedActivity = document.getElementById(key);
2deletedActivity.remove();

and replace with:

1renderList();

Now finally in the onLikeClicked function add renderList() to the last line so the whole function looks like:

1const onLikeClicked = () => {
2  const savedActivitiesString = localStorage.getItem("activities");
3
4  const savedActivities = JSON.parse(savedActivitiesString) ?? [];
5
6  savedActivities.push(currentActivity);
7
8  localStorage.setItem("activities", JSON.stringify(savedActivities));
9
10  fetchNewActivity();
11  renderList();
12};

Go add some activities and see what you think, there's a bug. Can you think why?