Proszę o rozwiązanie problemu w HTML

pytanie zadane 1 listopada 2023 w HTML i CSS przez olo123 Nowicjusz (120 p.)

Witam stworzyłem kod html który pokazuje listę świąt w Korei Północnej. Najbliższe święto jest zaznaczone na zielono, lecz gdy wypadają święta Dzień Matki i Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej zaznaczają się obydwa święta, chociaż teoretycznie Dzień Matki powinien być zaznaczony gdyż wypada wcześniej i gdy to piszę to jest bliżej nas.

Tutaj kod:

<!DOCTYPE html>
<html>
<head>
    <title>Święta w Korei Północnej</title>
    <script>
        // Funkcja do obliczania pozostałych dni do najbliższego święta
        function obliczPozostaleDni(data) {
            var dzis = new Date();
            var strefaKoreanska = 9; // Różnica czasowa w godzinach
            var dataSwieta = new Date(data);

            // Dostosuj datę na podstawie różnicy czasowej
            dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

            if (dataSwieta < dzis) {
                dataSwieta.setFullYear(dataSwieta.getFullYear() + 1); // Przesuń na kolejny rok
            }

            var roznica = dataSwieta - dzis;
            var dni = Math.floor(roznica / (1000 * 60 * 60 * 24));
            return dni;
        }

        // Funkcja do ustawiania koloru tekstu dla najbliższego święta
        function ustawKolorTekstu(dataSwieta) {
            var dzis = new Date();
            var strefaKoreanska = 9; // Różnica czasowa w godzinach
            var dataSwieta = new Date(dataSwieta);

            // Dostosuj datę na podstawie różnicy czasowej
            dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

            if (dataSwieta > dzis) {
                return "green";
            }
            return "black";
        }

        // Funkcja wyświetlająca święta i pozostałe dni
        function wyswietlSwieta() {
            var aktualnaData = new Date();
            var rok = aktualnaData.getFullYear(); // Pobierz aktualny rok

            var swieta = [
                { data: rok + "-01-01", nazwa: "Nowy Rok" },
                { data: rok + "-03-08", nazwa: "Dzień Kobiet" },
                { data: rok + "-04-15", nazwa: "Dzień Słońca (Rocznica urodzin Kim Ir Sena)" },
                { data: rok + "-04-25", nazwa: "Rocznica ustanowienia Koreańskiej Armii Ludowej" },
                { data: rok + "-05-01", nazwa: "Święto Robotnicze" },
                { data: rok + "-07-27", nazwa: "Dzień Zwycięstwa Wyzwolenia Ojczyzny" },
                { data: rok + "-08-25", nazwa: "Dzień Songun" },
                { data: rok + "-09-09", nazwa: "Rocznica ustanowienia Koreańskiej Republiki Ludowo-Demokratycznej" },
                { data: rok + "-10-10", nazwa: "Rocznica założenia Partii Pracy Korei" },
                { data: rok + "-11-16", nazwa: "Dzień Matki" },
                { data: rok + "-12-27", nazwa: "Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej" }
            ];

            var dzis = new Date();
            var lista = document.getElementById("listaSwiat");
            lista.innerHTML = "";

            for (var i = 0; i < swieta.length; i++) {
                var dataSwieta = new Date(swieta[i].data);
                var dniDoSwieta = obliczPozostaleDni(dataSwieta);
                var kolorTekstu = ustawKolorTekstu(dataSwieta);

                var wpis = document.createElement("li");
                var dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
                var dzienText;

                if (dniDoSwieta === 0) {
                    dzienText = "dziś";
                } else if (dniDoSwieta > 0) {
                    dzienText = "za " + dniDoSwieta + " " + dniTekst;
                } else {
                    var jutro = new Date(dataSwieta);
                    jutro.setDate(jutro.getDate() + 1);
                    dniDoSwieta = obliczPozostaleDni(jutro);
                    dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
                    dzienText = "za " + dniDoSwieta + " " + dniTekst;
                }

                wpis.innerHTML = swieta[i].data.substr(5) + " - " + swieta[i].nazwa + " (" + dzienText + ")";
                wpis.style.color = kolorTekstu;

                lista.appendChild(wpis);
            }
        }
    </script>
</head>
<body onload="wyswietlSwieta()">
    <h1>Święta w Korei Północnej</h1>
    <ul id="listaSwiat"></ul>
</body>
</html>

