hotovo

src/App.vue

@@ -1,58 +1,139 @@
 <template>
-  <div>
-    <h1>Snídaně</h1>
-    <div v-for="obj, i in menu" :key="i" class="menu">
-          <img  :src="obj.obrazek" alt="">
-          <p>
-            {{obj.popisek}}, {{obj.cena}} Kč
-          </p>
+<div>
+<h1>Snídaně</h1>
+  <div class="menu-wrap">
+    <div :style="{width: sirka + 'px'}">
+    <div v-on:click="seznam.push(obj)" v-for="obj,i in menu" :key="i" class="menu">
+      <img :src="obj.obrazek" alt="">
+      <p>
+        {{ obj.popisek }},{{ obj.cena }} kč
+      </p>
+  </div>
+  </div>
+  </div>
+  <div v-if="seznam.length > 0" class="center">
+    <p class="cena">
+      Celková cena: {{ cena }}kč
+    </p>
+    <p>
+      <button v-on:click="seznam= []">vyprázdnit košík</button>
+      <button>Zaplatit</button>
+    </p>
+  </div>
+    <div v-for="obj, i in seznam" :key="i" class="seznam-grid">
+      <div><img :src="obj.obrazek" alt=""></div>
+      <div>{{ obj.popisek }}</div>
+      <div>{{ obj.cena }},-</div>
+      <div><button v-on:click="seznam.splice(i, 1)">odebrat</button></div>
     </div>
-
-
-
-  </div> 
+</div> 
 </template>
 
 <script>
 export default {
   name: 'App',
   data: () => {
-    return{
-      stav: false,
+    return {
       menu: [
         {
-          obrazek:"/img/caj.jpg",
-          popisek:"Černý Čaj",
-          cena:15,
+          obrazek: "/img/caj.jpg",
+          popisek: "Černý čaj",
+          cena: 15,
+        },
+        {
+          obrazek: "/img/corn-flakes.jpg",
+          popisek: "Kukuřičný vločky",
+          cena: 32,
+        },
+        {
+          obrazek: "/img/maslo.jpg",
+          popisek: "Máslo",
+          cena: 40,
+        },
+        {
+          obrazek: "/img/med.jpg",
+          popisek: "Med",
+          cena: 20,
+        },
+        {
+          obrazek: "/img/mleko.png",
+          popisek: "Mléko",
+          cena: 9,
         },
         {
-          obrazek:"/img/corn-flakes.jpg",
-          popisek:"Kukuřičné vločky",
-          cena:33,
+          obrazek: "/img/rohlik.jpg",
+          popisek: "Rohlík",
+          cena: 5,
         },
         {
-          obrazek:"/img/maslo.jpg",
-          popisek:"Máslo",
-          cena:60,
+          obrazek: "/img/salam.jpg",
+          popisek: "Salám",
+          cena: 12,
+        },
+        {
+          obrazek: "/img/vejce-na-tvrdo.jpg",
+          popisek: "Vejce na tvrdo",
+          cena: 55,
         },
       ],
+      seznam: [],
     }
-  }
-  
+  },
+  computed:{
+    sirka: function() {
+      return this.menu.length * 240 + this.menu.length * 10 +this.menu.length * 2 
+    },
+    cena: function(){
+      let celkem = 0 
+      for (let i = 0; i < this.seznam.length; i++) {
+        const element = this.seznam[i];
+        celkem += element.cena
+      }
+      return celkem
+    },
+  },
 }
 </script>
 
 <style>
-.menu{
-  display: inline-block;
-  border:1px solid gray;
-  widows: 15em;
-  margin-right:1em ;
+  .menu{
+    display: inline-block;
+    border: 1px solid gray;
+    width: 15em; 
+    margin-right: 1px;
+    
+  }
+  .menu:hover{
+    cursor: pointer;
+    border-color:cornflowerblue;
+  }
+  .menu img{
+    width: 100%;
+
+  }
+  .menu p {
+    text-align: center;
+  }
+  .menu-wrap{
+    margin: 0 auto;
+    width: 30%;
+    overflow-x: scroll;
+  }
+  .seznam-grid{
+    width: 30%;
+    margin: 4rem auto;
+    display: grid;
+    grid-template-columns: 2fr 3fr 1fr 1fr;
+    
+  }
+.seznam-grid div{
+  align-self: center;
 }
-.menu img{
+
+.seznam-grid img{
   width: 100%;
 }
-.menu p{
+.center{
   text-align: center;
 }
-</style>
+</style>