You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.7 KiB
77 lines
3.7 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="css/bootstrap.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="display-1 text-center">Zvětšovadlo</h1>
|
|
<!-- div.text-center>(button.btn.btn-primary*3+p.lead) -->
|
|
<div class="text-center">
|
|
<button onclick="pridat()" class="btn btn-primary">Přidat</button>
|
|
<button onclick="odebrat()" class="btn btn-primary">Odebrat</button>
|
|
<button onclick="resetovat()" class="btn btn-primary">Resetovat</button>
|
|
<p class="lead"><span id="cislo">_CISLO_</span>px</p>
|
|
<br>
|
|
<h5>Barvy</h5>
|
|
<div class="mb-2">
|
|
<lable class="form-labe small">Barva Textu</lable>
|
|
<input type="color" class="form-control form-control-color w-100"
|
|
id="colorPicker" oninput="zmenBarvu(this.value)">
|
|
</div>
|
|
<div class="mb-2">
|
|
<lable class="form-labe small">Barva Pozadí</lable>
|
|
<input type="color" class="form-control form-control-color w-100"
|
|
id="bgPicker" oninput="zmenPozadi(this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<p id="big-text">
|
|
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos qui aperiam quia fugit vitae libero harum deserunt animi doloremque fugiat accusantium facere culpa aspernatur, corporis officia laudantium non itaque voluptas.<br>
|
|
Ipsa nesciunt explicabo dolore similique eos cumque qui a, velit laboriosam sit fuga vitae cum sint harum, sed beatae excepturi autem officia saepe illo deleniti consequuntur. Dolorum eaque id laborum!<br>
|
|
Perspiciatis tempore quibusdam ut culpa nihil voluptates reiciendis. Quibusdam commodi illo nesciunt consequuntur aperiam. Qui ea tempore officiis possimus corporis. Cupiditate molestiae quisquam aliquid, sunt harum dolores amet sed magnam.<br>
|
|
Tempore officiis eaque cum sapiente. Natus iste, exercitationem aliquid iure provident fugiat dicta inventore accusantium et veniam sequi architecto sunt minima laborum, libero molestias nihil reiciendis, alias distinctio vel nemo?<br>
|
|
Veritatis natus iusto dicta in ab sequi, eligendi ipsam quam, aspernatur repellendus non dolores sint eum debitis quisquam dolorum porro labore explicabo quis quos expedita veniam vitae alias. Asperiores, quibusdam!<br>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
var defaultVal = 30;
|
|
const textElement = document.getElementById("big-text");
|
|
const cisloDisplay = document.getElementById("cislo")
|
|
function formatText(x) {
|
|
cisloDisplay.innerHTML = x;
|
|
textElement.style.fontSize = x+"px";
|
|
console.log("Formátoval jsem text na "+x+"px");
|
|
}
|
|
function pridat() {
|
|
var x = cisloDisplay.innerHTML;
|
|
x = parseInt(x)+1;
|
|
formatText(x);
|
|
}
|
|
function odebrat() {
|
|
var x = cisloDisplay.innerHTML;
|
|
x = parseInt(x)-1;
|
|
formatText(x);
|
|
}
|
|
function zmenBarvu(barva) {
|
|
textElement.style.color = barva;
|
|
}
|
|
function zmenPozadi(barva) {
|
|
textElement.style.backgroundColor = barva;
|
|
}
|
|
function resetovat(){
|
|
cisloDisplay.innerHTML = defaultVal;
|
|
textElement.style.fontSize = defaultVal+"px";
|
|
textElement.style.color = "#000000";
|
|
textElement.style.backgroundColor = "transparent"
|
|
}
|
|
resetovat();
|
|
</script>
|
|
<script src="js/bootstrap.bundle.js"></script>
|
|
</body>
|
|
</html>
|