Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- krouzek:uloha:barevna_cisla2 [2024/04/24 15:48] – admin
+++ krouzek:uloha:barevna_cisla2 [2024/04/24 16:37] (aktuální) – admin
@@ Řádek 95: / Řádek 95: @@
                 //document.getElementById("output").innerHTML += "<div class='cislo cislo"+cislo+"'>" + cislo + "</div>"
             }
+    </script>
+</body>
+</html>
+</code>
+=== Formulář na změnu ===
+<code html>
+<!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>
+</head>
+<body>
+    <button onclick="vygeneruj()">Vygeneruj</button>
+    <div>
+        <p><label for="cislo">Číslo</label>
+            <input id="cislo" name="cislo" type="number"></p>
+        <p><label for="barva">Barva</label>
+            <input id="barva" name="barva"></p>
+            <p><label for="barvaPozadi">Barva pozadí</label>
+                <input id="barvaPozadi" name="barvaPozadi"></p>
+        <button onclick="uloz()">Ulož</button>
+    </div>
+    <div id="output"></div>
+    <script>
+        const barvyPozadiCisel = []
+        const barvyCisel = []
+        barvyPozadiCisel[15] = 'red'
+        barvyPozadiCisel[16] = 'green'
+        barvyCisel[15] = 'white'
+        barvyCisel[16] = 'white'
+        function randomColor(){
+            const red = Math.floor(Math.random()*256)
+            const green = Math.floor(Math.random()*256)
+            const blue = Math.floor(Math.random()*256)
+            return "rgb("+red+","+green+","+blue+")"
+        }
+        function uloz(){
+            // Načti hodnoty z formuláře
+            const cislo = parseInt(document.getElementById("cislo").value)
+            const barva = document.getElementById("barva").value
+            const barvaPozadi = document.getElementById("barvaPozadi").value
+            console.log(`${cislo} bude ${barva} a pozadi ${barvaPozadi}`)
+            barvyCisel[cislo] = barva
+            barvyPozadiCisel[cislo] = barvaPozadi
+        }
+        function vygeneruj() {
+            // Smaz co tam je
+            document.getElementById("output").innerHTML = ""
+            const HORNI_MEZ = 20
+                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)
+                    if(barvyPozadiCisel[cislo]) {
+                        obalkaCisla.style.color = barvyCisel[cislo]
+                    } else {
+                        obalkaCisla.style.color = randomColor()
+                    }
+                    if(barvyPozadiCisel[cislo]) {
+                        obalkaCisla.style.backgroundColor = barvyPozadiCisel[cislo]
+                    } else {
+                        obalkaCisla.style.backgroundColor = randomColor()
+                    }
+                    document.getElementById("output").append(obalkaCisla)
+                    //document.getElementById("output").innerHTML += "<div class='cislo cislo"+cislo+"'>" + cislo + "</div>"
+                }
+        }
+        vygeneruj()
     </script>
 </body>