app.js

// Variables
const btn = document.querySelector("#locationBtn");
const img = document.querySelector(".img");
const h1 = document.querySelector(".h1");
const p = document.querySelector(".p");

// Functions

const relaodPage = () => {
    btn.addEventListener("click", () => {
        window.location.reload();
    });
}

const countryDetails = (country) => {
    fetch(`https://restcountries.com/v3.1/name/${country}`).then(res => res.json()).then(data => {
        console.log(data);
        img.src = data[0].flags.svg;
        h1.style.marginTop = "15px";
        h1.innerText = data[0].name.common;
        p.classList.add("text-start", "pDetails");
        p.innerHTML = `
            Capital: &nbsp;&nbsp;${data[0].capital[0]} <br>
            Region: &nbsp;&nbsp;${data[0].region} <br>
            Population: &nbsp;&nbsp;${data[0].population} <br>
            Area: &nbsp;&nbsp;${data[0].area} km²
        `;
        btn.innerHTML = "Get My Location Again";
        relaodPage();
    });
}

// Method 1
// const userLocation = () => {
//     // IP Address API
//     let response = fetch(`https://api.ipify.org/?format=json`).then(res => res.json()).then(ipData => console.log(ipData));

//     // Geolocation API
//     let response1 = fetch(`https://geo.ipify.org/api/v2/country,city?apiKey=at_xG2vwzjJvFweMKK2Kmh57tUlYROrN&ipAddress=${ipData.ip}`).then(res1 => res1.json()).then(data1 => console.log(data1));
// }

// Method 2
const userLocation = async () => {
    // IP Address API
    let response = await fetch(`https://api.ipify.org/?format=json`)
    let ipData = await response.json();
    console.log(ipData);

    // Geolocation API
    let response1 = await fetch(`https://geo.ipify.org/api/v2/country,city?apiKey=at_xG2vwzjJvFweMKK2Kmh57tUlYROrN&ipAddress=${ipData.ip}`);
    let data1 = await response1.json();
    console.log(data1);

    const {location : {country}} = data1;
    console.log(country);
    countryDetails(country);
}


btn.addEventListener("click", userLocation)