Dzien Niedziela ma sie zmienic kolor tekstu czerowny i wywietlic na stornie liniki:79,80 ; 104-108

pytanie zadane 11 października 2020 w JavaScript przez chrystian Gaduła (4,780 p.)
edycja 11 października 2020 przez chrystian

<!Doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Kartka </title>
    <link rel="stylesheet" href="style2.css">
    <meta charset="utf-8">
</head>
<body>
<div id = 'kartka'>
    <div id = 'data'>
    </div>
    <div id='dzien'>
    </div>
    <div id='tydzien'>
    </div>
    <div id='zostalo'>
    </div>
</div>
<script>
    var x = new Date();
    var miesiac = x.getMonth();
    var dzien = x.getDay();
    var liczb = x.getDate();
    if(liczb < 10)
        liczb = '0' + liczb;
    if(miesiac==3||miesiac==5||miesiac==4)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/wiosna.jpg')";
    if(miesiac==8||miesiac==7||miesiac==6)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/lato.jpg')";
    if(miesiac==9||miesiac==11||miesiac==10)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/jesien.jpg')";
    if(miesiac==0||miesiac==1||miesiac==2)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/zima.jpg')";
    switch(miesiac)
    {
        case 0:
            miesiac = 'Styczeń';
            break;
        case 1:
            miesiac = 'Luty';
            break;
        case 2:
            miesiac = 'Marzec';
            break;
        case 3:
            miesiac = 'Kwiecień';
            break;
        case 4:
            miesiac = 'Maj';
            break;
        case 5:
            miesiac = 'Czerwiec';
            break;
        case 6:
            miesiac = 'Lipiec';
            break;
        case 7:
            miesiac = 'Sierpień';
            break;
        case 8:
            miesiac = 'Wrzesień';
            break;
        case 9:
            miesiac = 'Październik';
            break;
        case 10:
            miesiac = 'Listopad';
            break;
        case 11:
            miesiac = 'Grudzień';
            break;
    }
    switch(dzien)
    {
        case 0:

            dzien = 'Niedziela';
            var result= dzien.fontcolor("red");

            break;
        case 1:
            dzien = 'Poniedziałek';
            break;
        case 2:
            dzien = 'Wtorek';
            break;
        case 3:
            dzien = 'Środa';
            break;
        case 4:
            dzien = 'Czwartek';
            break;
        case 5:
            dzien = 'Piątek';
            break;
        case 6:
            dzien = 'Sobota';
            break;
    }
    document.getElementById("data").innerHTML = miesiac + " " + x.getFullYear();
    document.getElementById("dzien").innerHTML = liczb;
    if(dzien==0)
    {
        document.getElementById("tydzien").innerHTML = result;
    }
    else {document.getElementById("tydzien").innerHTML = dzien;}
    var b = 2021;
    var imie = new Date(b,0,22);
    if(x == imie)
    {
        b++;
        imie = (b,0,22)
    }
    var a = Math.ceil((Date.parse(imie) - Date.parse(x))/1000/60/60/24);
    document.getElementById("zostalo").innerHTML = "Zostało " + a + " dni do imienin <b>Mateusza</b>";

</script>
</body>
</html>

komentarz 11 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Proszę poprawić opis problemu zgodnie z regulaminem.

2 odpowiedzi

odpowiedź 12 października 2020 przez VBService Ekspert (255,840 p.)
wybrane 12 października 2020 przez chrystian

Najlepsza

Zmienna dzień zawiera numer dnia tygodnia (0 - niedziela, 1 - poniedziałek itd.), zwrócony przez metodę getDay() obiektu Date(),

var dzien = x.getDay();

więc nie możesz przypisać wartości stylu do liczby,

var result = dzien.fontcolor("red");

ponieważ style, można przypisać tylko do elementu html. (pomijając fakt, że fontColor -> document.execCommand() )
Masz div-a o id = 'tydzien' , więc można użyć tego div-a.

przez bezpośrednie dodanie stylu:

// <div id='tydzien'></div>

const day = today.getDay();
const week_day_name = document.getElementById('tydzien');
if (day == 0) week_day_name.style.color = 'red';

lub przez dodanie klasy:

<style>
.sunday {
  color: red;
}
</style>

. . .

<script>
  . . .
  if (day == 0) week_day_name.classList.add('sunday');
</script>

