3. Bouwen

Bouwfase

component in Sveltekit

In deze fase heb ik het component gebouwd in Sveltekit. Ik heb rekening gehouden met webstandaarden, toegankelijkheid, responsief ontwerp en prestaties.

Webstandaarden

Ik heb gebouwd binnen het Sveltekit-framework. Ik heb dynamische HTML, serverside JavaScript en CSS gebruikt voor de werking van het component.

Toegankelijkheid

Ik heb tijdens het bouwen zoveel mogelijk audits uitgevoerd om tot een hoge score te komen. De pagina heeft nu een score van 88%, terwijl deze in het begin op 60% stond. Ik heb wijzigingen aangebracht aan de stijl van sommige knoppen om ze toegankelijker te maken.

Om de score naar 100% te brengen, moet er iets veranderen aan de header, wat niet mijn component is. Dit kan ik voorlopig terzijde laten. Het tweede probleem is dat ik een knop drie keer gebruik met dezelfde functie. Dit moet op termijn zeker worden veranderd, omdat we de pagina met termijn mooier en moderner gaan maken.

Responsief ontwerp

Om het responsief ontwerp te realiseren, heb ik met behulp van een mediaquery dit supereenvoudig gerealiseerd.

@media (max-width: 768px) {
 /* Style for small screens (up to 768px) */

 section {
  padding: 0 2em;
 }

 h2 {
  font-size: 2.5em;
 }

 p {
  font-size: 0.8em;
 }

 .page2-sponsor-page {
  padding-top: 5em;
 }

 .page2-options-wrapper {
  height: 67%;
  flex-direction: column;
 }

 .options-text-wrapper {
  top: 10%;
  left: 10%;
  width: 80%;
 }
}

Prestaties

Voor Performance hoef ik eigenlijk niets te doen, en dat is wel het fijne van Sveltekit. Het is super lichtgewicht en je kunt er gemakkelijk supersnelle pagina's mee maken. De audit gaf me 100%.

Formulier

Dit is de HTML die ik gebruik voor het formulier. Helaas gebruik ik nu nog JavaScript voor de werking van het formulier, maar ik ben van plan dit te veranderen zodat ik dit PE kan maken. Ik heb helaas nog geen PE in mijn formulier.

<button id="donate-button" on:click={() => showPopup = true}>Donate</button>

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" required>

  <label for="creditCardNumber">Credit Card Number:</label>
  <input type="number" id="creditCardNumber" required>

  <label for="expirationDate">Expiration Date:</label>
  <input type="date" id="expirationDate" required>

  <label for="cvv">CVV:</label>
  <input type="number" id="cvv" required>

  <label for="option">Select an option:</label>
  <select id="option" required>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
  </select>

  <label for="dollar">How much $:</label>
  <input type="number" id="dollar" required pattern="[0-9.]+$">

  <button type="submit">Donate</button>
</form>

<button on:click={closePopup}>Close</button>

Verbeteringen

In de toekomst wil ik de volgende verbeteringen aanbrengen:

• De toegankelijkheidscore naar 100% brengen.
• De knop met dezelfde functie in plaats van drie keer gebruiken vervangen door maar 1 functieknop.
• Het formulier PE maken.

Conclusie

Ik ben tevreden met het resultaat van de bouwfase. Het component voldoet aan de webstandaarden, is toegankelijk, presteert goed en is responsive.