rezepte hinzugefügt

index.html

@@ -11,12 +11,17 @@
     <div class="window" x-data="daten">
       <div class="actionbar">
         <button type="button" @click="reset()">Alles zurücksetzen</button>
+        <span class="search">
         <input
           type="text"
           class="search"
           placeholder="Suche..."
           x-model="filter"
         />
+        <template x-if="filter.length > 0">
+          <button type="reset" @click="filter = ''">&times;</button>
+        </template>
+        </span>
       </div>
       <div class="grid">
         <template x-for="(z) in zutaten_filter">

js/main.js

@@ -23,7 +23,7 @@ Alpine.data("daten", () => ({
     { name: "Kopfsalat", einheit: " Blätter" },
     { name: "Oliven", einheit: "g", faktor: 50 },
     { name: "Erbsen", einheit: "g", faktor: 50 },
-    { name: "Tomaten stückig", einheit: "g", faktor: 200 },
+    { name: "Tomaten (stückig)", einheit: "g", faktor: 200 },
     { name: "Paprika", einheit: "x" },
     { name: "Karotte", einheit: "x" },
     { gruppe: "Fleischanteil" },
@@ -110,10 +110,13 @@ Alpine.data("daten", () => ({
     if (zutaten["Salatgurke"] >= 4 && zutaten["Senf"] >= 4 && gesamt < 15) {
       return ["Senfgurken"];
     }
+    if (zutaten["Nudeln"] >= 1 && zutaten["Kartoffeln"] == 0) {
+      return ["Nudelsalat"];
+    }
     if (
       zutaten["Hackfleisch"] >= 2 &&
       zutaten["Nudeln"] >= 3 &&
-      zutaten["Tomaten stückig"] >= 2
+      zutaten["Tomaten (stückig)"] >= 2
     ) {
       return ["Spaghetti Bolognese"];
     }
@@ -134,6 +137,21 @@ Alpine.data("daten", () => ({
     if (zutaten["Paprika"] >= 4 && zutaten["Hackfleisch"] >= 1) {
       return ["Gefüllte Paprika"];
     }
+    let allObst = [
+      "Birne",
+      "Apfel",
+      "Rote Beete",
+      "Mandarine",
+      "Ananas",
+      "Mango",
+    ];
+    let obst = Object.entries(zutaten).filter((z) => allObst.includes(z[0]));
+    if (obst.length == allObst.length && obst.every((z) => z[1] >= 1)) {
+      return ["Obstsalat"];
+    }
+    if (zutaten["Apfel"] == 2 && gesamt == 2) {
+      return ["Bratapfel"];
+    }
     return ["Kartoffelsalat"];
   },
 }));

style.css

@@ -79,8 +79,25 @@ body {
   grid-column: -1/1;
   border-bottom: 1pt solid hsl(0, 0%, 80%);
 }
+.search {
+  display: inline-block;
+  position: relative;
+}
+button[type="reset"] {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 5px;
+  background: none;
+  border: none;
 
-button {
+  &:hover {
+    cursor: pointer;
+    background: none;
+  }
+}
+
+button[type="button"] {
   border-radius: 0.5rem;
   cursor: pointer;
   background-color: transparent;