Aktualizace stránky a volání APi

Aktualizace stránky a volání APi

  • Úvod
  • Aktualizace stránky a volání APi

Aktualizace stránky a volání APi

1. Svátek zítra

Zatím jsme z API pro získávání svátků viděli endpointy /today a /getdate. Existují však ještě další.

Napište aplikaci, která uživateli zobrazí, kdo má svátek zítra. K tomu použíjte endpoint /tomorrow, který funguje podobně jako endpoint /today.

Řešení

'use strict';

const displayName = (json) => {
  const nameElm = document.querySelector('.name');
  nameElm.textContent = json.data.namedays.cz;
};

fetch('https://api.abalin.net/tomorrow?country=cz')
  .then((resp) => resp.json())
  .then(displayName);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p>Zítra má svátek <span class="name"></span></p>

    <script src="index.js"></script>
  </body>
</html>

2. Svátek v den

Dalším užitečným endpointem API pro svátky je /namedays. Ten nám umožňuje zjistit, kdo má svátek v přesně určený den. Tento endpoint má tři povinné parametry: country, month a day. Takto například zjistíme, kdo má v Česku svátek 13. února.

https://api.abalin.net/namedays?country=cz&month=2&day=13

Vytvořte aplikaci, které bude obsahovat dvě textová políčka a tlačítko. Uživatel do políček zadá číslo dne a číslo měsíce a po stisknutí tlačítka se mu na stránce zobrazí, kdo má tento den svátek.

Řešení

'use strict';

const month = document.querySelector('#month');
const day = document.querySelector('#day');
const get = document.querySelector('#get');
const result = document.querySelector('#result');

