Day 24: Banish Boredom

Lesson 4: Banish Boredom: 4

As part of the page loading we need to load any saved activities from local storage.

Let's expand our window.onload function.

Firstly delete the example cards from your HTML so that it looks like this in that part of the file:

1<h2>Saved Activities</h2>
2<div id="list">
3</div>
4<div class="card" id="placeholder-card">
5  <h2 class="activity">Play basketball with a group of friends</h3>
6  <div class="flex-row">
7    <div class="item">Type: <span class="type">Social</span></div>
8    <div class="item">People: <span class="participants">5</span></div>
9    <div class="item">Price: <span class="price">0</span></div>
10    <div class="item link-container" hidden><a class="link" href="">Link</a></div>
11  </div>
12  <button class="delete-button">Delete</button>
13</div>

And add this to the top of your JavaScript:

1const list = document.getElementById("list");
2const placeholderCard = document.getElementById("primary-card");

Now replace window.onload = onBoredClicked; with

1window.onload = () => {
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      console.log(newCardLinkContainer);
27      newCardLink.href = savedActivity.link;
28      newCardLinkContainer.hidden = false;
29    }
30
31    const newCardDeleteButton = newCard.querySelector(".delete-button");
32    newCardDeleteButton.onclick = () => {
33      console.log("delete: ", savedActivity.key);
34    };
35
36    list.appendChild(newCard);
37  });
38
39  onBoredClicked();
40};

Ok, there's a lot in here. Let's break it down.

We get the activities from LocalStorage and turn them in to an array.

We then loop over each activity, clone the placeholder and then replace the details in the card with the details from our activity.

The new bit here is the line newCard.querySelector(".activity");. Sadly we can't use .getElementById() on a DOM node so instead we just find the right node using the class we want.

We set the id of the card to the key of the activity so we can reference it later.

If the activity has a link, we add that and then make the link container visible.

Then we add a delete button with an onclick handler. We'll flesh this out more later.

Finally we append the new card to the DOM and, since we are still in the onload handler we grab a fresh activity with onBoredClicked().

Take some time to make sure you understand this code, it would be easy to just take my explanation at face value. Don't do that, spend a few minutes here and make sure you "get it".