uprava šablon

package.json

@@ -13,13 +13,13 @@
     "vue-carousel": "^0.18.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "eslintConfig": {
     "root": true,

public/img/odkaz kolotoc.txt

@@ -0,0 +1 @@
+https://drive.google.com/file/d/1nCPlMsC2-PSnR2IX3HnWyXd5zyKrSWNU/view?usp=sharing

src/App.vue

@@ -2,31 +2,22 @@
 
   <div id="app">
     <h1>Kolotoč</h1>
-     <div class="kolotoc">
-       <button v-on:click="dopredu">(====</button>
-       <button v-on:click="dozadu">===)</button>
-       <br>
-        <div class="obraz">
-            <img :src="images[index].src" alt="" />
-            <br>
-            <h1><span>{{ images[index].title }}</span></h1>
+    <kolotoc :images = "images"/>
      
-            <h1><span>{{ images[index].text }}</span></h1>
-        </div>
-        
-       
-
-    </div>
   </div>
  
 </template>
 
 <script>
+import kolotoc from "./components/kolotoc";
 
 
 export default {
  
   name: 'App',
+  components: {
+    kolotoc
+  },
   data: function() {
     return {
       images: [
@@ -47,92 +38,11 @@ export default {
         }
 
       ],
-      index: 0
     }
 
-  },
-  methods: {
-    
-    dozadu: function () {      
-      this.index -= 1;
-      if (this.index < 0) {
-        this.index = this.images.length - 1;
-      }
-    },
-    dopredu: function () {
-      this.index += 1;
-      if (this.index > this.images.length - 1) {
-        this.index = 0;
-      }
-    },
-  },
-
-
- 
-
- 
-}
-
-</script>
-
-<style>
-img {
-  width: 60%;
-  display: block;
-  margin: 0px auto;
-
-}
-span{
-  font-family: 'Courier New', Courier, monospace;
+  }
 }
-button{
-  background-color: rgb(86, 166, 219);
-  width: 20%;
-  height: 30px;
-  display: block;
-  margin: 0px auto;
   
 
-}
-#app{
-  margin: 0 auto;
-  width: 50%;
-  background-color: chocolate;
-
-}
-h1{
-  text-align: center;
-}
-@media (max-width: 500px) {
-   img {
-  width: 100%;
-  display: block;
-  margin: 0px auto;
-
-}
-span{
-  font-family: 'Courier New', Courier, monospace;
-}
-button{
-  background-color: rgb(86, 166, 219);
-  width: 50%;
-  height: 30px;
-  display: block;
-  margin: 0px auto;
-  
-  
-}
-#app{
-  margin: 0 auto;
-  width: 50%;
-  background-color: chocolate;
-
-}
-h1{
-  text-align: center;
-}
-    
-}
-
+</script>
 
-</style>

src/components/kolotoc.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="kolotoc">
+       <button v-on:click="dopredu">(====</button>
+       <button v-on:click="dozadu">===)</button>
+       <br>
+        <div class="obraz">
+            <img :src="images[index].src" alt="" />
+            <br>
+            <h1><span>{{ images[index].title }}</span></h1>
+      
+            <h1><span>{{ images[index].text }}</span></h1>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+  props: {
+    images: { default: () => []}
+  },
+
+    
+    data: function() {
+        return {
+            index: 0,
+        }
+    },
+methods: {
+    
+    dozadu: function () {      
+      this.index -= 1;
+      if (this.index < 0) {
+        this.index = this.images.length - 1;
+      }
+    },
+    dopredu: function () {
+      this.index += 1;
+      if (this.index > this.images.length - 1) {
+        this.index = 0;
+      }
+    },
+  },
+    
+}
+</script>
+
+<style>
+img {
+  width: 60%;
+  display: block;
+  margin: 0px auto;
+
+}
+span{
+  font-family: 'Courier New', Courier, monospace;
+}
+button{
+  background-color: rgb(86, 166, 219);
+  width: 20%;
+  height: 30px;
+  display: block;
+  margin: 0px auto;
+  
+  
+}
+#app{
+  margin: 0 auto;
+  width: 50%;
+  background-color: chocolate;
+
+}
+h1{
+  text-align: center;
+}
+@media (max-width: 500px) {
+   img {
+  width: 100%;
+  display: block;
+  margin: 0px auto;
+
+}
+span{
+  font-family: 'Courier New', Courier, monospace;
+}
+button{
+  background-color: rgb(86, 166, 219);
+  width: 50%;
+  height: 30px;
+  display: block;
+  margin: 0px auto;
+  
+  
+}
+#app{
+  margin: 0 auto;
+  width: 50%;
+  background-color: chocolate;
+
+}
+h1{
+  text-align: center;
+}
+    
+}
+
+
+</style>
+