Merge branch 'main' of github.com:codedex-io/projects

Author: Goku-kun

projects/build-a-cafe-finder-with-javascript/build-a-cafe-finder-with-javascript.mdx

@@ -5,15 +5,15 @@ 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
   - javascript
 ---
 
 <BannerImage
-  link="https://i.imgur.com/VKm4oPJ.gif"
+  link="https://i.imgur.com/lfbCFid.gif"
   description=""
   uid={false}
   cl="for-sidebar"
@@ -29,38 +29,37 @@ tags:
 />
 
 <BannerImage
-  link="https://i.imgur.com/VKm4oPJ.gif"
+  link="https://i.imgur.com/lfbCFid.gif"
   description=""
   uid="CgUQBagDrWWBRUuoh3mkyi3aedg1"
 />
 
-**Prerequisites: HTML, CSS, JavaScript**
-
+**Prerequisites:** HTML, CSS, JavaScript  
 **Read Time:** 30 minutes
 
 ## Introduction
 
-If you're an iced-bev-meets-coworking-space fiend like me and want to shake up what cafe you head to next, this is the perfect project for you. We'll be using our trilogy of web dev tools: ****HTML****, ****CSS****, and ****JavaScript****, and an API from the Google Maps Platform called ****Places****. We'll also make some quick animations and implement swiping recognition with a JavaScript library called ****Hammer****!
+If you're an iced-bev-meets-coworking-space fiend like me and want to shake up what cafe you head to next, this is the perfect project for you. We'll be using our trilogy of web dev tools: HTML, CSS, and JavaScript, and an API from the Google Maps Platform called [Places](https://developers.google.com/maps/documentation/places/web-service/overview). We'll also make some quick animations and implement swiping recognition with a JavaScript library called [Hammer](https://hammerjs.github.io)!
 
 ## About the Google Maps Platform
 
-The Google Maps Platform is a collection of Application Programming Interfaces (APIs) and Software Development Kits (SDKs). Each tool on the platform lets users use Google Maps functions and data in their own projects!
+The [Google Maps Platform](https://mapsplatform.google.com) is a collection of Application Programming Interfaces (APIs) and Software Development Kits (SDKs). Each tool on the platform lets users use Google Maps functions and data in their own projects!
 
 Some popular apps that use the Google Maps Platform include Uber and Airbnb, which access a user's location to calculate rides and show rentals in specific areas!
 
 <ImageZoom src="https://miro.medium.com/v2/resize:fit:7680/1*ThzU2nLvoAHfPwLqlddwhQ.png" />
 
-The [Places API](https://developers.google.com/maps/documentation/places/web-service/overview) is a smaller API under the Google Maps API. It fetches location data like location names, addresses, photos, and many more attributes! It's a great tool for accessing updated data and finding multiple places without manually copying all of their information into a project. ****We'll be using this in our project!****
+The [Places API](https://developers.google.com/maps/documentation/places/web-service/overview) is a smaller API under the Google Maps API. It fetches location data like location names, addresses, photos, and many more attributes! It's a great tool for accessing updated data and finding multiple places without manually copying all of their information into a project. We'll be using this in our project!
 
 ## Setup
 
 ### Workspace
 
-Start by creating a new HTML/CSS/JS project in [Codédex Builds](https://www.codedex.io/builds). You can also use a Code editor of your choice, like [VSCode](https://code.visualstudio.com/).
+Start by creating a new HTML/CSS/JS project in [Codédex Builds](https://www.codedex.io/builds). You can also use a code editor of your choice, like [VS Code](https://code.visualstudio.com/).
 
 ### Google Cloud Console
 
-Set up your project in the [[Google Cloud Console](https://developers.google.com/maps/documentation/elevation/cloud-setup). You'll enter a project name and billing information. Your website won't work as it should unless you enable billing, but you won't be charged if the API doesn't get called past the monthly limit (we'll teach you how to cap it at the limit, which is usually 10,000 API calls).
+Set up your project in the [Google Cloud Console](https://developers.google.com/maps/documentation/elevation/cloud-setup). You'll enter a project name and billing information. Your website won't work as it should unless you enable billing, but you won't be charged if the API doesn't get called past the monthly limit (we'll teach you how to cap it at the limit, which is usually 10,000 API calls).
 
 ### Clone Template
 
@@ -87,67 +86,62 @@ Here's how to create and protect your API key:
 3. Make sure you're on your cafe finder project and select the APIs & Services button.
 4. On the left menu, click on library. 
 5. Search for the Places API (new) and click on it. Make sure the Places API is enabled.
-6. Click on the hamburger menu and look for the APIs & Services button again. Then click on ****create** **credentials ****, then API key.
+6. Click on the hamburger menu and look for the APIs & Services button again. Then click on **create credentials**, then API key.
 7. After your key is generated, click on edit key. Restrict your application to websites.
-8. Add the domain your project is hosted on. In my case, mine is hosted on Codédex builds. 
+8. Add the domain your project is hosted on. In my case, mine is hosted on Codédex Builds. 
 
 Put your API key at the top of your JavaScript file. It should look like this:
 
 ```jsx
 const apiKey = "STRING_OF_RANDOM_CHARACTERS_HERE"; 
 ```
 
-<aside>
-⚠️
-
-****Make sure your API key is restricted to just your project (step 7), or else anyone can use it freely and you'll get charged for it!****
-
-</aside>
+**⚠️ Warning:** Make sure your API key is restricted to just your project (step 7), or else anyone can use it freely and you'll get charged for it!
 
 ### cors-anywhere
 
-Head to [https://cors-anywhere.herokuapp.com/](https://cors-anywhere.herokuapp.com/). Make sure to click on the ``Request temporary access to the demo server`` button to get set up with a temporary server for your project. 
+Head to [https://cors-anywhere.herokuapp.com](https://cors-anywhere.herokuapp.com/). Make sure to click on the ``Request temporary access to the demo server`` button to get set up with a temporary server for your project. 
 
 Then, add these lines to the top of your JavaScript file.
 
 ```jsx
 const useProxy = true;
-const proxy = "https://cors-anywhere.herokuapp.com/";
+const proxy = "https://cors-anywhere.herokuapp.com";
 ```
 
 ### Geolocation
 
 To see cafes nearby, the browser needs access to your location. There's a built-in JavaScript function that takes care of that for you called ``useLocation()`` and it takes your device's latitude and longitude coordinates.
 
 ```jsx
- function getLocation() {
-      const cache = JSON.parse(localStorage.getItem('cachedLocation') || '{}');
-      const now = Date.now();
+function getLocation() {
+  const cache = JSON.parse(localStorage.getItem('cachedLocation') || '{}');
+  const now = Date.now();
 ```
 
 Next, we'll check if any location data has been cached (saved to the browser) and is less than 10 minutes old. 
 
 ```jsx
 if (cache.timestamp && now - cache.timestamp < 10 * 60 * 1000) {
-        useLocation(cache.lat, cache.lng);
-      } 
+  useLocation(cache.lat, cache.lng);
+} 
 ```
 
 If there's no cached location information found, the browser pulls your current latitude and longitude from a built-in function. 
 
 ```jsx
 else {
-        navigator.geolocation.getCurrentPosition(pos => {
-          const lat = pos.coords.latitude;
-          const lng = pos.coords.longitude;
+  navigator.geolocation.getCurrentPosition(pos => {
+  const lat = pos.coords.latitude;
+  const lng = pos.coords.longitude;
 ```
 
-We'll save the location and timestamp in ``localStorage`` in case we use our cafe finder website in the near future. Then we'll add error handling - an alert that lets you know if your location can't be accessed.
+We'll save the location and timestamp in `localStorage` in case we use our cafe finder website in the near future. Then we'll add error handling - an alert that lets you know if your location can't be accessed.
 
 ```jsx
-          localStorage.setItem('cachedLocation', JSON.stringify({ lat, lng, timestamp: now }));
-          useLocation(lat, lng);
-        }, () => alert("Location access denied or unavailable."));
+  localStorage.setItem('cachedLocation', JSON.stringify({ lat, lng, timestamp: now }));
+  useLocation(lat, lng);
+}, () => alert("Location access denied or unavailable."));
 ```
 
 ### Using the API
@@ -166,8 +160,8 @@ We'll call the API to find nearby cafes and *_fetch_* their urls.
 
 ```jsx
 try {
-    const response = await fetch(url);
-    const data = await response.json();
+  const response = await fetch(url);
+  const data = await response.json();
 ```
 
 If the API finds results for nearby cafes, we'll take that data and insert it into cards (we'll write the `displayCards` function next!)
@@ -193,26 +187,26 @@ 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… 
 
 - Create a new div to wrap each cafe card
-- Add a class (``swipe-wrapper``) to each card to keep card styles consistent
-- Adjust the card's ****z-index**** (display order) so that new cards appear under old ones
+- Add a class (`swipe-wrapper`) to each card to keep card styles consistent
+- 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``.
@@ -239,7 +233,7 @@ const cafeData = {
 };
 ```
 
-Putting in tags between the ````` symbol when changing an element's ``innerHTML`` allows you to render HTML elements when functions run. We'll append (connect) the card to its wrapper, and append its wrapper to its container. 
+Putting in tags between the ``` ``` symbol when changing an element's `innerHTML` allows you to render HTML elements when functions run. We'll append (connect) the card to its wrapper, and append its wrapper to its container. 
 
 ```jsx
 card.innerHTML = `
@@ -257,12 +251,7 @@ container.appendChild(wrapper);
 
 [Hammer](http://hammerjs.github.io/) is a library used to recognize touch gestures in the browser! 
 
-<aside>
-💡
-
-A **library** is a collection of reusable resources like functions, classes, and pieces of pre-written code. An **API** is an interface that lets your code communicate with another application. 
-
-</aside>
+💡 A **library** is a collection of reusable resources like functions, classes, and pieces of pre-written code. An **API** is an interface that lets your code communicate with another application. 
 
 To make sure we have swiping gestures detected on the site, we're gonna import the library by adding this line in the ``<head>`` of your HTML file:
 
@@ -274,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
@@ -314,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.`);
   }
 }
@@ -328,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.
@@ -342,9 +331,9 @@ If the saved array is empty, it'll update the page by adding a ``<p>`` tag to sa
 
 ```jsx
 if (saved.length === 0) {
-      container.innerHTML = '<p>No saved cafes yet 😢</p>';
-      return;
-    }
+  container.innerHTML = '<p>No saved cafes yet 😢</p>';
+  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. 
@@ -383,7 +372,7 @@ If you're looking for another challenge or a way to spice up your project, you c
 
 ### Troubleshooting
 
-- Make sure you're granted temporary access on https://cors-anywhere.herokuapp.com/.
+- Make sure you're granted temporary access on https://cors-anywhere.herokuapp.com.
 - Make sure to allow location access when you try out the site.
 
 ### Additional Resources