From bb61a3e034f8175eeb2915528bade6a34b54f2db Mon Sep 17 00:00:00 2001
From: Gabriela Banaag <40579768+gbanaag@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:39:13 -0400
Subject: [PATCH 1/2] adjusted indentation on code blocks
---
.../build-a-cafe-finder-with-javascript.mdx | 56 +++++++++----------
1 file changed, 28 insertions(+), 28 deletions(-)
diff --git a/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx b/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx
index d3e73fbf..566ccfa8 100644
--- a/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx
+++ b/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx
@@ -187,8 +187,8 @@ We'll start by creating a container that takes the first saved cafe in our cafe
```jsx
function displayCards(cafes) {
- const container = document.querySelector('.cards');
- container.innerHTML = '';
+ const container = document.querySelector('.cards');
+ container.innerHTML = '';
```
We'll then make a for loop that iterates through the cafe list to…
@@ -198,15 +198,15 @@ We'll then make a for loop that iterates through the cafe list to…
- Adjust the card's **z-index** (display order) so that new cards appear under old ones
```jsx
- cafes.forEach((cafe, i) => {
- const wrapper = document.createElement('div');
- wrapper.className = 'swipe-wrapper';
- wrapper.style.zIndex = 200 - i;
-
- var newCards = document.querySelectorAll('.location-card:not(.removed)');
- var allCards = document.querySelectorAll('.location-card');
- });
- }
+cafes.forEach((cafe, i) => {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'swipe-wrapper';
+ wrapper.style.zIndex = 200 - i;
+
+ var newCards = document.querySelectorAll('.location-card:not(.removed)');
+ var allCards = document.querySelectorAll('.location-card');
+ });
+}
```
We'll add more inside the function that inserts location information into each card by calling the Places API. Add a line that creates a card div and another line that assigns the card's class name to be ``location-card``.
@@ -263,17 +263,17 @@ We're going to add a function that detects left and right swipes and makes each
```jsx
const hammertime = new Hammer(wrapper);
- hammertime.on('swipeleft', () => {
- wrapper.style.transform = 'translateX(-150%) rotate(-15deg)';
- wrapper.style.opacity = 0;
- setTimeout(() => wrapper.remove(), 100);
- });
- hammertime.on('swiperight', () => {
- saveCafe(JSON.stringify(cafeData));
- wrapper.style.transform = 'translateX(150%) rotate(15deg)';
- wrapper.style.opacity = 0;
- setTimeout(() => wrapper.remove(), 100);
- });
+ hammertime.on('swipeleft', () => {
+ wrapper.style.transform = 'translateX(-150%) rotate(-15deg)';
+ wrapper.style.opacity = 0;
+ setTimeout(() => wrapper.remove(), 100);
+ });
+ hammertime.on('swiperight', () => {
+ saveCafe(JSON.stringify(cafeData));
+ wrapper.style.transform = 'translateX(150%) rotate(15deg)';
+ wrapper.style.opacity = 0;
+ setTimeout(() => wrapper.remove(), 100);
+ });
```
### Saving Cafes
@@ -303,7 +303,7 @@ if (!saved.find(c => c.place_id === cafe.place_id)) {
We'll need a fallback in case the cafe is already saved. Write an `else` statement that alerts the user if a cafe has already been saved, so it doesn't get duplicated into the saved list of cafes.
```jsx
-else {
+ else {
alert(`${cafe.name} is already saved.`);
}
}
@@ -317,8 +317,8 @@ Start by writing a function called `showSaved()`. Similar to the `displayCards()
```jsx
function showSaved() {
- const container = document.querySelector('.cards');
- container.innerHTML = '';
+ const container = document.querySelector('.cards');
+ container.innerHTML = '';
```
Then, add this line to parse through the list of saved cafes and save the information in a variable.
@@ -331,9 +331,9 @@ If the saved array is empty, it'll update the page by adding a ```` tag to sa
```jsx
if (saved.length === 0) {
- container.innerHTML = '
No saved cafes yet 😢
';
- return;
- }
+ container.innerHTML = 'No saved cafes yet 😢
';
+ return;
+}
```
For each cafe in the saved array, we'll make a card div, add the `location-card` class name, and update the card's content with `innerHTML` to include the current cafe's information.
From 1292846e79b7803b5bf952ddc285d9fb7a424d44 Mon Sep 17 00:00:00 2001
From: Gabriela Banaag <40579768+gbanaag@users.noreply.github.com>
Date: Tue, 26 Aug 2025 12:46:19 -0400
Subject: [PATCH 2/2] updated banner gif
---
.../build-a-cafe-finder-with-javascript.mdx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx b/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx
index 566ccfa8..aa72ad11 100644
--- a/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx
+++ b/projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx
@@ -5,7 +5,7 @@ uid: CgUQBagDrWWBRUuoh3mkyi3aedg1
datePublished: 2025-08-06
description: Learn how to build a cafe finder with JavaScript
header: https://i.imgur.com/VKm4oPJ.gif
-bannerImage: https://i.imgur.com/VKm4oPJ.gif
+bannerImage: https://i.imgur.com/lfbCFid.gif
published: live
tags:
- intermediate
@@ -13,7 +13,7 @@ tags:
---