dom

1 week ago · b54affe8cc
4 changed files with 82 additions and 0 deletions
--- a/07_js_css_dom/css/style.css
+++ b/07_js_css_dom/css/style.css
@ -0,0 +1,3 @@
+h1 {
+    color: red
+}
--- a/07_js_css_dom/index.html
+++ b/07_js_css_dom/index.html
@ -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>
--- a/07_js_css_dom/js/changeFont.js
+++ b/07_js_css_dom/js/changeFont.js
@ -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
+}
--- a/07_js_css_dom/js/index.js
+++ b/07_js_css_dom/js/index.js
@ -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;
+
+}