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>