krouzek:uloha_clovece_nezlob_se [Kroužek Javascriptu]

Toto je starší verze dokumentu!

První verze - zobrazení kruhu

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8"/>
    <title>Člověče nezlob se</title>
 
    <style>
        #herniPlocha {
            position: relative
        }
 
        .policko {
            border: 1px solid black;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
        }
    </style>
 
</head>
 
<body>
<div id="herniPlocha"></div>
 
<script>
 
    const pocetPolicek = 40
    const sirkaPlochy = 400
    const vyskaPlochy = 400
 
    for (let i = 0; i < pocetPolicek; i++) {
        const uhel = i * (2 * Math.PI) / pocetPolicek
        const policko = document.createElement("div")
        policko.classList.add("policko")
        const x = Math.cos(uhel) * sirkaPlochy / 2 + sirkaPlochy / 2
        const y = Math.sin(uhel) * sirkaPlochy / 2 + sirkaPlochy / 2
        policko.style.transform = `translate(${x}px,${y}px)`
        document.getElementById('herniPlocha').append(policko)
    }
 
</script>
</body>
</html>