krouzek:uloha:barevna_cisla [Kroužek Javascriptu]

Úloha: Barevná čísla

1) vypište na stránku čísla od 1 do 20. Umožněte konfiguraci horní meze (= vypisujte javascriptem)

2) čísla udělejte elegantní velikost, font, odstup od ostatních, případně i okraj (border) - CSS

3) Změňte číslům barvu

4) Změňte jen některým číslům barvu - například 7, 13 a 18 budou červeně a ostatní modře

5) nastavte sudým číslům modrou a lichým žlutou barvu

6) jak implementovat, abyste pro každé číslo měli jinou barvu? if-else-if-else je možnost, ale lze použít i pole barev kdy indexy odpovídají číslům

7) rozšíření: umožněte uživateli změnit barvu zadaného čísla - např vstup číslo+barva, tlačítko

8) rozšíření: na začátku číslům nastavte náhodnou barvu (hledejte random rgb color javascript)

<!DOCTYPE html>
<html lang="cs">
 
<head>
    <meta charset="utf-8" />
    <title>Čísla</title>
    <style>
        .cislo {
            border: 1px solid black;
            padding: 1rem;
            display: inline-block;
            margin: 2rem;
            color: purple;
            background-color: greenyellow;
            font-size: 40pt;
            font-weight: bold;
            font-family: "Times New Roman", serif;
            font-weight: bold;
            letter-spacing: 0em;
            line-height: 120%;
            text-shadow: red 0px 0px 10px, yellow 1px 1px 1px;
            word-spacing: 0.2em;
            text-transform: uppercase;
            -webkit-text-stroke-width: 2px;
            -webkit-text-stroke-color: black;
        }
 
        .cislo2 {
            color: blue;
            background-color: pink;
        } 
 
        .cislo3 {
            color: rgb(200, 100, 255);
            background-color: yellow;
        }
 
        .cislo4 {
            color: rgb(200, 100, 255);
            background-color: red;
            -webkit-text-stroke-color: pink;
        }
 
        .cislo5 {
            color: rgb(30, 205, 30);
            background-color: rgb(38, 12, 12);
            -webkit-text-stroke-color: white;
        }
    </style>
    <script>
        const HORNI_MEZ = 20
 
        setTimeout(function () {
            for (let cislo = 1; cislo <= HORNI_MEZ; cislo++) {
                const obalkaCisla = document.createElement("div")
                obalkaCisla.innerHTML = cislo
                obalkaCisla.classList.add("cislo")
                obalkaCisla.classList.add("cislo"+cislo)
                document.getElementById("output").append(obalkaCisla)
 
                //document.getElementById("output").innerHTML += "<div class='cislo cislo"+cislo+"'>" + cislo + "</div>"
 
            }
        }, 0)
    </script>
</head>
<body>
    <div id="output"></div>
</body>
 
</html>