4 changed files with 82 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||
|
h1 { |
||||
|
color: red |
||||
|
} |
@ -0,0 +1,47 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Úvod do JS+CSS a DOM</title> |
||||
|
<link rel="stylesheet" href="css/style.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<h1>Úvod do JS+CSS a DOM</h1> |
||||
|
<p id="ltext" style="color:black">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis autem eum beatae! Cum sapiente alias minima nesciunt porro ipsam, laboriosam quis hic assumenda aspernatur suscipit, voluptates ipsa nam laborum! Est. |
||||
|
Rem suscipit, facere, debitis sint quis amet porro recusandae quasi quas sapiente nihil laboriosam, explicabo ab? Iure nemo nulla quisquam dolorum ut facere quaerat ab nostrum, omnis molestias incidunt fugiat? |
||||
|
Inventore, quas a. Accusamus commodi minus, animi ratione perspiciatis voluptatum, adipisci eius fugit sit suscipit nesciunt? Repellat quia sit repudiandae distinctio quam voluptas, laboriosam aut ipsum, esse quisquam amet veritatis! |
||||
|
Omnis numquam fugiat voluptas nesciunt iure doloribus dicta natus voluptates sunt, illo accusantium magnam at earum a corporis exercitationem vitae ducimus ea ex minus repudiandae nam facilis. Debitis, dolorum nostrum. |
||||
|
Ullam ipsam soluta modi! Tenetur delectus blanditiis recusandae, optio beatae repudiandae odio nisi non corrupti in dolor quasi sit ducimus ipsum hic quos ipsa consectetur expedita. Esse facilis voluptatibus eius.</p> |
||||
|
<br> |
||||
|
<label for="scolor">Vyber si barvu ze seznamu:</label> |
||||
|
<select name="scolor" id="scolor" onchange="changeSColor()" > |
||||
|
<option value="black">černá</option> |
||||
|
<option value="red">červená</option> |
||||
|
<option value="blue">modrá</option> |
||||
|
<option value="green">zelená</option> |
||||
|
<option value="yellow">žlutá</option> |
||||
|
</select> |
||||
|
<br> |
||||
|
<label for="sfont">Vyber si font:</label> |
||||
|
<select name="sfont" id="sfont" onchange="changeFont()"> |
||||
|
<option value="Arial">Arial</option> |
||||
|
<option value="Courier New">Courier New</option> |
||||
|
<option value="Comic Sans MS">Comic Sans MS</option> |
||||
|
<option value="Agency FB">Agency FB</option> |
||||
|
<option value="Bell MT">Bell MT</option> |
||||
|
</select> |
||||
|
|
||||
|
|
||||
|
<br> |
||||
|
<label for="tcolor">Barva Textu:</label> |
||||
|
<input type="color" name="tcolor" id="tcolor" |
||||
|
onchange="dynColor()" value="#000000"> |
||||
|
<label for="bcolor">Barva BG:</label> |
||||
|
<input type="color" name="bcolor" id="bcolor" |
||||
|
onchange="dynBGColor()" value="#FFFFFF"> |
||||
|
|
||||
|
<script src="js/index.js"></script> |
||||
|
<script src="js/changeFont.js"></script> |
||||
|
</body> |
||||
|
</html> |
@ -0,0 +1,10 @@ |
|||||
|
//parametr s "výchozí hodnotou" nám dovoluje "dobrovolně" napsat jinou hodnotu než je výchozí
|
||||
|
//např. tato funkce mění font dle seznamu a vstup je ID seznamu z kterého bere vybranou položku ze seznamu
|
||||
|
function changeFont(htmllist ="sfont") { |
||||
|
console.warn(htmllist); |
||||
|
let fontList = document.getElementById(htmllist) |
||||
|
let selectFont = fontList.selectedIndex; |
||||
|
let nextFont = fontList.options[selectFont].value |
||||
|
console.warn(nextFont) |
||||
|
document.getElementById("ltext").style.fontFamily = nextFont |
||||
|
} |
@ -0,0 +1,22 @@ |
|||||
|
console.log("index.js spuštěný") |
||||
|
|
||||
|
function dynColor() { |
||||
|
let color = document.getElementById("tcolor").value; |
||||
|
console.log(color) |
||||
|
document.getElementById("ltext").style.color = color |
||||
|
} |
||||
|
|
||||
|
function dynBGColor() { |
||||
|
let color = document.getElementById("bcolor").value; |
||||
|
console.log(color) |
||||
|
document.getElementById("ltext").style.backgroundColor = color |
||||
|
} |
||||
|
|
||||
|
function changeSColor() { |
||||
|
let colorList = document.getElementById("scolor");//načti seznam barev
|
||||
|
let selectColor = colorList.selectedIndex; //načteme vybraný index (pozici)
|
||||
|
let nextColor = colorList.options[selectColor].value; // načteme hodnotu z vybraného indexu
|
||||
|
|
||||
|
document.getElementById("ltext").style.color = nextColor; |
||||
|
|
||||
|
} |
Loading…
Reference in new issue