Rubriky
HTML

HTML – Vánoční stromeček

Vytvořte HTML stránku s vánočním stromečkem s pomocí následujícího kódu.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vánoční stromeček</title>
    <style>
        .kontejner {
            position: relative;
        }

        img {
            position: absolute;
            width: 400px;
        }

        button {
            position: absolute;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            border: 0;
        }
        #koulicka1 {
            background-color: blue;
            top: 30px;
            left: 150px;
        }
    </style>

</head>

<body>
    <h1>Stromeček</h1>
    <div class="kontejner">
        <img src="strom.jpg" alt="Stromeček">
        <button id="koulicka1" class="koulicka"></button>

    </div>
</body>

</html>

Použít můžete tento stromeček, nebo si nakreslete svůj dle libosti. https://krouzek.epavel.eu/wp-content/uploads/2021/12/strom.jpg strom.jpg

Umístěne na stromek více barevných kouliček a nezapomeňte změnit id:

<button id="koulicka2" class="koulicka"></button>

Každá koulička by měla mít odpovídající styl svázaný pomocí jedinečného id:

        #koulicka2 {
            top: 200px;
            left: 200px;
            background-color: sandybrown;
        }

Poté vytvořte další tlačítka na zhasnutí a rozsvícení stromečku. Zhasnutí budeme provádět pomocí stylu visibility:
https://www.w3schools.com/cssref/pr_class_visibility.asp

Tlačítko na zhasnutí:

<button id="off" onclick="zhasni()">Zhasni</button>

Nezapomeňte tlačítku vytvořit styl s vhodnou pozicí (třeba pod stromečkem).

Vložte také tlačítko na Rozvícení.

Javascriptový kód s funkcemi na zhasnutí a rozsvícení:

    <script>

        function zhasni() {
            var koulicky = document.getElementsByClassName("koulicka");

            for (var i = 0; i < koulicky.length; i++) {
                koulicky[i].style.visibility = "hidden";
            }
        }

        function rozsvit() {
            var koulicky = document.getElementsByClassName("koulicka");

            for (var i = 0; i < koulicky.length; i++) {
                koulicky[i].style.visibility = "visible";
            }
        }
    </script>

Zkuste místo dvou funkcí: zhasni(), rozsvit() napsat jen jednu s parametrem: zmenViditelnost(parametr)

Jako bonus si můžete ke stromečku přidat sněžení:

<script src="https://piskvorky.epavel.eu/script/snow.js"></script>