diff --git a/complex-api-2/css/styles.css b/complex-api-2/css/styles.css
new file mode 100644
index 0000000..3ffd37c
--- /dev/null
+++ b/complex-api-2/css/styles.css
@@ -0,0 +1,106 @@
+body {
+ font-family: "Arial", sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f6f9;
+}
+
+header {
+ background-color: #1b2838;
+ color: white;
+ padding: 10px 20px;
+ border-bottom: 2px solid #ccc;
+ 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;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+nav ul {
+ display: flex;
+ list-style: none;
+}
+
+nav li {
+ margin: 0 30px;
+ font-size: 16px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ color: white;
+ transition: color 0.3s ease;
+}
+
+nav li:hover {
+ color: #2ecc71;
+}
+
+main {
+ text-align: center;
+ padding: 40px 20px;
+}
+
+main h1 {
+ font-size: 32px;
+ font-weight: bold;
+ color: #1b2838;
+ margin-bottom: 20px;
+}
+
+label {
+ display: block;
+ font-weight: bold;
+ margin: 10px 0;
+}
+
+input[type="text"] {
+ width: 20%;
+ padding: 10px;
+ margin-bottom: 20px;
+ border: 2px solid #1b2838;
+ border-radius: 5px;
+}
+
+button {
+ background-color: #1b2838;
+ 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: #2ecc71;
+ color: white;
+}
+
+footer {
+ background-color: #1b2838;
+ color: white;
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 40px;
+}
+
+ul {
+ list-style-type: none;
+ margin: 20px auto;
+ padding: 0;
+ width: 70%;
+ text-align: left;
+}
diff --git a/complex-api-2/index.html b/complex-api-2/index.html
new file mode 100644
index 0000000..24a4ad7
--- /dev/null
+++ b/complex-api-2/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+ Complex API #2
+
+
+
+
+
+
+
+
+ Get the currency exchange by country
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/complex-api-2/js/main.js b/complex-api-2/js/main.js
new file mode 100644
index 0000000..e63f14b
--- /dev/null
+++ b/complex-api-2/js/main.js
@@ -0,0 +1,60 @@
+document.querySelector('button').addEventListener('click', getCountryData);
+
+function getCountryData() {
+ const countryName = document.getElementById('country').value;
+
+ const restCountriesUrl = `https://restcountries.com/v3.1/name/${countryName}`;
+
+ fetch(restCountriesUrl)
+ .then(response => response.json())
+ .then(data => {
+ // Extract currency code from the REST Countries API response
+ const country = data[0];
+ console.log(country);
+
+ const currencyCode = Object.keys(country.currencies)[0]; // Get the first currency code
+ const currencyName = country.currencies[currencyCode].name;
+
+ console.log(`Currency Code: ${currencyCode}, Currency Name: ${currencyName}`);
+
+ // Display basic country info
+ const countryInfo = document.querySelector('#countryUl');
+ countryInfo.innerHTML = `
+ Country: ${country.name.common}
+ Currency: ${currencyName} (${currencyCode})
+ Region: ${country.region}
+ Population: ${country.population.toLocaleString()}
+ `;
+
+ // Call the Exchange Rate API with the currency code
+ getExchangeRate(currencyCode);
+ })
+ .catch(err => {
+ console.error(`Error fetching country data: ${err}`);
+ });
+}
+
+function getExchangeRate(currencyCode) {
+ const exchangeRateApiKey = 'af01377e51c0ab6ed3045b88'; // Replace with your actual API key
+ const exchangeRateUrl = `https://v6.exchangerate-api.com/v6/${exchangeRateApiKey}/latest/${currencyCode}`;
+
+ fetch(exchangeRateUrl)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data);
+
+ // Extract USD exchange rate
+ const usdRate = data.conversion_rates.USD;
+
+ // Display exchange rate
+ const exchangeInfo = document.querySelector('#exchangeUl');
+ exchangeInfo.innerHTML = '';
+
+ const exchangeRateLi = document.createElement('li');
+ exchangeRateLi.innerText = `Exchange Rate (1 ${currencyCode} to USD): ${usdRate}`;
+ exchangeInfo.appendChild(exchangeRateLi);
+ })
+ .catch(err => {
+ console.error(`Error fetching exchange rate: ${err}`);
+ });
+}
\ No newline at end of file