From 8e1329a8d50f67fa87fb1526b77dd46a3ed0000f Mon Sep 17 00:00:00 2001 From: Gabriela Banaag <40579768+gbanaag@users.noreply.github.com> Date: Mon, 11 Aug 2025 16:03:56 -0400 Subject: [PATCH 1/3] Update build-a-cafe-finder-with-javascript.mdx fixed extra asterisks and links --- .../build-a-cafe-finder-with-javascript.mdx | 54 +++++++++---------- 1 file changed, 26 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 a43a790d..f2a23595 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 @@ -19,7 +19,7 @@ tags: cl="for-sidebar" /> -# Project Title +# Build a Cafe Finder with JavaScript and the Google Maps Platform -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: @@ -72,13 +72,13 @@ You can clone the template in 3 different ways: - 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"; -## ### 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! @@ -272,8 +272,6 @@ To make sure we have swiping gestures detected on the site, we’re gonna import ``` -[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. From 858684a4f9bf54eab5bfe79555be4081d627eff6 Mon Sep 17 00:00:00 2001 From: Gabriela Banaag <40579768+gbanaag@users.noreply.github.com> Date: Mon, 11 Aug 2025 16:04:24 -0400 Subject: [PATCH 2/3] Update build-a-cafe-finder-with-javascript.mdx --- .../build-a-cafe-finder-with-javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f2a23595..5bec4455 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 @@ -42,7 +42,7 @@ tags: 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! From 56127738bf253eb7d70d95326c949d62cf7a2429 Mon Sep 17 00:00:00 2001 From: Gabriela Banaag <40579768+gbanaag@users.noreply.github.com> Date: Mon, 11 Aug 2025 16:05:03 -0400 Subject: [PATCH 3/3] Update build-a-cafe-finder-with-javascript.mdx --- .../build-a-cafe-finder-with-javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5bec4455..cac637f6 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 @@ -42,7 +42,7 @@ tags: 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!