Utazási iroda

A feladat megoldása során egy olyan weboldal kell építened, amely egy utazási iroda aktuális ajánlatait jeleníti meg.

Szükséges tudás

Minta

Mintaként a feladathoz ezt a Figma tervet tudod.

Feladatok

HTML oldal beállításai

  1. Linkeld be a legfrissebb Bootstrap-hez tartozó CSS és JavaScript fájlokat. Készíts egy style.css nevű fájlt az assets/css könyvtárban , valamint egy main.mjs javascript module-t az assets/js könyvtárban és linked be őket.
  2. Készítsd el a mintának megfelelően a navigációs sávot. Ügyelj rá, hogy a Szűrés feliratú link gomb legyen és ne hivatkozás!
  3. Hozz létre 3 sort bootstrap segítségével:
    1. Az első sor tartalmazza az oldal címét, amelyet első szintű címsorként add meg.
    2. A megadott űrlapot alakítsd át úgy, hogy a második sor egyetlen oszlopát foglalja el.
    3. A harmadik sorba fognak elhelyezkedni a tényleges ajánlataink, ezt jelöld meg offers azonosítóval és legyen 2 BS egységni eltartása az előző sortól.
  4. Készítsd el a sablont a kártyák számára a main-en kívül.
    1. Az elkészítéséhez ezt a kártyát tudod felhasználni, mint kiindulási alap.
    2. Ügyelj rá, hogy a kártya maga egy oszlopon belülre kerül.
      1. Úgy add meg ez, hogy mobil nézeten 1 oszlop látszódjon, md-től felfelé 2, míg xl nézettől felfelé 3 oszlop jelenjen meg.
    3. A kártyán található kép töltse ki a teljes szélességet és állítsd be, hogy feszített legyen az objekum kitöltése.
    4. Kerüljön egy badge típusú inline elem a kártya címe alá.
    5. Készíts footert a kártya számára.
    6. A további beállításokat a kártyára vonatkozóan CSS segítségével add meg:
      1. A kártya törzsének magassága legyen számított érték a következő képlet alapján: 100% - 2.5rem
      2. Media lekérdezés segítségével állítsd be, hogy a kártyán található kép magassága mekkora legyen:
        1. 768px szélesség felett: 40vh magas legyen
        2. 992px szélesség felett: 32vh magas legyen
        3. 1200px szélesség felett: 40vh magas legyen

Osztályok

A fenti ábra alapján készítsd el az osztályokat külön modulban tárolva at assets/js/classes könyvtárban.

A Hotel osztály esetén:

  • az address getter összefűzve adja vissza a címet
  • az allFeatures getter az egyes tulajdonságok nevét összefűzve adja vissza! Figyelj rá, hogy a Feature osztályból tárolunk példányokat!

Az Offer osztály esetén

  • a hotel előtaggal megjelölt getterek a hotel adatait adják vissza.
  • az available getter az adja vissza, hogy az available objektum after és before dátumai között vagyunk-e
@startuml

class Hotel {
    - #id
    - #name
    - #address
    - #type
    - #phone
    - #email
    - #features
    - #img

    + Hotel({ id, name, address, type, phone, email, features, img })
    + get id()
    + get name()
    + get address()
    + get phone()
    + get email()
    + get allFeatures()
    + get image()
}

class Feature {
    - #id
    - #name

    + Feature({ id, name })
    + get id()
    + get name()
}

class Offer {
    - #hotel
    - #id
    - #cost
    - #summary
    - #available

    + Offer({ hotel, id, cost, summary, available })
    + get hotelFeatures()
    + get hotelName()
    + get hotelImage()
    + get cost()
    + get summary()
    + get available()
}

Offer "1" -- "1" Hotel: has
Offer "1" -- "n" Feature: includes
Hotel "1" -- "n" Feature: has

@enduml

Osztályok felhasználása

A főprogramban importáld be az assets/js/data/data.js fájlban található objektumot. Az ebben található adatok alapján készíts három tömböt, amely tárolja a Tulajdonságokat, Hoteleket és az Ajánlatokat. A tömböket a leképző függvény (map()) segítségével állítsd elő.

Vigyázz! Az egyes helyeken konkrét példányokat tárolunk a másik osztályból, ezen kapcsolatokat láthatod a fenti ábrán is!

Készíts egy filtered nevű változót, amely kezdeti értéke legyen az ajánlatok tömbje.

Megjelenítés

Készíts egy loadOffers függvényt, amely első lépésként kitöröl az #offers azonosítójú sorból minden gyerekelemet. Ezt követően a template felhasználásával készítsd el a megfelelő kártyákat a filtered változóban található tüömb alapján és ezeket helyezd el a sorban.

Az ajánlat árát a priceFormatter objektum segítségével oldd meg, melyet az assets/js/utils/formatter.mjs-ből tudsz importálni és a következőképpen tudod felhasználni:

priceFormatter.format(offer.cost)

Oldd meg, hogy a loadOffers függvény az oldal betöltésekor lefusson.

Szűrés

Készíts egy filter függvényt, amely az űrlapon megadott két mezőből lekéri az értékeket, az alapján szűrést végez az ajánlatok tömbjén és az eredményt eltárolja a filtered változóban, majd meghívja a loadOffers függvényt.

Készíts egy clearFilter függvényt, amely az űrlap mezőit üresre állítja, belállítja a filtered értékét az eredeti ajánlatok tömbjére és meghívja a laodOffers függvényt.

Oldd meg, hogy a fenti két függvény az űrlap megfelelő gombjainak kattintásával fussanak le.

\pagebreak
Table of Contents