krouzek:uloha:hledani

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<title>Titulek</title>
 
<style>
ul#zobrazenePole {
		  display:flex;
		  list-style-type: none;
		  flex-wrap: wrap;
		 }
ul#zobrazenePole li {
		  padding:0.5em;
		  margin:0.3em 1em;
		  border:1px solid grey;
		 }
 
 
</style>
 
<script>
 /* <![CDATA[ */
/* Sem prijde javascript kod */
 
var mojePole = []
 
 
function vymazPole(){
/* todo: funkce ktera z mojePole odstrani vsechno...
          ... nebo ktera pole nastavi opet na prazdne pole :)
*/
 
 // po uspesne zmene znovu pole zobrazime
 aktualizujVypis()
}
 
function pocetPrvku(){
  /* todo: funkce která spočítá prvky */
 
  document.getElementById('vysledek').innerHTML = "zde bude počet prvků :)"
}
 
function maximum(){
  /* todo: funkce najde maximální prvek */
 
  /* todo: A vypíše do elementu vysledek (podobne jako funkce pocetPrvku) */
}
 
function pridej(prvek){
 mojePole.push(prvek)
 
 aktualizujVypis()
}
 
/* 
 Funkce aktualizujVypis vypise vsechny prvky pole do dokumentu.
 Tato funkce je hotova (dela to co ma), ale muzete si s ni experimentovat
 */
function aktualizujVypis(){
 var kontejner = document.getElementById('zobrazenePole')
 // Smazu vse co se vypisuje
 kontejner.innerHTML = ''
 
 // Pruchod polem prvek po prvku
 for (var i=0;i<mojePole.length; i++){
  // Tvorim jedno policko
  var zaznam = document.createElement('li')
  // Nastavuji obsah policka na obsah bunky pole
  zaznam.innerHTML = mojePole[i]
  // Pridavam policko do seznamu
  kontejner.appendChild(zaznam)
 }
}
 
/* ]]> */
</script>
</head>
 
<body>
<p><label for="cislo">Číslo</label> <input type="number" id="cislo" name="cislo"></p>
<p><input type="submit" value="pridej" onclick="document.getElementById('cislo').value && pridej(parseInt(document.getElementById('cislo').value))"></p>
<p><input type="submit" value="vymazPole" onclick="vymazPole()"></p>
<p><input type="submit" value="pocetPrvku" onclick="pocetPrvku()"></p>
<p><input type="submit" value="maximum" onclick="maximum()"></p>
 
<p id="vysledek"></p>
 
<ul id="zobrazenePole"></ul>
 
</body>
</html>