# 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

### 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 pro **celou aplikaci**
- 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":"Nadpis2",
        "content": "Obsah2",
        "date": "9. 3. 2022",
        "img": "image_01.jpg"
    },
    {
        "title":"Nadpis2",
        "content": "Obsah2",
        "date":"10. 3. 2022",
        "img": "image_02.jpg"
    },
    {
        "title":"Nadpis2",
        "content": "Obsah2",
        "date":"11. 3. 2022",
        "img": "image_03.jpg"
    }
    ]
```
## 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();
      }
    }
```


##### malý tip:
```js 

  <div v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i> <br>
    <img :src="getImgUrl(data1.img)" v-bind:alt="data1.img">  
</div>
```

metoda: <- je pak potřeba rovnou nastavit img v json JEN NA NÁZEV OBRÁZKU
```js
       getImgUrl(pic) {
        return require('../assets/img/'+pic);
        },
```