opravit tlačítka
This commit is contained in:
Lukáš
commit
f1e358ac54
|
|
@ -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);
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
:root {
|
||||
--special-black: #141414;
|
||||
--special-red: #e50914;
|
||||
--special-white: #e5e5e5;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
|
|
@ -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>
|
||||
|
|
@ -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";
|
||||
}
|
||||
});
|
||||
|
|
@ -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