add form and magic

2 years ago · dc7c1cafb4
2 changed files with 73 additions and 0 deletions
--- a/04/app.js
+++ b/04/app.js
@ -0,0 +1,35 @@
+document.getElementById("title").innerText = "JS DOM"
+
+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 napsání zprávy: "+document.getElementById("datum").value + "</h4>";
+    msg = "<p>Text zprávy: "+document.getElementById("msg").value + "</p>";
+
+    document.getElementById("formResultForJS").innerHTML = jmeno + email + datum + msg;
+
+}
+
+function magicCube(){
+    let n = Number(document.getElementById("kouzlo").value);
+    let text = "<h1>MAGIC</h1>"; // text je prázný
+    for (let i = 0; i < n; i++) { //externí cyklus - řádky
+        for (let j=0; j < n; j++){ //interní cyklus - sloupce
+            text += "*";
+        }
+        text += "<br>";
+    }
+    document.getElementById("formResultForJS").innerHTML = text;
+}
+function magicTriangle(){
+    let n = Number(document.getElementById("kouzlo").value);
+    let text = "<h1>MAGIC</h1>"; // text je prázný
+    for (let i = 0; i < n; i++) { //externí cyklus - řádky
+        for (let j = 0; j <= i; j++){ //interní cyklus - sloupce
+            text += "*";
+        }
+        text += "<br>";
+    }
+    document.getElementById("formResultForJS").innerHTML = text;
+}
--- a/04/index.html
+++ b/04/index.html
@ -0,0 +1,38 @@
+<!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>Document</title>
+</head>
+<body>
+    <h1 id="title">JavaScript HTML DOM</h1>
+
+    <div style="margin-left: 20px;">
+        <label for="jmeno">Jméno:</label>
+        <input type="text" name="jmeno" id="jmeno" onchange="formResult()"><br>
+
+        <label for="email">E-mail:</label>
+        <input type="email" name="email" id="email" onchange="formResult()"><br>
+
+        <label for="datum">Datum:</label>
+        <input type="date" name="datum" id="datum" onchange="formResult()"><br>
+
+        <label for="msg">Zpráva:</label>
+        <textarea name="msg" id="msg" cols="30" rows="10" onchange="formResult()"></textarea>
+        <br>
+
+        <button onclick="formResult()">Zobrazit</button>
+    </div>
+    <hr>
+    <label for="kouzlo">kouzlo</label>
+    <input type="number" name="kouzlo" id="kouzlo">
+    <button onclick="magicCube()">MagicCube</button>
+    <button onclick="magicTriangle()">magicTriangle</button>
+
+    <div id="formResultForJS" style="margin-left: 20px;">
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>