USA gépjármű nyilvántartó

A megadott minta alapján készítsd el a következő nyilvántartó alkalmazást.

! A feladatok megoldása során, csak a main tárolót, illetve a főoldalra vissza vezető linkeket készítheted el HTML-ben, a többit JavaScript segítségével kell generálnod!

Mappaszerkezet

.
├── README.md
├── index.html
├── manufacturer.html
├── models.html
├── package-lock.json
├── package.json
└── src/
    ├── assets/
    │    └── css/
    │       └── style.css
    ├── main.js
    ├── manufacturer.js
    ├── model.js
    └── utils/
        └── http.js

Készíts egy Vite.js alapú webalkalmazást, amelybe telepíted az axios, a tailwindcss, a postcss és az autoprefixer csomagokat.

1. Futtasd az npx tailwindcss init -p parancsot.
2. Ha szükséges, akkor a tailwind.config.js-ben és a postcss.config.js-ben cseréld le a module.exports = kifejezéseket export default-ra.
3. Készítsd el a stíluslapot és állítsd be a szükséges @tailwind direktívákat.
4. Minden oldalon a megfelelő ES fájlt hivatkozd be. Minden ES fájl importálja a közös stíluslapot.
5. Készítsd el a saját axios példányodat, a http.js fájlba és elnevezetten exportáld, és ezzel dolgozz a továbbiakban!
   1. Az alap URL-t állítsd be a következő címre: https://vpic.nhtsa.dot.gov/api/vehicles
6. Állítsd be a csomagban, hogy a dev script a fejlesztői szervert futtassa.
7. Állítsd be az alábbi aliasokat a vite konfigurációs fájljában:

Főoldal index.html

Az oldal betöltésekor kérd le a getallmanufacturers?format=json végpontról az USA-ban elérhető gépjármű gyártók adatait és jelenítsd meg egy táblázatban.

Példa:

A Gyártó neve esetén jelenítsd meg a Mfr_CommonName mezőt, amennyiben null lenne, a teljes nevet (Mfr_Name) írd ki. Ha a felhasználó, az egeret ráviszi a gyártó nevére, akkor írja ki a teljes cégnevet (Mfr_Name). A gyártó nevére kattintva vigyen át a manufacturer.html oldalra és állítsa be, hogy az mfr nevű GET-es paraméter értéke a gyártó azonosítója legyen.

Pl: manufacturer.html?mfr=955

A gyártott járművek típusait inline elem segítségével jelenítsd meg és formázd 700-as indigó hátterűre, ha elsődleges és 500-as indigóra, ha nem. Emellett legyen fehér betűszínük, legyen teljesen lekerekítve a széle, függőlegesen 1, vízszintesen pedig 2-2 egységnyi paddinget és margint, valamint betűmérete legyen közepes.

A sor végén, jeleníts meg egy hivatkozás, amely a models.html-oldalra navigál és mfr névű GET-es paraméter értéke legyen a gyártó azonosítója. A hivatkozás szövege legyen a "Modellek megtekintése", formázása pedig a következők szerint:

1. 500-as kék hátter
2. Fehér betűszín
3. Közepesen lekerekített szegély
4. Ha a felhasználó az egeret fölé viszi, akkor 400-as kék legyen a háttér
5. Kapjon 1remes belső margót
6. Oldd meg, hogy a szöveget ne törje a következő sorba.

A gyártó modeljei models.html

Az oldal betöltésekor vizsgáljuk meg, hogy van-e mfr nevű GET paraméterünk. Ha nincs, akkor irányítsuk vissza a főoldalra a felhasználót.

Az oldal tetején jelenjen meg egy hivatkozás, ami a főoldalra visz!

Amennyiben van, akkor a GetMakeForManufacturer/:mfr:?format=json végpont segítségével, ahol az :mfr: helyére a paraméterben kapott azonosítót helyettesítsd be, kérjük le a Make_ID-ját a gyártónak.

A megkapott érték alapján kérdezd le a gyártott modelleket a GetModelsForMakeId/:Make_ID:?format=json végpontról, ahol a :Make_ID: helyére az előbb lekért értéket helyettesíted be és jelkenítsd meg táblázatos formában.

Gyártó adatlapja manufacturer.html

Az oldal betöltésekor vizsgáljuk meg, hogy van-e mfr nevű GET paraméterünk. Ha nincs, akkor irányítsuk vissza a főoldalra a felhasználót.

Az oldal tetején jelenjen meg egy hivatkozás, ami a főoldalra visz!

Kérd le a gyártó adatait a /getmanufacturerdetails/:mfr:?format=json végpontról, ahol az :mfr: helyére a paraméterben kapott azonosítót helyettesítsd be és jelenítsd meg egy felsorolásban őket.

\pagebreak