hotovo

src/App.vue

@@ -1,26 +1,105 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="wraperr">
+    <section>
+      <u><h1>Kliknněte na hlínu a udělejte hroudu</h1></u>
+      <h2>Celkový počet kilo:<div v-if="hromada1.length > 0" class="kg2">{{ kg2 }}</div></h2>
+      <div
+        v-on:click="presunHroudy(i)"
+        v-for="(obj, i) in hromada1"
+        :key="i"
+        class="hromada1"
+      >
+        <img :src="obj.obrazek" alt="" />
+        <p>
+          {{ obj.kg }}
+        </p>
+      </div>
+    </section>
+    <section></section>
+    <section>
+      <u><h1>Zde se tvoří hrouda:</h1></u>
+      <h2>
+        Celkový počet kg:
+        <div v-if="hromada2.length > 0" class="kg">{{ kg }}</div>
+      </h2>
+      <h2>Počet hroud:{{hromada2.length}}</h2>
+      <div v-for="(obj, i) in hromada2" :key="i" class="hromada2">
+        <img :src="obj.obrazek" alt="" />
+      </div>
+    </section>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+  name: "App",
+  methods: {
+    presunHroudy: function (pozice) {
+      this.hromada2.push(this.hromada1[pozice]);
+      this.hromada1.splice(pozice, 1);
+    },
+  },
+  computed: {
+    kg: function () {
+      let celkem = 0;
+      for (let i = 0; i < this.hromada2.length; i++) {
+        const element = this.hromada2[i];
+        celkem += element.kg;
+      }
+      return celkem;
+    },
+    kg2: function () {
+      let celkem = 0;
+      for (let i = 0; i < this.hromada1.length; i++) {
+        const element = this.hromada1[i];
+        celkem += element.kg;
+      }
+      return celkem;
+    },
+  },
+  data: () => {
+    return {
+      hromada1: [
+        {
+          obrazek: "/img/1.png",
+          popisek: "černá koule",
+          kg: 15,
+        },
+        {
+          obrazek: "/img/2.jpg",
+          popisek: "hnědá koule",
+          kg: 25,
+        },
+        {
+          obrazek: "/img/3.jpg",
+          popisek: "šedá koule",
+          kg: 30,
+        },
+        {
+          obrazek: "/img/4.jpg",
+          popisek: "divná koule",
+          kg: 35,
+        },
+        {
+          obrazek: "/img/1.png",
+          popisek: "černá koule",
+          kg: 33,
+        },
+      ],
+      hromada2: [],
+    }
+  },
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.wraperr {
+  display: grid;
+  grid-template-columns: 2fr 1fr 2fr;
+}
+img {
+  width: 20%;
+  height: 20%;
+  cursor: pointer;
 }
 </style>