Kódím.cz
/ Czechitas / Digitální akademie Web / JavaScript 2 / Komunikace se serverem / Cvičení: Volání API
4

Komunikace se serverem

Vysvětlíme si, jak funguje World Wide Web, a ukážeme si, jak ze serveru načíst data pomocí API.

Předchozí
Šablony a komponenty
Následujicí
Podmíněné zobrazení
Klient/ServerVolání APIFormát JSONVolání API z JavaScriptuCvičení: Volání APIVeřejná APILokální API serverCvičení: Lokální API a komponentyShrnutíDoporučené úložky na doma
1
Východ a západ slunce
Zobrazte na stránce čas východu a západu slunce.

Vytvořme webovou stránku, která bude zobrazovat čas, kdy dnes vyšlo a kdy zapadá slunce. V tomto cvičení ještě nebudeme používat JSX a komponenty, abychom se mohli soustředit na práci s API.

  1. Založte si nový klasický HTML/CSS/JS projekt, tedy bez JSX, Vite apod.

    npm init kodim-app@latest cviceni-vychod-zapad html-css-js

  2. Otevřete si ve VS Code vytvořenou složku cviceni-vychod-zapad.

  3. V souboru index.js pomocí funkce fetch a klíčového slova await získejte data z API na adrese

    https://api.sunrise-sunset.org/json?lat=50&lng=14.5

    Výsledný JSON zatím pouze vypište do konzole a prohlédněte si jeho strukturu.

  4. Místo do konzole vypište někam do stránky čas východu a západu slunce. Obsah stránky sestavte postaru, tedy jako řetězec s použitím vlastnosti innerHTML.

Řešení