<!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>
<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+")"
}
const HORNI_MEZ = 1000
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(barvyCisel[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>"
}
</script>
</body>
</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>
</html>