From c0b1df6bca5c5ec94f0cc9d2fc7cfb3032f89c09 Mon Sep 17 00:00:00 2001 From: Angie Mejia Holguin Date: Mon, 31 Mar 2025 10:36:24 -0400 Subject: [PATCH] First commit --- complex-api-1/css/styles.css | 99 ++++++++++++++++++++++++++++++++++++ complex-api-1/index.html | 39 ++++++++++++++ complex-api-1/js/main.js | 62 ++++++++++++++++++++++ 3 files changed, 200 insertions(+) create mode 100644 complex-api-1/css/styles.css create mode 100644 complex-api-1/index.html create mode 100644 complex-api-1/js/main.js diff --git a/complex-api-1/css/styles.css b/complex-api-1/css/styles.css new file mode 100644 index 0000000..2e492ca --- /dev/null +++ b/complex-api-1/css/styles.css @@ -0,0 +1,99 @@ +/* General Styles */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Arial", sans-serif; + background-color: #f9f9f9; + color: #333; +} + +header { + background-color: #ff6347; + color: white; + padding: 10px 20px; + border-bottom: 2px solid #d3d3d3; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +nav .logo { + font-size: 24px; + font-weight: bold; +} + +nav ul { + display: flex; + list-style: none; +} + +nav li { + margin: 0 15px; + font-size: 18px; + cursor: pointer; + display: flex; + align-items: center; + gap: 5px; + color: white; + transition: color 0.3s ease; +} + +nav li:hover { + color: #ffd700; +} + +main { + text-align: center; + padding: 40px 20px; +} + +main h1 { + font-size: 28px; + margin-bottom: 20px; + color: #2e2e2e; +} + +label { + display: block; + font-weight: bold; + margin: 10px 0; +} + +input[type="text"] { + width: 20%; + padding: 10px; + margin: 10px 0; + border: 1px solid #ccc; + border-radius: 5px; +} + +button { + background-color: #ff6347; + color: white; + padding: 10px 20px; + font-size: 16px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #cc5141; +} + +ul { + list-style-type: disc; + margin: 20px auto; + padding: 0; + width: 80%; + text-align: left; +} diff --git a/complex-api-1/index.html b/complex-api-1/index.html new file mode 100644 index 0000000..e4684fc --- /dev/null +++ b/complex-api-1/index.html @@ -0,0 +1,39 @@ + + + + + + + + Complex API #1 + + + + + + +
+ +
+
+
+

Search for restaurants in your city!

+ + + + +
    +
    +
    + + + \ No newline at end of file diff --git a/complex-api-1/js/main.js b/complex-api-1/js/main.js new file mode 100644 index 0000000..d97cf59 --- /dev/null +++ b/complex-api-1/js/main.js @@ -0,0 +1,62 @@ +document.querySelector('button').addEventListener('click', getCoordinates); + +function getCoordinates() { + const cityName = document.getElementById('city').value + const countryName = document.getElementById('country').value + + const geoApiKey = '0tHj+S4vc1MB63o6bQVHRw==e2NEFPOhTwG3Em9S'; // Replace with your actual API key + const geoUrl = `https://api.api-ninjas.com/v1/geocoding?city=${cityName}&country=${countryName}` + + fetch(geoUrl, { + headers: { + "X-Api-Key": geoApiKey // Include the API key in the Authorization header inside the fetch parameter + } + }) + .then(res => res.json()) + .then(data => { + console.log(data) + const latitude = data[0].latitude + const longitude = data[0].longitude + getRestaurants(latitude, longitude) + }) + .catch(err =>{ + console.log(`error ${err}`) + }); + + +} + +function getRestaurants(latitude, longitude) { + const geoApifyKey = '53800e6a1a134ddc9511446d79c1f039'; // GeoApify API key + const category = 'catering.restaurants'; + const radius = 5000; + + const geoApifyUrl = `https://api.geoapify.com/v2/places?categories=catering&filter=circle:${longitude},${latitude},${radius}&apiKey=${geoApifyKey}`; + + + fetch(geoApifyUrl) + .then(response => response.json()) + .then(response => { + console.log(response); + + const restaurantList = document.querySelector('#restaurantUl'); + restaurantList.innerHTML = ''; // Clear previous results + + response.features.forEach(restaurant => { //features is the name of the restaurants array + const listItem = document.createElement('li'); + + const name = restaurant.properties.name + const address = restaurant.properties.address_line2 + const contact = restaurant.properties.contact.phone + + listItem.innerHTML = `Name: ${name} Address: ${address} Contact: ${contact} `; + + restaurantList.appendChild(listItem); + }) + }) + .catch(err =>{ + console.log(`error ${err}`) + }); + + +} \ No newline at end of file