krouzek:uloha

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="utf-8"/>
  <title>ZOO</title>
 
  <style>
      body {
          box-sizing: border-box
      }
 
      #sklad-json {
          width: 98%;
          height: 50vh;
      }
 
      #vsechno {
          display: flex;
          flex-direction: row;
      }
 
      #podminky {
          width: 40vw;
      }
 
      #sklad {
          background-color: rgba(220, 220, 220);
          width: 30vw;
      }
 
      .vybeh {
          border: 0.05em solid black;
          width: 30vw;
      }
      .voliera {border: 0.1em dashed black;}
 
      .vybeh, .podminka {
          min-height: 5vh;
      }
 
      #odmitnuti {
          background: repeating-linear-gradient(135deg, white, #ffaaaa 15%, #ffaaaa 20%, white 30%);
      }
  </style>
 
  <script>
      /* <![CDATA[ */
 
      // Pri kazde zmene jsonu
      function nactiZvirata(makePretty = false, showError=false) {
          let nactenePole = []
          const skladTextarea = document.getElementById('sklad-json')
          try {
              nactenePole = JSON.parse(skladTextarea.value)
              if (makePretty) {
                  skladTextarea.value = JSON.stringify(nactenePole, null, 3)
              }
              skladTextarea.style.backgroundColor = 'white'
          } catch (e) {
              skladTextarea.style.backgroundColor = 'rgb(255,200,200)'
              if(showError){
                  console.error(e)
              }
          }
          return nactenePole
      }
 
      function vyhodnotPodminky() {
          // console.log("volani funkce vyhodnotPodminky")
          const zvirata = nactiZvirata()
          // todo: isolate into a function
          for (let cisloVybehu = 1; cisloVybehu <= 3; cisloVybehu++) {
              document.getElementById("vybeh" + cisloVybehu).innerHTML = ''
          }
          document.getElementById("odmitnuti").innerHTML = ''
          const umistenaZvirata = {}
 
          for (let cisloPodminky = 1; cisloPodminky <= 3; cisloPodminky++) {
              const podminka = document.getElementById("podminka" + cisloPodminky).value
              for (let indexZvirete = 0; indexZvirete < zvirata.length; indexZvirete++) {
                  const zvire = zvirata[indexZvirete]
                  if (umistenaZvirata[indexZvirete]) {
                      continue
                  }
                  if (eval(podminka)) {
                      document.getElementById("vybeh" + cisloPodminky).innerHTML += " "+ zvire.emoji + zvire.jmeno
                      umistenaZvirata[indexZvirete] = true
                  }
              }
          }
 
          // zbyla zvirata do posledniho vybehu
          for (let indexZvirete = 0; indexZvirete < zvirata.length; indexZvirete++) {
              const zvire = zvirata[indexZvirete]
              if (!umistenaZvirata[indexZvirete]) {
                  document.getElementById("odmitnuti").innerHTML += " "+ zvire.emoji + zvire.jmeno
              }
          }
      }
 
      /* ]]> */
  </script>
</head>
 
<body>
<div id="vsechno">
 
  <!-- https://emojipedia.org/nature/ -->
  <!-- https://www.zoopraha.cz/zvirata-a-expozice/zvireci-osobnosti -->
  <div id="sklad">
    <textarea id="sklad-json" oninput="nactiZvirata()">
      [
   {
      "trida": "savci",
      "rod": "slon",
      "druh": "slon indický",
      "jmeno": "Shanti",
      "pohlaví":"samice",
      "vek": 46,
      "hmotnost": 500,
      "emoji": "🐘"
   }, {
      "trida": "savci",
      "rod": "slon",
      "druh": "slon indický",
      "jmeno": "Karel",
      "pohlaví":"samec",
      "vek": 33,
      "hmotnost": 730,
      "emoji": "🐘"
   },
   {
      "trida": "ptáci",
      "rod": "tučňák",
      "druh": "tučnák císařský",
      "jmeno": "Karel IV",
      "pohlaví": "samec",
      "vek": 4,
      "hmotnost": 12,
      "emoji": "🐧"
   },
   {
      "trida": "ptáci",
      "rod": "orel",
      "druh": "orel skalní",
      "jmeno": "Vilém",
      "pohlaví":"samec",
      "vek": 2,
      "hmotnost": 3,
      "emoji": "🦅"
   },
   {
      "trida": "savci",
      "rod": "medvěd",
      "druh": "medvěd lední",
      "jmeno": "Berta",
      "pohlaví":"samice",
      "vek": 19,
      "hmotnost": 190,
      "emoji": "🐻"
   },
   {
      "trida": "savci",
      "rod": "medvěd",
      "druh": "medvěd lední",
      "jmeno": "Tom",
      "pohlaví":"samec",
      "vek": 15,
      "hmotnost": 440,
      "emoji": "🐻"
   },
   {
      "trida": "savci",
      "rod": "medvěd",
      "druh": "medvěd hnědý",
      "jmeno": "Eva",
      "pohlaví":"samice",
      "vek": 22,
      "hmotnost": 175,
      "emoji": "🐻"
   },
   {
      "trida": "savci",
      "rod": "gorila",
      "druh": "gorila nížinná",
      "jmeno": "Richard",
      "pohlaví":"samec",
      "vek": 25,
      "hmotnost": 110,
      "emoji": "🦍"
   },
   {
      "trida": "savci",
      "rod": "gorila",
      "druh": "gorila nížinná",
      "jmeno": "Nuru",
      "pohlaví":"samec",
      "vek": 10,
      "hmotnost": 56,
      "emoji": "🦍"
   }
]
    </textarea>
    <p>
      <button onclick="nactiZvirata(true, true)">🖹</button>
    </p>
  </div>
 
  <div id="podminky">
    <div class="podminka">
      <input type="text" value="zvire.rod == 'gorila'" id="podminka1" oninput="vyhodnotPodminky()">
    </div>
    <div class="podminka">
      <input type="text" id="podminka2" oninput="vyhodnotPodminky()">
    </div>
    <div class="podminka">
      <input type="text" id="podminka3" oninput="vyhodnotPodminky()">
    </div>
  </div>
 
  <div id="zoo">
    <div class="vybeh" id="vybeh1"></div>
    <div class="vybeh" id="vybeh2"></div>
    <div class="vybeh voliera" id="vybeh3"></div>
    <div class="vybeh" id="odmitnuti"></div>
  </div>
</div>
 
<div>
  <h2>Zadání: napište podmínky, abyste dosáhli dělení:</h2>
  <ol>
    <li>savci v jednom výběhu, ptáci ve voliéře (třetím výběhu)</li>
    <li>lední medvědi v jednom výběhu, ostatní savci v druhém, ptáci ve voliéře</li>
    <li>všechna zvířata těžší než 150(kg) v jednom výběhu, ostatní v druhé</li>
    <li>samice a samci odděleně</li>
    <li>Karlové v jednom výběhu, ostatní v druhém</li>
    <li>atp</li>
  </ol>
 
</div>
</body>
</html>