Jeżeli mogę Tobie coś zasugerować, to np.:

    if(miesiac==3||miesiac==5||miesiac==4)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/wiosna.jpg')";
    if(miesiac==8||miesiac==7||miesiac==6)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/lato.jpg')";
    if(miesiac==9||miesiac==11||miesiac==10)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/jesien.jpg')";
    if(miesiac==0||miesiac==1||miesiac==2)
        document.getElementById("kartka").style.backgroundImage = "url('poryroku/zima.jpg')";

const month = today.getMonth();
let season;

switch (true) {
  case inRange(month,3,5):
    season = 'wiosna';
    break;
  case inRange(month,6,8):
    season = 'lato';
    break;
  case inRange(month,9,11):
    season = 'jesien';
    break;
  case inRange(month,0,2):
    season = 'zima';
    break;
}

const calendar_card = document.getElementById('kartka');
calendar_card.style.backgroundImage = `url('poryroku/${season}.jpg')`;

function inRange(value,lower,upper) {
  return value >= lower &&  value <= upper;
}

kolejna sugestia, zamiast tego przydługiego switch-a

switch(miesiac)
    {
        case 0:
            miesiac = 'Styczeń';
            break;
        case 1:
            miesiac = 'Luty';
            break;
        case 2:
            miesiac = 'Marzec';
            break;
        case 3:
            miesiac = 'Kwiecień';
            break;
        case 4:
            miesiac = 'Maj';
            break;
        case 5:
            miesiac = 'Czerwiec';
            break;
        case 6:
            miesiac = 'Lipiec';
            break;
        case 7:
            miesiac = 'Sierpień';
            break;
        case 8:
            miesiac = 'Wrzesień';
            break;
        case 9:
            miesiac = 'Październik';
            break;
        case 10:
            miesiac = 'Listopad';
            break;
        case 11:
            miesiac = 'Grudzień';
            break;
    }

na, tablice

const months = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
const month_name = months[month];

to samo dla dni

const day = today.getDay();
const week = ['Niedziela','Poniedziałek','Wtorek','Środa',
              'Czwartek','Piątek','Sobota'];
const day_name = week[day];

Pełny kod zawierający sugestie CodePen

komentarz 12 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
edycja 12 października 2020 przez ScriptyChris

Fajne propozycje uproszczenia kodu.

Co do switcha po wartości true używającego funkcji inRange, to można pójść o krok dalej i stworzyć obiekt, którego kluczami będą np. zasięgi miesięcy pór roku, a wartościami ich nazwy. Wtedy switch można zamienić na odwołanie się do property obiektu poprzez wywołanie funkcji:

const month = today.getMonth();
const monthRangesMap = {
    '2-4': 'wiosna',
    '5-7': 'lato',
    '9-11': 'jesien',
    '12-1': 'zima',
};
const season = getSeasonFromMonth(month);

function getSeasonFromMonth(value) {
  const rangeKey = Object.keys(monthRangesMap).find(range => {
    const [min, max] = range.split('-');
    return value >= min && value <= max;
  });
  return monthRangesMap[rangeKey];
}

Na marginesie: metoda .getMonth zwraca liczbę reprezentującą miesiąc od 0 - 11 (co bywa mylące), więc (jeśli sam się nie pomyliłem w "obliczaniu" pór roku) powinieneś skorygować wartości min/max przekazywane do funkcji inRange w switchu. ;)

komentarz 12 października 2020 przez VBService Ekspert (255,840 p.)
edycja 12 października 2020 przez VBService

... (jeśli sam się nie pomyliłem w "obliczaniu" pór roku) ...

zagubił się sierpień - 8

const monthRangesMap = {
    '3-5': 'wiosna',
    '6-8': 'lato',
    '9-11': 'jesien',
    '0-2': 'zima',
};

Pokusiłbym sie o taki zapis, (bo niby dlaczego monthRangesMap nie może być częścią funkcji getSeasonByMonthName() )

const today = new Date();
const month = today.getMonth();
const season = getSeasonByMonthName(month);
// console.log(season);
 
function getSeasonByMonthName(value) {
  const monthRangesMap = {
    '3-5': 'wiosna',
    '6-8': 'lato',
    '9-11': 'jesien',
    '0-2': 'zima',
  };
  
  const rangeKey = Object.keys(monthRangesMap).find(range => {
    const [min, max] = range.split('-');
    return value >= min && value <= max;
  });
  
  return monthRangesMap[rangeKey];
}

komentarz 12 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

bo niby dlaczego monthRangesMap nie może być częścią funkcji

