Developen
De pagina wat wij dus moesten maken was een object detail page van Funda, een idee wat ik had is om alle kenmerken in een netter lijstje te gaan zetten, om dit te doen had ik wat tips van medestudenten gekregen namelijk dat ik een description list kon gebruiken <dl> <dt> en <dd> hiermee kon ik gemakkelijk de description title en details laten zien van bepaalde kenmerken.
In mijn CSS heb ik veel verschillende dingen gebruikt, zoals keyframes, custom properties, grid en media queries. Waar ik vooral trots op was is de grid die ik had gebruikt voor de foto's bovenaan de pagina. Ik wou namelijk ongeveer hetzelfde maken als wat Funda nu heeft, maar dan ipv meer foto's een map aan de rechterkant. Ik wou dit met grid doen zodat ik het gemakkelijk kon plaatsen en ik vrij eenvoudig de responsive varianten kon maken voor tablet en desktop. Rond het eind van de sprint heb ik door mijn code gekeken, en kwam ik erachter dat mijn code nog best rommelig was, ik heb dit uiteindelijk een beetje opgeruimd door meer in custom properties te zetten en in de goede volgorde van de HTML te plaatsen.
Voor de JS die ik heb gebruikt voor deze pagina is vooral voor de modal box die ik heb gemaakt op alle foto's bovenaan de pagina en de lees neer knop bij de omschrijving. Maar de JS waar ik het meest trots op ben in dit project is de JS die ik heb gebruikt om een animatie te geven aan een hartjes icon, om dit vooral elkaar te doen heb ik aan de class van hartje een :after gegeven en deze heb ik een custom property gegeven voor de height, vervolgens heb ik deze height laten tonen op een click addeventlistener.
