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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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