A jaki jest sens przy każdym wywołaniu funkcji na nowo tworzyć obiekt, który zawsze będzie mieć tę samą zawartość i nie będzie na nim wykonanych żadnych akcji z efektami ubocznymi (taki typowy obiekt read-only)?

Jeśli iść w tę stronę, to można użyć IIFE, żeby domknąć obiekt i zwrócić funkcję getSeasonByMonthName - wtedy monthRangesMap będzie niedostępne na zewnątrz, ale stworzy się tylko raz; albo stworzyć z tego klasę z polem monthRangesMap i metodą getSeasonByMonthName - tylko po co to robić, gdy działa się na obiekcie typu read-only?

1	komentarz 12 października 2020 przez VBService Ekspert (255,840 p.) W tym kontekście funkcja jest wywoływana raz, po załadowaniu html-a - tak się domyślam. , ale masz rację, z punktu widzenia "dobrych praktyk pisania kodu", monthRangesMap powinna być tylko raz "przypisana" przez silnik js-a.

komentarz 12 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

W sumie nie patrzyłem na liczbę wywołań tej funkcji, więc jeśli w tym przypadku jest wołana raz, to można zrobić tak jak napisałeś. Ale gdyby np. użyć jej do odczytu pór roku dla wybranych kilku miesięcy, to lepiej żeby ten czysto słownikowy obiekt (chyba tak się nazywają obiekty read-only) nie był tworzony za każdym wywołaniem.

komentarz 12 października 2020 przez chrystian Gaduła (4,780 p.)

dziekuje

komentarz 13 października 2020 przez VBService Ekspert (255,840 p.)
edycja 13 października 2020 przez VBService

Nie miałem okazji, jeszcze "tworzyć" tego typu IIFE. Proszę o ewentualną ocenę poprawności, nie chce tworzyć osobnego wpisu,

Jeśli iść w tę stronę, to można użyć IIFE, żeby domknąć obiekt i zwrócić funkcję getSeasonByMonthName ...

bo wydaję mi się, że jest to pewną formą kontynuacji tego wpisu.

const getSeasonByMonthName = (() => {
  const monthRangesMap = {
    '3-5':  'wiosna',
    '6-8':  'lato',
    '9-11': 'jesien',
    '0-2':  'zima',
  };
  
  return function(value) {
  	const rangeKey = Object.keys(monthRangesMap).find(range => {
      const [min, max] = range.split('-');
      return value >= min && value <= max;
 	});
    
    return monthRangesMap[rangeKey];
  };
})();

const today  = new Date();
const month  = today.getMonth();
const season = getSeasonByMonthName(month);
console.log(season);

1	komentarz 13 października 2020 przez ScriptyChris Mędrzec (190,190 p.) Tak, o to mi chodziło. ;)

odpowiedź 12 października 2020 przez hoktaur Pasjonat (22,250 p.)

mimo regulaminu :) sry @ScriptyChris

masz:

	let tydzien = document.getElementById("tydzien");
	tydzien.style = (!dzien ? 'color: red': '');
	
    switch(dzien)
    {
        case 0:
            dzien = 'Niedziela';
            break;
        case 1:
            dzien = 'Poniedziałek';
            break;
        case 2:
            dzien = 'Wtorek';
            break;
        case 3:
            dzien = 'Środa';
            break;
        case 4:
            dzien = 'Czwartek';
            break;
        case 5:
            dzien = 'Piątek';
            break;
        case 6:
            dzien = 'Sobota';
            break;
    }
    document.getElementById("data").innerHTML = miesiac + " " + x.getFullYear();
    document.getElementById("dzien").innerHTML = liczb;
	tydzien.innerHTML = dzien;

co zrobiłem

1. przypisałem sobie id='tydzien' do zmiennej 'tydzien' aby nie przeszukiwać wiele razy DOM'a :)

2. niedziela ma 0 więc dodałem negację do dnia wtedy 0 jest 1 a 1, 2, 3, 4.... jest 0 więc nie potrzebujemy nic więcej w warunku :) i ustaliłem styl koloru jeszcze przed zmianą z liczby na dzień

3. potem do zmiennej 'tydzien' przypisałem nazwę dnia

4. rozważ czy dni tygodnia nie przypisać do tablicy

let nazwyDni = ['niedziela', 'poniedziałek', 'wtorek'...];

wtedy nie potrzebujesz warunku tylko

tydzien.innerHTML = nazwyDni[dzien];