Merge pull request #208 from gbanaag/main

updated markdown

Author: jules-kris

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

@@ -19,7 +19,7 @@ tags:
   cl="for-sidebar"
 />
 
-# Project Title
+# Build a Cafe Finder with JavaScript and the Google Maps Platform
 
 <AuthorAvatar
   author_name="Gabriela Banaag"
@@ -38,47 +38,47 @@ tags:
 
 **Read Time:** 30 minutes
 
-# ## Introduction
+## # 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****!
 
-## About the Google Maps Platform
+## # 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!
 
 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
+## # Setup
 
-## ### Workspace
+#### # Workspace
 
-Start by creating a new HTML/CSS/JS project in [[Codédex Builds](https://www.codedex.io/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 [VSCode](https://code.visualstudio.com/).
 
-## ### Google Cloud Console
+#### # Google Cloud Console
 
-Set up your project in the [[Google Cloud Console](https://developers.google.com/maps/documentation/elevation/cloud-setup)](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
+#### # Clone Template
 
-Head over to [[this GitHub link](https://github.com/gbanaag/codedex-cafe-finder-template/tree/main)](https://github.com/gbanaag/codedex-cafe-finder-template/tree/main) and clone the repository. The repo has all the basic HTML and CSS set up so we don’t have to worry about it later and focus on API implementation. 
+Head over to [this GitHub link](https://github.com/gbanaag/codedex-cafe-finder-template/tree/main) and clone the repository. The repo has all the basic HTML and CSS set up so we don’t have to worry about it later and focus on API implementation. 
 
 You can clone the template in 3 different ways:
 
 - Downloading the folder and adding it to your local workspace
 - GitHub Desktop app
 - ``git clone`` with command line
 
-If you don’t have VS Code and don’t know how to use it, head over to our [[VS Code setup tutorial](https://www.codedex.io/projects/set-up-your-local-environment-in-python#download-vs-code)](https://www.codedex.io/projects/set-up-your-local-environment-in-python#download-vs-code). 
+If you don’t have VS Code and don’t know how to use it, head over to our [VS Code setup tutorial](https://www.codedex.io/projects/set-up-your-local-environment-in-python#download-vs-code). 
 
-# ## Accessing Locations with JavaScript
+## # Accessing Locations with JavaScript
 
 Time to write some back-end code!
 
-## ### API Key
+#### # API Key
 
 Here’s how to create and protect your API key:
 
@@ -104,7 +104,7 @@ const apiKey = "STRING_OF_RANDOM_CHARACTERS_HERE";
 
 </aside>
 
-## ### cors-anywhere
+#### # 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. 
 
@@ -115,7 +115,7 @@ const useProxy = true;
 const proxy = "https://cors-anywhere.herokuapp.com/";
 ```
 
-## ### Geolocation
+#### # 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.
 
@@ -133,7 +133,7 @@ if (cache.timestamp && now - cache.timestamp < 10 * 60 * 1000) {
       } 
 ```
 
-If there’s no cached location information found, the browser pulls your current latitude and longitude from a built in function. 
+If there’s no cached location information found, the browser pulls your current latitude and longitude from a built-in function. 
 
 ```jsx
 else {
@@ -152,7 +152,7 @@ We’ll save the location and timestamp in ``localStorage`` in case we use our c
     }
 ```
 
-## ### Using the API
+#### # Using the API
 
 We’ll start implementing the Google Places API to take locations and their information from Google Maps itself! We’ll start by writing the `useLocation()` function.
 
@@ -187,7 +187,7 @@ If the API finds results for nearby cafes, we’ll take that data and insert it
 }
 ```
 
-# ## Cafe UI and Animations
+## # Cafe UI and Animations
 
 We’re gonna create a wrapper for our cards, and inject data from the API into the wrapper as we go. To start, let’s make a function called ``displayCards()`` that renders a div container whenever the website starts up. 
 
@@ -241,7 +241,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 = `
@@ -255,14 +255,14 @@ wrapper.appendChild(card);
 container.appendChild(wrapper);
 ```
 
-## ### Hammer
+#### # Hammer
 
 [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. 
+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>
 
@@ -272,8 +272,6 @@ To make sure we have swiping gestures detected on the site, we’re gonna import
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/hammer.min.js"></script>
 ```
 
-[gif]
-
 We’re going to add a function that detects left and right swipes and makes each cafe card flick and fade away. Add this to the bottom of your `displayCards()` function to make it happen:
 
 ```jsx
@@ -291,11 +289,11 @@ We’re going to add a function that detects left and right swipes and makes eac
         });
 ```
 
-## ### Saving Cafes
+#### # Saving Cafes
 
-We’ll be using ``localStorage`**`** to save cafes to the browser. It automatically caches (saves) specific interactions from your site to your browser that you choose to save without needing a database.
+We’ll be using ``localStorage`` to save cafes to the browser. It automatically caches (saves) specific interactions from your site to your browser that you choose to save without needing a database.
 
-** **JSON Parsing**** is used to take strings and save them as data structures like objects or arrays. To implement this, we'll add a line that stores the string as a cafe **object.** Then we'll save the cafe object into an array called ``saved``. 
+**JSON Parsing** is used to take strings and save them as data structures like objects or arrays. To implement this, we'll add a line that stores the string as a cafe **object.** Then we'll save the cafe object into an array called ``saved``. 
 
 ```jsx
 function saveCafe(cafeJSON) {
@@ -372,7 +370,7 @@ container.appendChild(card);
   }
 ```
 
-# ## Conclusion
+## # Conclusion
 
 Here's my final result:
 
@@ -386,7 +384,7 @@ If you’re looking for another challenge or a way to spice up your project, you
 - Adding a map of places next to the cards
 - Animating your cards further
 
-## ### Troubleshooting
+#### # Troubleshooting
 
 - 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.