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

    [
        {
        "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

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:

  <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

       getImgUrl(pic) {
        return require('../assets/img/'+pic);
        },