Update build-a-cafe-finder-with-javascript.mdx

Author: jules-kris

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

@@ -38,11 +38,11 @@ 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!
 
@@ -52,17 +52,17 @@ Some popular apps that use the Google Maps Platform include Uber and Airbnb, whi
 
 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). 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). 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) 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. 
 
@@ -74,11 +74,11 @@ You can clone the template in 3 different ways:
 
 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.
 
@@ -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. 
 
@@ -255,7 +255,7 @@ wrapper.appendChild(card);
 container.appendChild(wrapper);
 ```
 
-#### # Hammer
+### Hammer
 
 [Hammer](http://hammerjs.github.io/) is a library used to recognize touch gestures in the browser! 
 
@@ -289,7 +289,7 @@ 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.
 
@@ -370,7 +370,7 @@ container.appendChild(card);
   }
 ```
 
-## # Conclusion
+## Conclusion
 
 Here's my final result:
 
@@ -384,12 +384,12 @@ 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.
 
-## ### Additional Resources
+### Additional Resources
 
 - [GitHub repository with all the code](https://github.com/gbanaag/codedex-cafe-curator)
 - YouTube video (coming soon!)