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;    
 }