krouzek:uloha:zviratka [Kroužek Javascriptu]

Zadání

1) Zkopírujte si šablonu níže do svojí stránky. Vstupem je z formuláře informace o zvířátku: jméno, hmotnost, a další.

2) Postavte zadanému zvířátku správný výběh s dodržením pravidel:

Bezpečnost návštěvníků: Zvířátko těžší než 50kg musí mít vysoký plot (1m). Pokud je masožravé, tak 2m. Pokud umí skákat, tak 2,5m

Zvířátko které utíká musí mít adekvátní -

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
 
    <style>
    /* Vychozi CSS stylovani prijde sem*/
 
 
 
    /* */
    </style>
 
    <script>
    /* <![CDATA[ */
    function pridej_zviratko(){
    var jmeno = document.getElementById('jmeno').value
    var utika = (document.getElementById('utika1').checked)
    var hmotnost = parseFloat(document.getElementById('hmotnost').value)
 
    // Zde bude vas program
 
    var vyska_plotu = 1
 
    // Prida zviratko do zoo
    postav_vybeh(jmeno, vyska_plotu)
 
    }
 
    function postav_vybeh(jmeno, vyska_plotu){
    	document.getElementById('zoo').innerHTML += jmeno + " - "+ vyska_plotu + "m" + "<br>"
    }
 
 
    /* ]]> */
    </script>
</head>
 
<body>
 <div>
 <form action="#" onsubmit="return false">
 <p><label for="jmeno">Druh zvířátka</label><input name="jmeno" id="jmeno"></p>
 <p><label for="utika">Utíká - ano</label><input type="radio" name="utika" id="utika1" value="ano"></p>
 <p><label for="utika">Utíká - ne</label><input type="radio" name="utika" id="utika2" value="ne"></p>
 <p><label for="hmotnost">hmotnost zvířátka</label><input name="hmotnost" id="hmotnost"></p>
 <input type="submit" onclick="pridej_zviratko()">
 </form>
 </div>
 <div id="zoo">
 </div>
</body>
</html>

Vylepšení

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Titulek</title>
 
    <style>
    /* Vychozi CSS stylovani prijde sem*/
 
 
 
    /* */
    </style>
 
    <script>
    /* <![CDATA[ */
    function pridej_zviratko(){
    var jmeno  = document.getElementById('jmeno').value
    var utika  = (document.getElementById('utika1').checked)
    var hmotnost  = parseFloat(document.getElementById('hmotnost').value)
 
    // Zde bude vas program
    var vyska_plotu = 1
 
 
    if ( hmotnost >= 50 ){
     vyska_plotu = 2
    }
 
    if ( hmotnost >= 50 && utika ){
     vyska_plotu = 3
    }
 
    // Prida zviratko do zoo
    if(jmeno == "velryba"){
    	postav_vybeh(jmeno, vyska_plotu, "voda")
    }else{
    	postav_vybeh(jmeno, vyska_plotu, "trava")
    }
 
    }
 
    function postav_vybeh(jmeno, vyska_plotu, typ_povrchu){
    	if (typ_povrchu == "voda") {
    		document.getElementById('zoo').innerHTML += "🌊"
    	}
    	if (typ_povrchu == "trava") {
    		document.getElementById('zoo').innerHTML += "🌿"
    	}
    	document.getElementById('zoo').innerHTML += jmeno + " - "+ vyska_plotu + "m" + "<br>"
    }
 
 
    /* ]]> */
    </script>
</head>
 
<body>
 <div>
 <form action="#" onsubmit="return false">
 <p><label for="jmeno">Druh zvířátka</label><input name="jmeno" id="jmeno"></p>
 <p><label for="utika">Utíká - ano</label><input type="radio" name="utika" id="utika1" value="ano"></p>
 <p><label for="utika">Utíká - ne</label><input type="radio" name="utika" id="utika2" value="ne"></p>
 <p><label for="leta">Letá - ano</label><input type="radio" name="leta" id="leta1" value="ano"></p>
 <p><label for="leta">Letá - ne</label><input type="radio" name="leta" id="leta2" value="ne"></p>
 <p><label for="hmotnost">hmotnost zvířátka</label><input type="number" name="hmotnost" id="hmotnost"></p>
 <input type="submit" onclick="pridej_zviratko()">
 </form>
 </div>
 <div id="zoo">
 </div>
</body>
</html>