opravit tlačítka
This commit is contained in:
Lukáš
commit
f1e358ac54
27
1zaokrouhleni.js
Normal file
27
1zaokrouhleni.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
// Objekt Math
|
||||||
|
// console.log(Math.PI);
|
||||||
|
// console.log(Math.E); // erolovo číslo
|
||||||
|
// console.log(Math.SQRT1_2); // druhá odmocnina
|
||||||
|
|
||||||
|
// console.log(Math.round(5.8)); // zaokrouhlování na celáčísla
|
||||||
|
|
||||||
|
// console.log(Math.ceil(3.2)); // zaokrouhlení nahoru (třeba stránkování se vždy zaokrouhluje na horu) (ceil = strop)
|
||||||
|
|
||||||
|
// console.log(Math.floor(2.8)); // zaokrouhlení dolů na celé číslo (Floor = podlaha)
|
||||||
|
|
||||||
|
// const number = 15.1255;
|
||||||
|
// console.log(parseFloat(number.toFixed(3))); // určí počet na kolik čísel proměnou zaokrouhlit , parseFlout string převede na číslo
|
||||||
|
|
||||||
|
// Náhoda
|
||||||
|
// console.log(Math.random()); // Náhpdné číslo od 0 do 1
|
||||||
|
// console.log(Math.random());
|
||||||
|
|
||||||
|
// console.log(Math.random() * 6); // Náhodné číslo od 0 do 6 nezaokrůhloné
|
||||||
|
// console.log(Math.random() * 6);
|
||||||
|
|
||||||
|
// console.log(Math.ceil(Math.random() * 6));
|
||||||
|
// console.log(Math.ceil(Math.random() * 6)); // Náhodné číslo od 0 do 6 zaokrouhlené
|
||||||
|
|
||||||
|
// console.log(Math.floor(Math.random() * 6) + 1); // Náhodné číslo od 1 do 6
|
||||||
|
// console.log(Math.floor(Math.random() * 6) + 1);
|
||||||
|
// console.log(Math.floor(Math.random() * 6) + 1);
|
||||||
5
colors.css
Normal file
5
colors.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
:root {
|
||||||
|
--special-black: #141414;
|
||||||
|
--special-red: #e50914;
|
||||||
|
--special-white: #e5e5e5;
|
||||||
|
}
|
||||||
BIN
img/default.jpg
Normal file
BIN
img/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
24
index.html
Normal file
24
index.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<section class="cube">
|
||||||
|
<button class="btn">Hod kostkou</button>
|
||||||
|
<img src="img/default.jpg" class="cube-image" alt="" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="reset-button">
|
||||||
|
<a href="index.html">Resetovat hru</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="result"></section>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
40
script.js
Normal file
40
script.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
const btn = document.querySelector(".btn");
|
||||||
|
const cubeImage = document.querySelector(".cube-image");
|
||||||
|
const resultSection = document.querySelector(".result");
|
||||||
|
|
||||||
|
let counter = 0;
|
||||||
|
let clicks = 0;
|
||||||
|
|
||||||
|
//Function
|
||||||
|
const paragraphToWebsite = (paragraphContent, whereToAdd) => {
|
||||||
|
const p = document.createElement("p");
|
||||||
|
p.textContent = paragraphContent;
|
||||||
|
whereToAdd.append(p);
|
||||||
|
};
|
||||||
|
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const randomNumber = Math.floor(Math.random() * 6) + 1; // čísla jsou v názvu obrázku
|
||||||
|
cubeImage.src = "img/" + randomNumber + ".jpg";
|
||||||
|
// counter = counter + randomNumber;
|
||||||
|
counter += randomNumber; // zkrácený zápis
|
||||||
|
|
||||||
|
resultSection.textContent = ""; // vyčistí stránku
|
||||||
|
paragraphToWebsite(counter, resultSection);
|
||||||
|
|
||||||
|
// Počet kliknutí - počet pokusů
|
||||||
|
clicks += 1;
|
||||||
|
|
||||||
|
// přídání výherního textu
|
||||||
|
if (clicks < 5 && counter < 20) {
|
||||||
|
// Házejte dál
|
||||||
|
paragraphToWebsite("Házejte dál", resultSection);
|
||||||
|
} else if (clicks <= 5 && counter >= 20) {
|
||||||
|
// Vyhráli jste
|
||||||
|
paragraphToWebsite("Vyhráli jste", resultSection);
|
||||||
|
btn.style.visibility = "hidden";
|
||||||
|
} else if (clicks == 5 && counter < 20) {
|
||||||
|
// Prohráli jste
|
||||||
|
paragraphToWebsite("Prohráli jste", resultSection);
|
||||||
|
btn.style.visibility = "hidden";
|
||||||
|
}
|
||||||
|
});
|
||||||
58
style.css
Normal file
58
style.css
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
@import url("colors.css");
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--special-black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cube {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
color: var(--special-white);
|
||||||
|
background-color: linear-gradient(#e50914, black);
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
/* Nastaví pevnou výšku tlačítka */
|
||||||
|
height: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result p {
|
||||||
|
color: var(--special-white);
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button a {
|
||||||
|
color: #e5e5e5;
|
||||||
|
background-color: linear-gradient(black, #e50914);
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cube-image {
|
||||||
|
width: 122px;
|
||||||
|
height: 122px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user