js form

1 week 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
 }