05 form js

7 months ago · 14d074043e
2 changed files with 71 additions and 0 deletions
--- a/05/index.html
+++ b/05/index.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML DOM</title>
+</head>
+<body>
+    <h1 id="title">HTML DOM</h1>
+    <div>
+        <label for="jmeno">Jméno</label>
+        <input type="text" name="jmeno" id="jmeno">
+        <br>
+        <label for="email">E-mail</label>
+        <input type="email" name="email" id="email">
+        <br>
+        <label for="datum">Datum</label>
+        <input type="date" name="datum" id="datum">
+        <br>
+        <label for="zprava">Zpráva:</label>
+        <textarea name="zprava" id="zprava"></textarea>
+        <br>
+        <button onclick="formResult()">ZOBRAZIT</button>
+    </div>
+    <hr>
+    <label for="kouzlo"></label>
+    <input type="number" name="kouzlo" id="kouzlo">
+    <button onclick="magicCube()">Kouzlo s kostkou</button>
+    <button onclick="magicTriangle()">Kouzlo s trojuhelnikem</button>
+
+    <div id="formResultFromJS" style="margin-left: 20px;"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
--- a/05/script.js
+++ b/05/script.js
@ -0,0 +1,36 @@
+document.getElementById("title").innerText = "JS DOM";
+console.log("script.js started")
+
+function formResult() {
+    let jmeno, email, datum, msg;
+    jmeno = "<h2> Jméno:"+document.getElementById("jmeno").value +"</h2>";
+    email = "<h3>E-mail:"+document.getElementById("email").value + "</h3>";
+    datum = "<h4>Datum zprávy:"+document.getElementById("datum").value + "</h4>";
+    msg = "<p>Text zprávy: "+document.getElementById("zprava").value+"</p>";
+
+    document.getElementById("formResultFromJS").innerHTML = jmeno + email + datum + msg;
+}
+
+function magicCube() {
+    let n = Number(document.getElementById("kouzlo").value);
+    let text = "<h1>MAGIC</h1>"
+    for (let i = 0; i < n; i++) {
+        for (let j = 0; j < n; j++) {
+            text += "*";            
+        }     
+        text+="<br>"  
+    }
+    document.getElementById("formResultFromJS").innerHTML = text;    
+}
+
+function magicTriangle() {
+    let n = Number(document.getElementById("kouzlo").value);
+    let text = "<h1>MAGIC</h1>"
+    for (let i = 0; i < n; i++) {
+        for (let j = 0; j <= i; j++) {
+            text += "*";            
+        }     
+        text+="<br>"  
+    }
+    document.getElementById("formResultFromJS").innerHTML = text;    
+}