home-display/index.js

import getWeatherInfo from "./weatherCodes.js";

const setDateTime = ()=>{
    const dateTime = new Date();
    document.getElementById("date").textContent = dateTime.toLocaleDateString("en-US", {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric"
    });
    document.getElementById("time").textContent = dateTime.toLocaleTimeString("en-US", {
        hour: "numeric",
        minute: "2-digit",
        hour12: true
    });
}

const renderForecast = (f)=>{
    const head = document.getElementById("forecastHead").children[0];
    const tbody = document.getElementById("forecastBody");

    for(let i = 0; i < 3; i++){
        const sunrise = new Date(f.sunrise[i]);
        const sunset = new Date(f.sunset[i]);
        const timeOptions = {
            hour: "2-digit",
            minute: "2-digit",
            hour12: true
        };

        head.children[i+1].textContent = new Date(f.time[i]).toLocaleDateString("en-US", {
            month: "short",
            day: "numeric",
            year: "2-digit"
        });
        tbody.children[0].children[i+1].textContent = `${f.temperature_2m_min[i]} - ${f.temperature_2m_max[i]}`;
        tbody.children[1].children[i+1].textContent = f.dew_point_2m_mean[i];
        tbody.children[2].children[i+1].textContent = `${f.precipitation_probability_max[i]}%`;
        tbody.children[3].children[i+1].textContent = f.precipitation_sum[i].toFixed(2);
        tbody.children[4].children[i+1].textContent = f.wind_speed_10m_max[i];
        tbody.children[5].children[i+1].textContent = sunrise.toLocaleTimeString("en-US", timeOptions);
        tbody.children[6].children[i+1].textContent = sunset.toLocaleTimeString("en-US", timeOptions);
    }
}

const getWeather = ()=>{
    fetch("https://api.open-meteo.com/v1/forecast?latitude=33.54&longitude=-79.05&daily=temperature_2m_max,temperature_2m_min,sunrise,sunset,rain_sum,precipitation_probability_max,wind_speed_10m_max,wind_gusts_10m_max,precipitation_sum,wind_direction_10m_dominant,weather_code,dew_point_2m_mean&current=temperature_2m,apparent_temperature,weather_code,wind_speed_10m,wind_direction_10m,is_day,dew_point_2m&timezone=America%2FNew_York&wind_speed_unit=mph&temperature_unit=fahrenheit&precipitation_unit=inch", {method: "GET"})
        .then(r=>r.json())
        .then((response)=>{
            const tempDisplay = `${response.current.temperature_2m}\u00B0F`;
            document.getElementById("temp").textContent= tempDisplay;

            const feelsLike = `Feels Like ${response.current.apparent_temperature}\u00B0F`;
            document.getElementById("feels").textContent = feelsLike;

            const weatherInfo = getWeatherInfo(response.current.weather_code, response.current.is_day);
            document.getElementById("weatherDescription").textContent = weatherInfo.desc;
            document.getElementById("currentWeatherLogo").textContent = weatherInfo.icon;

            const currentWind = `Wind ${response.current.wind_speed_10m}mph`;
            const currentElem = document.querySelector("#wind p");
            const newElem = document.createElement("p");
            newElem.textContent = currentWind;
            currentElem.replaceWith(newElem);

            document.querySelector("#wind svg").style.transform = `rotate(${response.current.wind_direction_10m}deg)`;

            const dewPoint = `Dew Point: ${response.current.dew_point_2m}\u00B0F`;
            document.getElementById("dewPoint").textContent = dewPoint;

            renderForecast(response.daily);
        })
        .catch((err)=>{
            console.error(err);
        });
}

const getRadarImage = () =>{
    const img = document.getElementById("radar");
    const base = img.src.split("?")[0];
    img.src = base + "?t=" + Date.now();
}

getWeather();
setInterval(getWeather, 60000);
setDateTime();
setInterval(setDateTime, 10000);
setInterval(getRadarImage, 10 * 1000);