script.js

// =========================
// LIVE CLOCK
// =========================

function updateClock() {

    const now = new Date();

    document.getElementById("clock").innerText =
        now.toLocaleTimeString();
}

setInterval(updateClock, 1000);

updateClock();

// =========================
// WEATHER API
// =========================

async function getWeather() {

    const city = document.getElementById("cityInput").value;

    const apiKey = "a1a76068e48a730958f510a592ac8cca";

    const url =
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {

        const response = await fetch(url);

        const data = await response.json();

        if (data.cod !== 200) {

            document.getElementById("weatherResult").innerHTML =
                `<p style="color:red;">City not found</p>`;

            return;
        }

        document.getElementById("weatherResult").innerHTML = `

            <img
                class="weather-icon"
                src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png"
            >

            <h1 id="temperature">${Math.round(data.main.temp)}°C</h1>

            <h3 id="weatherCondition">${data.weather[0].main}</h3>

            <div class="weather-details">

                <div>
                    <span>Humidity</span>
                    <p>${data.main.humidity}%</p>
                </div>

                <div>
                    <span>Wind</span>
                    <p>${data.wind.speed} km/h</p>
                </div>

            </div>

        `;

    }

    catch (error) {

        document.getElementById("weatherResult").innerHTML =
            `<p style="color:red;">Weather data unavailable</p>`;
    }
}
// WEATHER BUTTON

document
.getElementById("weatherSearchBtn")
.addEventListener("click", () => {

    const city =
        document.getElementById("weatherInput").value;

    fetchWeather(city);
});

// DEFAULT WEATHER

fetchWeather();

// =========================
// JOKES API
// =========================

async function getJoke() {

    const jokeQuestion =
        document.getElementById("jokeQuestion");

    const jokeAnswer =
        document.getElementById("jokeAnswer");

    jokeQuestion.innerHTML = "Loading joke...";
    jokeAnswer.innerHTML = "";

    try {

        const response = await fetch(
            "https://official-joke-api.appspot.com/random_joke"
        );

        const data = await response.json();

        jokeQuestion.innerHTML = data.setup;

        jokeAnswer.innerHTML = `
            <strong>${data.punchline}</strong>
        `;

    }

    catch (error) {

        jokeQuestion.innerHTML =
            "Unable to fetch joke.";

        jokeAnswer.innerHTML =
            "Please try again.";

        console.log(error);

    }

}

// =========================
// CURRENCY CONVERTER
// =========================

async function convertCurrency() {

    const amount =
        document.getElementById("amount").value;

    const from =
        document.getElementById("fromCurrency").value;

    const to =
        document.getElementById("toCurrency").value;

    if (amount === "") {

        alert("Please enter amount");

        return;
    }

    try {

        const response = await fetch(
            `https://open.er-api.com/v6/latest/${from}`
        );

        const data = await response.json();

        const rate = data.rates[to];

        const converted = (amount * rate).toFixed(2);

        document.getElementById("currencyResult").innerHTML =
            `₹ ${converted}`;

    }

    catch (error) {

        document.getElementById("currencyResult").innerHTML =
            "Conversion failed";
    }
}

getJoke();