zadani prace

README.md

@@ -1,3 +1,94 @@
 # vuejs-PictureOfDay
 
-Jednoduchý repozitář obsahující základní kód a studenti budou mít za ukol splnit veškeré požadavky pro splnění úkolu
+Jednoduchý repozitář obsahující základní kód a studenti budou mít za ukol splnit veškeré požadavky pro splnění úkolu
+
+### Během samostatné práce:
+- lze použít vlastní zdrojové kódy a internet.
+- Zakázano je komnunikovat s kymkoliv online
+
+### Práci odevzdat:
+- vložit zdrojové kódy na git.asgard.odbornaskola.cz (doporučuji si vygenerovat .gitignore)
+- na amos.odbornaskola.cz do konkrétního úkolu -> Odevzdat archiv (idealně ZIP) se složkama **src, public** a soubory končící s příponou **.json** a **.md** (např. package.json, jsconfig.json, readme.md)
+
+# Zadání úkolu
+ Vytvořit aplikaci založenou na *Vue.JS* který bude mít za účel zobrazit *"obrázek dne"* a připnutou citaci k danému obrázku s možností procházet "Kalendářem" (vyřeseno tlačítkem "další den" nebo tlačítkem "předchozí den"). Veškeré texty a cesty k obrázkům bude čteno z JSON souboru
+
+Vytvořit si JSON data pro tuto aplikace na **celý měsíc Březen** (1.3. - 31.3.) ->bude 31 *"záznamů"*.
+
+
+## Chování aplikace
+- **celá aplikace bude importovaná do *APP.VUE* jako KOMPONENTA** (název nechám na vás)
+- webová aplikace po navšívení bude zobrazovat obrázek toho dne z JSON.
+- pod obrázkem bude náhodný citat (VŠECHNY CITATY BUDOU RŮZNÉ)
+- za pomocí *computed* vypočítávat nový datum pro zobrazení
+- navigační tlačítka budou obsahovat: *Další datum, DNES, Předchozí datum*
+- obrázky si to bude tahat ze složky **img** ve složce **assets** -> cesta bude např. *./assets/img/obrazek.png* (jak to budete importovat je na vás)
+
+## Rozložení layoutu
+- aplikace bude mét veškerý text vycentrovaný `text-align: center`
+- Aplikace bude obsahovat zeshora dolů ↓↓↓
+  - 1) nadpis
+  - 2) obrázek
+  - 3) citace
+  - 4) navigační tlačítka
+  - 5) footer s vlastním jménem
+## Vzor JSON dat
+```json
+    [
+        {
+        "title":"Nadpis",
+        "content": "Citace 1",
+        "date":"1. 3. 2022",
+        "img":"img1.png"
+        },
+        {
+        "title":"Nadpis 2",
+        "content":"Citace 2",
+        "date":"1. 3. 2022",
+        "img":"img2.png
+        }
+    ]
+```
+## Předpřipravený data
+
+### NEOBSAHUJE VŠECHNY METODY/DATA, NĚKTERÉ SI BUDETE POTŘBEBA DOPROGRAMOVAT!
+
+#### POUŽÍTÍ JE ZCELA DOBROVOLNÉ!
+
+připravené neokomenovaných částí kodů, které zachrání nejvíce času
+
+```js
+data: () => ({
+          date: '',
+          calcDate: 0,
+          jsondata: jsondata
+        }),
+  methods: {
+    printDate: function () {
+             return new Date();
+            //return new Date().toLocaleDateString();
+          },
+    selectDate: function(date, days){
+      var result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result.toLocaleDateString();
+    },
+
+    todayData: function () {
+        return this.jsondata.filter(
+          jsondata => jsondata.date == (new Date().toLocaleDateString()));
+      },    
+      selectDatum: function (datum) {
+        return this.jsondata.filter(
+          jsondata => jsondata.date == datum);
+      },
+  },
+  mounted: function () {
+          this.date = this.printDate();
+        },
+  computed: {
+      selectedDate: function () {
+        return this.selectDate();
+      }
+    }
+```