košík

snidane/src/App.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <h1>Snídaně</h1>
+<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">
@@ -12,11 +12,21 @@
   </div>
   </div>
 
-  <div v-for="obj, i in seznam" :key="i">
-  {{obj.popisek}}
-  </div>
+  <p class="cena">
+    Celková cena: {{ cena }}kč
+  </p>
+  <p>
+    <button v-on:click="seznam= []">vyprázdnit košík</button>
+  </p>
 
+
+    <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>odebrat</button></div>
     </div>
+</div> 
 </template>
 
 <script>
@@ -24,7 +34,6 @@ export default {
   name: 'App',
   data: () => {
     return {
-      stav: false,
       menu: [
         {
           obrazek: "/img/caj.jpg",
@@ -74,6 +83,14 @@ export default {
     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>
@@ -83,7 +100,7 @@ export default {
     display: inline-block;
     border: 1px solid gray;
     width: 15em; 
-    margin-right: 10px;
+    margin-right: 1px;
     
   }
   .menu:hover{
@@ -98,7 +115,22 @@ export default {
     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;
+}
+
+.seznam-grid img{
+  width: 100%;
+}
 </style>