js form

6 days ago · f084e693bc
2 changed files with 72 additions and 0 deletions
--- a/08_js_form/index.html
+++ b/08_js_form/index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</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>
+    <label for="kouzlo"></label>
+    <input type="number" name="kouzlo" id="kouzlo">
+    <button onclick="magicCube()">Kouzlo s kostkou</button>
+    <button onclick="magicTriangle()">Kouzlo s trojúhelníkem</button>
+
+    <div id="formResultsFromJS"></div>
+
+
+
+    <script src="index.js"></script>
+</body>
+</html>
--- a/08_js_form/index.js
+++ b/08_js_form/index.js
@ -0,0 +1,35 @@
+document.getElementById("title").innerText = "JS DOM"
+console.log("index.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 = "<h5> datum: " + document.getElementById("datum").value + "</h5>";
+    msg = "<p>" + document.getElementById("zprava").value + "</p>";
+    
+    document.getElementById("formResultsFromJS").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("formResultsFromJS").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+1; j++) {
+            text += "*"
+        }
+        text+= "<br>"
+    }
+    document.getElementById("formResultsFromJS").innerHTML = text
+}