Footer component #31

[OniWithTheHoodie]

Footer

1. Footer gemaakt met grid layout
2. flexbox voor icons, links en copyright om ze uit te lijnen
3. ik heb de ingebouwde enhanced functie van svelte gebruikt voor de images hierdoor kan ik avif of webP gebruiken.
4. Desktop overgezet naar mobile first

Ik heb een in de libs een assets folder gemaakt waar de images in zitten deze images import ik met een variable naam/import naam met de pathing daarvan.

    import Veronica from '$lib/assets/Veronica.PNG?enhanced';

Dit haal ik door in de src te zetten tussen curly braces en vraag ik de import naam op

        <enhanced:img src={Veronica} class="footer__veronica" alt="logo van veronica in footer" />

Welke testen heb ik uitgevoerd?

ik ben onze hele DOD afgegaan en heb de functionaliteit ook getest.

Code

• [x] Je code voldoet aan de afgesproken conventies
• [x] Je bent consistent met het gebruiken van tabs en enters
• [X] Je structureert je code met comments
• [X] Je legt ingewikkelde code uit met comments

Ontwerp

• [x] Het afgeronde component komt overeen met het ontwerp

Responsive

• [X] Het is responsive op alle schermen tot minstens 300px breed

Toegankelijkheid

• [x] Is te bedienen met toetsenbord
• [x] Heeft een duidelijke focus state
• [x] Er wordt gebruik gemaakt van semantische html (probeer divs te voorkomen)
• [x] Op alle buttons en overige klikbare elementen staat cursor: pointer
• [X] Je scoort minstens een 85% op Lighthouse voor zowel mobiel als desktop op toegankelijkheid
• [X] Bij afbeeldingen, buttons en links staan alt tags die kort en duidelijk beschrijven wat het doet
• [x] Je html komt door de html validator
• [x] Er is op meerdere browsers getest, minstens firefox en chrome

Performance

• [x] Alle afbeeldingen hebben een standaard hoogte en een standaard breedte meegekregen in de html
• [x] Het formaat van elke afbeelding is webp of svg
• [x] Je hebt geen onnodige / dubbele code
• [x] Je behaalt een 85% op de performance Lighthouse test op zowel mobiel als desktop

Mergen

• [x] Alle merge conflicts zijn opgelost
• [x] Minstens 1 persoon heeft je code beoordeeld en goedgekeurd

Wat moet er getest worden?

Ik zou graag willen dat er iemand extra controlleert of:

• [x] Alle functionaliteiten onder het kopje hoe werkt het, werken
• [x] Of alles volgens code conventies is
• [x] Of ik mij aan alle DOD's heb gehouden

[driezie]

Ik heb een paar tests gedaan en ben er achter gekomen dat hoe groter de footer werd, de onderste gedeelte van de footer uit de footer komt. Dit komt er waarschijnlijk voor dat je een max-height of height hebt gezet. Ik zal hier effe een commit op zetten

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lose-your-head-the-client-case	❌ Failed (Inspect)			Oct 9, 2024 0:54am
lose-your-head-the-client-case-5q6r	❌ Failed (Inspect)			Oct 9, 2024 0:54am

[Daan645]

Code ziet er goed uit ook heb je je goed aan de conventies gehouden