Week selectie #18

[Daan645]

Wat heb ik gemaakt?

Ik heb een weekselectie (tijdlijn) gemaakt waarin je de dagen van de huidige maand kunt bekijken zodat je daar uiteindelijk de programmering van kunt zien, ook kan je zien wat de huidige dag is deze is blauw aangevinkt.

Hoe werkt het?

Ik heb hier in comments uitgelegd hoe de week functie werkt op basis van het huidige jaar en de huidige maand worden de dagen opghaald ``js // maak een functie die het jaar en maand meeneemt const loadMonthDays = (year, month) => { // Maak een array met daarin de weekdagen const daysOfWeek = [ "zondag", "maandag", "dinsdag", "woensdag", "donderdag", "vrijdag", "zaterdag", ]; // Aantal dagen in de maand let daysInMonth = new Date(year, month + 1, 0).getDate(); // Maak een lege array waarin de maanddagen komen let monthDays = [];

// Loop door alle dagen van de maand
for (let day = 1; day <= daysInMonth; day++) {
  // voor elke dag in de loop wordt een date gemaakt die het jaar, de dag en de maand bevat
  let date = new Date(year, month, day);
  // met date.getDay haal je de dagnaam op aan de hand van een nummer in de array
  let dayOfWeek = daysOfWeek[date.getDay()];
  // Voeg de naam van de dag in de monthDays array
  monthDays.push({ dayOfWeek, day });
}
// Geef de waarde van monthday array terug
return monthDays;

}; // Haal de tijd en datum van vandaag op let dateAndTime = new Date(); // haal het huidige jaar op let year = dateAndTime.getFullYear(); // Haal de huidige maand op let month = dateAndTime.getMonth(); // Haal de dagen en de maand van het huidige jaar op en stop deze in de variabele daysMonth let daysInMonth = loadMonthDays(year, month); // Maak de variabele carousel aan let carousel;

Via deze loop worden de dagen weergegeven

```html
<ol bind:this={carousel}>
    <!-- Ga de daysinmonth array af en geef de uitkomsten weer als dayofweek en day -->
    {#each daysInMonth as { dayOfWeek, day }}
      <li>
        <!-- als de dag gelijk is aan de nummer van de huidige dag krijgt de button de active class -->
        <button class={day === currentDayNumber ? "button-active" : ""}>
          <!-- Weergeef de dag in een string-->
          <span>{dayOfWeek}</span>
          <!-- Weergeef de dag als een nummer -->
          <span>{day}</span>
        </button>
      </li>
    {/each}
  </ol>

Waar moet op gecontrolleerd worden?

Ik wil graag dat mijn code wordt gecontrolleerd op de DOD's 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

[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	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2024 11:15am
lose-your-head-the-client-case-5q6r	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2024 11:15am

[TomDeeterink1]

Ik heb de code bekeken en test doorlopen, het ziet er goed uit daan!

Top gedaan, misschien wel even kijken naar je mappen naamgeving. Maar dit is geen large issue.