Chuck Norris viccek

A következő feladatban API segítségével kell vicceket lekérdezned és megjelenítened.

Minta

Ezt a Figmatervet használhatod mintaként

Node csomag kialakítása

  1. Alakítsd ki a mappaszerkezetet az alábbiak alapján
        .
    ├── README.md
    ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── public/
    ├── src/
    │   ├── utils/
    │   │   └── http.js
    │   ├── assets/
    │   │   └── style.css
    │   └── main.js
    └── vite.config.js
  2. Telepítsd a vite, és axios csomagokat, valamint a Tailwind CSS-t a dokumentáció alapján.
  3. Állítsd be a dev, build és preview szkripteket.

Vite.js konfigurálása

Állítsd be az alábbi aliasokat.

AliasÚtvonal
@./src
@utils./src/utils

Axios példány elkészítése

  1. Készíts egy http.js modult az utils könyvtárban. A modul tartalmazza az újonann elkészített axios példányt.
  2. Állítsd be az alap urlt a következőre: https://api.chucknorris.io/jokes
  3. Állítsd be a szükséges fejléceket, ahhoz, hogy a kérés során json típusú fogadjunk csak el.

Az oldal kialakítása

Alakítsd ki a main-ből egy reszponzív tároló elemet a minta alapján. Az űrlap alatti, a viccet tároló elem legyen rejtett.

ES

Az oldal betöltésekor kérdezd le az egyes kategóriákat a /categories végpontról és ezeket jelenítsd meg a legördülő listában. A gombra kattintva a kiválasztott kategórából kérj le egy viccet a következő végpont segítségével: /random?category=<kategória>.

Ha megérkezett a válasz a kérésre, akkor jelenítsd meg az alsó sort, benne a viccet.

\pagebreak
Table of Contents