Rozdíly

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

--- krouzek:uloha:barevna_cisla [2024/04/17 15:07] – vytvořeno admin
+++ krouzek:uloha:barevna_cisla [2024/04/17 16:54] (aktuální) – admin
@@ Řádek 5: / Řádek 5: @@
 ) čísla udělejte elegantní velikost, font, odstup od ostatních, případně i okraj (border) - CSS
-)
+) Změňte číslům barvu
+) Změňte jen některým číslům barvu - například 7, 13 a 18 budou červeně a ostatní modře
+) nastavte sudým číslům modrou a lichým žlutou barvu
+) 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
+) rozšíření: umožněte uživateli změnit barvu zadaného čísla - např vstup číslo+barva, tlačítko
+) rozšíření: na začátku číslům nastavte náhodnou barvu (hledejte random rgb color javascript)
+<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>
+    <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>
+</code>