get.addEventListener('click', () => {
  fetch(
    `https://api.abalin.net/namedays?country=cz&month=${month.value}&day=${day.value}`,
  )
    .then((resp) => resp.json())
    .then((json) => {
      result.textContent = json.data.namedays.cz;
    });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p>Měsíc: <input type="number" id="month" /></p>
    <p>Den: <input type="number" id="day" /></p>
    <button id="get">Najdi</button>

    <p id="result"></p>

    <script src="index.js"></script>
  </body>
</html>

3. Lokální čas

Stáhněte si základ aplikace zobrazující lokální čas na vašem počítači. Prohlédněte si zdrojový kód. Máte dopředu k dispozici funkci localTime, která vrátí aktuální čas v tomto formátu.

{
  hours: 9,
  minutes: 16,
  sesonds: 25,
}

Komponenta Time zobrazuje tento čas na obrazovce. Můžete si vyzkoušet, že při obnovení stránky se skutečně zobrazí aktuální čas.

Na stránce s nachází připravené tlačítko. Pověste na něj funkci, která aktualizuje čas zobrazený na stránce. Provede to tak, že znova získá aktuální čas pomocí funkce localTime a zavolá komponentu Time.

Řešení

'use strict';

const localTime = () => {
  const date = new Date();
  return {
    hours: date.getHours(),
    minutes: date.getMinutes(),
    seconds: date.getSeconds(),
  };
};

const Time = (props) => {
  return `
    <h1>
      <span class="hours">
        ${String(props.hours).padStart(2, '0')}
      </span>
      :
      <span class="minutes">
        ${String(props.minutes).padStart(2, '0')}
      </span>
      :
      <span class="seconds">
        ${String(props.seconds).padStart(2, '0')}
      </span>
    </h1>
  `;
};

const timeElm = document.querySelector('#time');
timeElm.innerHTML = Time(localTime());

// Řešení zvičení pod tímto komentářem

document.querySelector('#refresh').addEventListener('click', () => {
  timeElm.innerHTML = Time(localTime());
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lokální čas</title>
  </head>
  <body>
    <div id="time"></div>
    <button id="refresh">Aktualizovat</button>
    <script src="index.js"></script>
  </body>
</html>

4. Dopravní přestupky

Představte si, že je vaším úkolem sledovat křižovatku, na které řidiči často porušují dopravní značení, a zaznamenat čas každého porušení. Stáhněte si základ aplikace. Prohlédněte si kód aplikace. Najdete zde pole offences, které obsahuje časy přestupků. Komponenta Offence, která zobrauje čas přestupku.

  1. Vytvořte komponentu OffenceList, která vyrobí HTML obsah pro element #offence-list podle pole offences.
  2. Na tlačítko #add-btn pověste funkci, která přidá do senzmau čas nového přestupku.
    1. Funkce nejdříve získá objekt obsahující aktuální čas voláním funkce localTime,
    2. pomocí metody push vloží do tento objekt do pole offences,
    3. aktualizuje obsah elementu #offence-list voláním funkce OffenceList.

Řešení

'use strict';

const localTime = () => {
  const date = new Date();
  return {
    hours: date.getHours(),
    minutes: date.getMinutes(),
    seconds: date.getSeconds(),
  };
};

const Offence = (props) => {
  return `
    <div class="offence">
      <span class="hours">
        ${String(props.hours).padStart(2, '0')}
      </span>
      :
      <span class="minutes">
        ${String(props.minutes).padStart(2, '0')}
      </span>
      :
      <span class="seconds">
        ${String(props.seconds).padStart(2, '0')}
      </span>
    </h1>
  `;
};

const offences = [
  { hours: 9, minutes: 12, seconds: 33 },
  { hours: 9, minutes: 12, seconds: 42 },
  { hours: 9, minutes: 15, seconds: 1 },
];

// Řešení cvičení pod tímto komentářem

const offenceListElement = document.querySelector('#offence-list');

const OffenceList = (props) => {
  let result = '';
  for (let i = 0; i < props.offences.length; i += 1) {
    result += Offence(props.offences[i]);
  }

  return result;
};

offenceListElement.innerHTML = OffenceList({ offences: offences });

document.querySelector('#add-btn').addEventListener('click', () => {
  offences.push(localTime());
  offenceListElement.innerHTML = OffenceList({ offences: offences });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dopravní řestupky</title>
  </head>
  <body>
    <div id="offence-list"></div>
    <button id="add-btn">Přestupek</button>
    <script src="index.js"></script>
  </body>
</html>

5. Na Doma | Lokální čas 2

Stáhněte si základ aplikace zobrazující datum a čas v růnzých časových zónách.

  1. Vytvořte komponentu Time, která očekává props v tomto formátu: 
    {
 zone: 'Europe/London',
 datetime: '2020-10-22T07:17:07.139635+01:00'
}
  2. Při stisknutí tlačítka #btn-show použijte komponentu Time a zobrazte uvnitř elementu main data uvedená v předchozím kroku. Rozbalovací nabídku na stránce zatím ještě ignorujte.
  3. Upravte událost tlačítka tak, aby se na stránce zobrazil název časové zóny, kterou uživatel vybere z rozbalovací nabídky. Zobrazený čas zatím nechte stejný, vyřešíme jej v dalším kroku.
  4. K získání skutečného času použijeme veřejné API na adrese http://worldtimeapi.org. Čas pro časovou zónu Europe/London získáte na adrese 
    http://worldtimeapi.org/api/timezone/Europe/London

    Nejdříve si tuto adresu otevřete v prohlížeči a seznamte se s formátem dat, který tento endpoint vrací.

  5. Při kliknutí na tlačítko nejdříve získejte časovou zónu, kterou uživatel vybral z nabídky. Sestavte podle této hodnoty správnou URL. S výslednou URL zavolejte funkci fetch a získejte data o časové zǒně. Ve funkci, která zpracovává získaná data, zavolejte komponentu Time a zobrazte získaný čas na stránce.

Řešení

Řešení zatím nikdo nepřidal.

6. Na Doma | Světový čas 2

Navažte na předchozí příklad se světovým časem. Naším cílem bude stáhnout seznam časových zón z API místo toho, abychom jej měli natvrdo zadrátovaný v HTML kódu.

Seznam časových zón stáhnete na adrese

http://worldtimeapi.org/api/timezone

  1. Vytvořte komponentu Timezones, který vytvoří obsah pro element zone-select. Tato komponenta bude očekávat props v tomto formátu:

    {
 zones: [
   // seznam zón
 ];
}

  2. Otestujte vaši komponentu s nějakým vymyšleným seznamem zón abyste ověřili, že správně vytváří rozbalovací nabídku.

  3. Při načtení stránky zavolejte funkci fetch a stáhněte si skutečný seznam časových zón. Předejte jej komponentě Timezones.

Řešení

Řešení zatím nikdo nepřidal.