Proszę o rozwiązanie problemu aby te dwa święta nie były zaznaczone jednocześnie a tylko to które jest bliżej nas.

komentarz 1 listopada 2023 przez overcq Pasjonat (22,630 p.)

Funkcją “ustawKolorTekstu” arbitralnie ustawiasz kolor zielony dla wszystkich świąt, które będą jeszcze w tym roku (linia 33). Może wystarczy przed pętlą wypisującą święta dodać jeszcze jedną, która będzie wyszukiwać dla wszystkich świąt spełniających warunek “dataSwieta > dzis” to mające najmniejszą odległość “dataSwieta - dzis”. I później w pętli wypisującej sprawdzać, czy to to święto, by ustawić kolor zielony.

komentarz 1 listopada 2023 przez VBService Ekspert (256,600 p.)
edycja 1 listopada 2023 przez VBService

@olo123, BTW dataSwieta już jest typu Date, linia 59

var dataSwieta = new Date(swieta[i].data);
var dniDoSwieta = obliczPozostaleDni(dataSwieta);
var kolorTekstu = ustawKolorTekstu(dataSwieta);

proponuje zapis dla ustawKolorTekstu

function ustawKolorTekstu(dataSwieta) {
  const dzis = new Date();
  const strefaKoreanska = 9; // Różnica czasowa w godzinach
 
  // Dostosuj datę na podstawie różnicy czasowej
  dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);
 
  return dataSwieta >= dzis ? "green" : "black";
}

1 odpowiedź

odpowiedź 1 listopada 2023 przez VBService Ekspert (256,600 p.)
edycja 1 listopada 2023 przez VBService

Proponuje użyć zmiennej tzw. flagi

Proponowane zmiany

function ustawKolorTekstu(dataSwieta) {
  const dzis = new Date();
  const strefaKoreanska = 9; // Różnica czasowa w godzinach

  // Dostosuj datę na podstawie różnicy czasowej
  dataSwieta.setHours(dataSwieta.getHours() - strefaKoreanska);

  return dataSwieta >= dzis ? true : false;
}

function wyswietlSwieta() {
  const dzis = new Date();
  const rok = dzis.getFullYear(); // Pobierz aktualny rok

  const swieta = [
    { data: rok + "-01-01", nazwa: "Nowy Rok" },
    { data: rok + "-03-08", nazwa: "Dzień Kobiet" },
    { data: rok + "-04-15", nazwa: "Dzień Słońca (Rocznica urodzin Kim Ir Sena)" },
    { data: rok + "-04-25", nazwa: "Rocznica ustanowienia Koreańskiej Armii Ludowej" },
    { data: rok + "-05-01", nazwa: "Święto Robotnicze" },
    { data: rok + "-07-27", nazwa: "Dzień Zwycięstwa Wyzwolenia Ojczyzny" },
    { data: rok + "-08-25", nazwa: "Dzień Songun" },
    { data: rok + "-09-09", nazwa: "Rocznica ustanowienia Koreańskiej Republiki Ludowo-Demokratycznej" },
    { data: rok + "-10-10", nazwa: "Rocznica założenia Partii Pracy Korei" },
    { data: rok + "-11-16", nazwa: "Dzień Matki" },
    { data: rok + "-12-27", nazwa: "Święto konstytucji Koreańskiej Republiki Ludowo-Demokratycznej" }
  ];

  const lista = document.getElementById("listaSwiat");
  lista.innerHTML = "";

  let pierwszaNajblizszaZnaleziona = false;

  for (let i=0; i<swieta.length; i++) {
    const dataSwieta = new Date(swieta[i].data);
    const dniDoSwieta = obliczPozostaleDni(dataSwieta);

    const wpis = document.createElement("li");
    const dniTekst = dniDoSwieta === 1 ? "dzień" : "dni";
    let dzienText;

    if (dniDoSwieta === 0) {
      dzienText = "dziś";
    } else if (dniDoSwieta > 0) {
      dzienText = "za " + dniDoSwieta + " " + dniTekst;
    }

    wpis.innerHTML = swieta[i].data.substr(5) + " - " + swieta[i].nazwa + " (" + dzienText + ")";
    if (!pierwszaNajblizszaZnaleziona && ustawKolorTekstu(dataSwieta)) {
      wpis.style.color = 'green';
      pierwszaNajblizszaZnaleziona = true;
    }                

    lista.appendChild(wpis);
  }
}