add js style

2 years ago · c1c97a14e8
3 changed files with 74 additions and 0 deletions
--- a/05/app.js
+++ b/05/app.js
@ -0,0 +1,32 @@
+
+
+function dyncolor() {
+    let color = document.getElementById("tcolor").value;
+    console.log(color);
+    document.getElementById("ltext").style.color = color;
+}
+
+function bgcolor() {
+    let color = document.getElementById("bcolor").value;
+    console.log(color);
+    document.getElementById("ltext").style.backgroundColor = color;
+}
+
+
+function changeScolor() {
+    let colorList = document.getElementById("scolor"); //načteme seznam barev
+    let selectColor = colorList.selectedIndex; //načteme vybraný index (pořadí)
+    let futureColor = colorList.options[selectColor].value; //načteme hodnotu vybraného indexu
+
+    document.getElementById("ltext").style.color = futureColor;
+    
+}
+
+function changeFont() {
+    let fontList = document.getElementById("sfont"); //načteme seznam fontů
+    let selectFont = fontList.selectedIndex; //načteme vybraný index (pořadí)
+    let futureFont = fontList.options[selectFont].value; //načteme hodnotu vybraného indexu
+
+    document.getElementById("ltext").style.fontFamily = futureFont;
+    
+}
--- a/05/index.html
+++ b/05/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JS DOM stylizace</title>
+    <link rel="stylesheet" href="style.css">
+
+    <link href="https://fonts.googleapis.com/css2?family=Climate+Crisis&family=Tilt+Prism&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>JS DOM Stylizace</h1>   
+    <p id="ltext"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic error unde quas repellat sunt sapiente quos facilis quia recusandae dolores sequi, saepe nostrum corrupti earum dolorem esse doloribus nemo cum!</p>
+    <br>
+    <select name="scolor" id="scolor" onchange="changeScolor()">
+        <option value="black">černá</option>
+        <option value="red">červená</option>
+        <option value="green">zelená</option>
+        <option value="blue">modrá</option>
+        <option value="yellow">žlutá</option>
+    </select>
+
+    <select name="sfont" id="sfont" onchange="changeFont()">
+        <option value="Arial">Arial</option>
+        <option value="Courier New">Courier New</option>
+        <option value="Brush Script MT">Brush Script MT</option>
+        <option value="Climate Crisis">Climate Crisis</option>
+        <option value="Tilt Prism">Tilt Prism</option>
+    </select>
+
+    <br>
+    <input type="color" name="tcolor" id="tcolor" onchange="dyncolor()" value="#000000">
+    <input type="color" name="bcolor" id="bcolor" onchange="bgcolor()" value="#FFFFFF">
+                                                                <!-- #RGB #RRGGBB  -->
+
+   <script src="app.js"></script>
+</body>
+</html>
--- a/05/style.css
+++ b/05/style.css
@ -0,0 +1,3 @@
+.domblue {
+    color: red;
+}