3. Bouwen - RayanSp/vervoerregio-amsterdam GitHub Wiki
Een van de wensen van de opdrachtgever was een plek waar de gebruiker contact kan opnemen, voor meer duidelijkheid over toegankelijkheids richtlijnen. (zie issue)
Ik heb dit gedaan door middel van een formulier, gekoppeld aan een e-mail address. Het e-mail address krijgt een unieke key, die ik verwerk in een hidden input. Deze key heb ik in mijn .env bestand staan en importeer ik naar mijn component.
Om dit te realiseren heb ik onderstaande code gebruikt:
let status = "";
const handleSubmit = async data => {
status = 'Submitting...'
const formData = new FormData(data.currentTarget)
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
const response = await fetch("https://api.web3forms.com/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: json
});
const result = await response.json();
if (result.success) {
console.log(result);
status = result.message || "Success"
}
}
<section class="bot-right-container">
<section class="text-container">
<h3>Contact opnemen?</h3>
<br />
<p>
Indien u vragen heeft of mocht er nog enige onduidelijkheid bestaan, kunt u via
onderstaand formulier contact met ons opnemen.
</p>
<form on:submit|preventDefault={handleSubmit}>
<fieldset class="form-vraag">
<input type="hidden" name="access_key" value={data.vragen}>
<label for="name">Naam</label>
<input placeholder="name" type="text" name="name" required />
<label for="mail">Email</label>
<input placeholder="email" id="mail" type="email" name="email" required />
<label for="vraag">Uw vraag</label>
<textarea id="vraag" name="message" required rows="3"></textarea>
<input class="form-button" type="submit" />
</fieldset>
</form>
</section>
</section>
Bron: https://web3forms.com/
Het contrast was niet goed nadat ik dit heb getest met lighthouse en een app genaamd colour contrast analyzer. Zie hieronder de resultaten van deze app:
![Schermafbeelding 2024-02-07 om 16 04 43](https://private-user-images.githubusercontent.com/112861069/303028266-78c4f8b9-3516-4b47-b02b-84d783d1a314.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzAzMDI4MjY2LTc4YzRmOGI5LTM1MTYtNGI0Ny1iMDJiLTg0ZDc4M2QxYTMxNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02NThlOGFiMjc1M2MzOWI5MzVmM2U2MTJjMWFlNGNhZjdkNTIzZTFjZTkyNmI4ZjJhMjM5ZDA2NDFiZDMzYTA5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.x3zMhQIQh0gabJVR3ypfyH_qFmsZbZZu8F6pIyZyutk)
![Schermafbeelding 2024-02-07 om 16 03 59](https://private-user-images.githubusercontent.com/112861069/303028577-78738bab-70b9-4781-89be-decf27d34765.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzAzMDI4NTc3LTc4NzM4YmFiLTcwYjktNDc4MS04OWJlLWRlY2YyN2QzNDc2NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03YjE0ZGY3YWI3NTc4MmMyZTAxN2U1ODUwMzhlZjM5YTBkZmNjYzk1YzQ1OWNhOWYyMTk3NWEyZDRjNmFjZDc0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.zwCBhGbjXXPtBLK1PXx5z4Rtyo7-HXtKO5u0Aa0r4uo)
Wat is er nou precies aangepast? Hier is een foto van de before en een foto van de after:
![Schermafbeelding 2024-02-07 om 16 09 00](https://private-user-images.githubusercontent.com/112861069/303029305-21c9864d-39dc-48c8-910c-2d711debb79b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzAzMDI5MzA1LTIxYzk4NjRkLTM5ZGMtNDhjOC05MTBjLTJkNzExZGViYjc5Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYWViZjcwODI0YjY3YmM0ZDdkNzVkMGE4NDZlNmMzNzY1OGZlMGViYzkwNWZmNDRhOTdlMTRkNTQ4NTk5YWY2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.2pbAHKoIc0Oub5DPAFcaamIiC-1pzi_i9Yh5q9qyBak)
![Schermafbeelding 2024-02-07 om 16 04 06](https://private-user-images.githubusercontent.com/112861069/303029143-67598ad5-9c3d-4393-860e-5a4bcef3f7ec.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzAzMDI5MTQzLTY3NTk4YWQ1LTljM2QtNDM5My04NjBlLTVhNGJjZWYzZjdlYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kZGFhNzljOTliY2NlZjdkMjMxZjc4ZTJmMThjMmIyZGY5MjlmNDY5ZDJiN2JhYzQ4MTFlZjM2ZDU2OWMxZWQ2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.-we7epcp8EGSvgX98m4jpI_z1ZgcNISoFm_cqlP4MYQ)
Ik heb deze aanpassing gemaakt om een erg simpele reden, voor de eindgebruiker. Het is over het algemeen essentieel dat de website die je bouwt, toegankelijk is voor elke gebruiker. Hier probeer ik mij dan ook zeker aan te houden. Hier ontstaat wel een klein conflict, de kleuren die gebruikt worden horen wel allemaal bij de huisstijl, maar de roze kleur die ik heb weggehaald is de primaire kleur.
Ik heb de lightmode/darkmode feature gebouwd, dit was 1 van de taken die nog open stonden op het oude projectboard.
![Schermafbeelding 2024-02-28 om 12 15 33](https://private-user-images.githubusercontent.com/112861069/308527487-67736a03-7a10-4d36-9a3c-5094b4cacd44.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzA4NTI3NDg3LTY3NzM2YTAzLTdhMTAtNGQzNi05YTNjLTUwOTRiNGNhY2Q0NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMWIyZDc0MDI1ODU3N2Q4ZjQxM2VmMTE1YTMzNTQyMDMyNjNiZThlNTI5NDNiZDE5ZDkxODQyOTAyNjFkYzlkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.kPFbeePLzkvZ5zSG7p2QhTLya4C_sSEYnl1XevDmokM)
![Schermafbeelding 2024-02-28 om 12 15 42](https://private-user-images.githubusercontent.com/112861069/308527498-443784ac-4ecc-4dc1-950d-99c8f3b6a685.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzA4NTI3NDk4LTQ0Mzc4NGFjLTRlY2MtNGRjMS05NTBkLTk5YzhmM2I2YTY4NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iYThmMDNkM2Y1YmZlYzcyNjc3OGIxZjZmYzIzODcwODM3ZDA5YTg4ZWZjMDU1YzAwNDJmYzU2OWNkMTAzODcyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.XRqDu0Ldup3GhLefORc4HL-oBHqtcmS9jTfNTIt9uoU)
Verder heb ik ook progressive enhancement toegepast. Voor de gebruikers die javascript uit hebben staan, wordt het dark/lightmode icoontje niet vertoond, dat heb ik gedaan met onderstaande code.
![Schermafbeelding 2024-02-28 om 12 18 02](https://private-user-images.githubusercontent.com/112861069/308528072-6242c7cc-4584-41ea-a566-f340c7c80222.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzA4NTI4MDcyLTYyNDJjN2NjLTQ1ODQtNDFlYS1hNTY2LWYzNDBjN2M4MDIyMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05M2Q4YmE5MzU0NjJmMzMwNWZjZWYyZWJiNWQwZTQyODFlY2FhZmYwMDlhM2IzZGE4ZTYxMDgyMDk0ODdmZWMzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.2QgGbmCoqhXXgS5QYKv-s0MP1ngPIMWALFmAeBjMKzs)
![Schermafbeelding 2024-02-28 om 12 18 12](https://private-user-images.githubusercontent.com/112861069/308528076-13aacfa2-4a75-4357-b461-ef72faa23c1b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzA4NTI4MDc2LTEzYWFjZmEyLTRhNzUtNDM1Ny1iNDYxLWVmNzJmYWEyM2MxYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jYmZmYjU1YjJmNTgwOWYzMTE2MDBkZTIyMzAxZjg4NDg2YTEyMzQyNzFiNjEzMmFmY2FjOTQ4MjMxZjc4ODQyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.9Hcw4JCvnT0zLwG_MTae4aJtfPmEzaxAcKiigYK95N4)
import { onMount } from 'svelte';
let jsEnabled = false;
onMount(() => {
// JavaScript is enabled, toggle the class
jsEnabled = true;
let icon = document.querySelector('.disable-js');
icon.classList.toggle('disable-js');
});
https://www.youtube.com/watch?v=9LZGB3OLXNQ
Na het bouwen van de lightmode/darkmode, moest er toch nog wat toegevoegd worden. Na het refreshen van de pagina, sprongen de kleuren weer terug naar de oorspronkelijke thema. Door gebruik te maken van localstorage, is het mogelijk om de laatst geselecteerde thema te onthouden. Na het refreshen van de pagina, blijft de laatst geselecteerde thema dus staan. Onderstaande js code heb ik daarvoor gebruikt.
function toggleLightMode() {
if (localStorage.getItem('lightMode') === null) {
document.body.classList.add('lightmode');
localStorage.setItem('lightMode', isLightMode);
} else {
document.body.classList.remove('lightmode');
localStorage.removeItem('lightMode', isLightMode);
localStorage.setItem('darkMode', isDarkMode);
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/inverted-colors
Before
![Schermafbeelding 2024-03-05 om 09 57 28](https://private-user-images.githubusercontent.com/112861069/310047834-46eee83e-eb4a-4103-a240-ef0acdefefc0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzEwMDQ3ODM0LTQ2ZWVlODNlLWViNGEtNDEwMy1hMjQwLWVmMGFjZGVmZWZjMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yYjAzYmZkMWI0ZTE3NTczMWM1ZjVlZDRlY2I5YjFlMjdkOTRhYzVlZDk1NmYzYzE2NWU5ZTg3YzAwOTFlYWNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.aQAQbmhHRJuUKvZDlRalYHqTL96xIZzHCE0rHKy8Cj4)
https://www.youtube.com/watch?v=9eRj1802p90 https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/
Bron: https://www.youtube.com/watch?v=sEJB7FtBoug
Na het bouwen van mijn formulier voor de opdrachtgever, heb ik wat testen uitgevoerd. Hieruit bleek dat er nog wat verbeterpunten waren op basis van accessibility. Dit is natuurlijk erg belangrijk om te verbeteren voor een betere ervaring van de eindgebruiker.
![Schermafbeelding 2024-06-05 om 11 03 46](https://private-user-images.githubusercontent.com/112861069/336766806-75dc482e-da4d-4112-9a99-64703dc87167.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzM2NzY2ODA2LTc1ZGM0ODJlLWRhNGQtNDExMi05YTk5LTY0NzAzZGM4NzE2Ny5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hMmQyNTdhYjRkMTY4YzNiOThmMmYzYzlhNWJiNTc3OTkwMmVmOTIyYTJiNGNmYjAxZDNiNWQ1OTJhNWY0NTZkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.SdMgsdH-LV7GpDWPx0cQyPTHjPU-gs2FJGiSBF25rDE)
![Schermafbeelding 2024-06-05 om 11 08 22](https://private-user-images.githubusercontent.com/112861069/336767850-fd923c0d-e759-4252-aa03-405cf05a78a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzM2NzY3ODUwLWZkOTIzYzBkLWU3NTktNDI1Mi1hYTAzLTQwNWNmMDVhNzhhNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05OGQ0ODAyZTMxNWFhMDJmMDFjOGQ5OTFjZGUxMzVhODlkOWYzYzBkYzczMzIyMzhmOWM5M2IzNGU2MmQ4ZGJkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ggpjAZ9IthwHRuDq4-gPwjS9knOzWWcUvpMDfQhzF30)
Na het optimaliseren van de toegankelijkheid had ik een betere score en is de website een stuk gebruikersvriendelijk geworden.
...
Na het invullen en versturen van een formulier, wordt het verstuurd naar hygraph:
Hier is het terug te vinden in hygraph:
![Schermafbeelding 2024-06-07 om 00 12 19](https://private-user-images.githubusercontent.com/112861069/337452941-9d6b5b2d-6ee4-493a-9dae-661d9d1db508.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzM3NDUyOTQxLTlkNmI1YjJkLTZlZTQtNDkzYS05ZGFlLTY2MWQ5ZDFkYjUwOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00MGI3NmU1NWFkNmM1NzAxYzdiODZiN2E3MjNjMWEyZTUzYjEyZmJlYTc1YTBjNjEwMDk2ODhkYWY5ZDE2ZTEzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.kE1hlHpeEUCzE24ZQ0g9SM6FzCqZ9FWnW-3zXpM8sQs)
De code die hiervoor wordt gebruikt:
export const prerender = false;
// Data naar Hygraph sturen
export const actions = {
default: async ({ request, url }) => {
const formData = await request.formData();
let name = formData.get("name");
let email = formData.get("email");
let vraag = formData.get("vraag");
// Maak nieuwe content aan voor Hygraph
const mutation = `
mutation {
createContact(data: { name: "${name}", email: "${email}", vraag: "${vraag}" }) {
name
email
vraag
}
}
`;
// Hygraph url
const endpoint =
"https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/clbe0zp4u2fkz01uj486xdza4/master";
// Hygraph autorisatie
const HYGRAPH_TOKEN = import.meta.env.VITE_HYGRAPH_KEY;
const headers = {
Authorization: `Bearer ${HYGRAPH_TOKEN}`,
};
// Voer de mutatie uit
const postData = await graphqlRequest(
endpoint,
mutation,
undefined,
headers
);
return { success: true, postData };
},
};
Hieronder is de code die ik gebruik om mijn formulier te enhancen. Bij het verzenden van het formulier zie je in beeld 'versturen...' staan, die laat zien aan de gebruiker dat er wordt gewerkt aan het versturen van het formulier.
<form action="/info" use:enhance={handleEnhance} on:submit={() => (isSubmitting = true)} method="POST">
let isSubmitting = false;
let successMessage = "";
let errorMessage = "";
function handleEnhance({ formElement }) {
const handleSubmit = async ({ result }) => {
isSubmitting = false;
successMessage = "";
errorMessage = "";
if (result.type === "failure") {
errorMessage = result.data.error;
} else if (result.type === "success") {
formElement.reset();
successMessage = result.data.message;
}
};
return handleSubmit;
}
<button type="submit" class="form-button" disabled={isSubmitting}>
{#if isSubmitting}
versturen...
{:else}
Verstuur
{/if}
</button>
Voor het versturen:
![Schermafbeelding 2024-06-11 om 10 34 03](https://private-user-images.githubusercontent.com/112861069/338501715-810ca47d-6acf-4992-8e5a-34085e870bbd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzM4NTAxNzE1LTgxMGNhNDdkLTZhY2YtNDk5Mi04ZTVhLTM0MDg1ZTg3MGJiZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYmM1ZjY1NmRjMTE1OWNlMzJhNDBjMmFkZDQwNjIyM2EyZDFmZjMwYWZkYTdlOWMzZTgxN2QwMzA5ZGU4MzA4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.G43jt-_i5l_Ww7T7_1AxPOVZ0XWO2Qojht66MPO3hvU)
Tijdens het versturen:
![Schermafbeelding 2024-06-11 om 10 35 41](https://private-user-images.githubusercontent.com/112861069/338501783-d345fb0d-063a-43b1-8d28-dce0341d9910.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzM4NTAxNzgzLWQzNDVmYjBkLTA2M2EtNDNiMS04ZDI4LWRjZTAzNDFkOTkxMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZTIxOGEyOTUzYjQ5ZDA4MTM3NWRhMjllNzczMDVmNDY1MjVmNDE1NDk3ODRlMzU5NDI5ZjYxYWNkMGY5OTkxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.jGUySv9umgg5eEQLjCS7q280M4hpFU4N5z86-sb-j7E)
Error na het versturen:
![Schermafbeelding 2024-06-12 om 11 20 47](https://private-user-images.githubusercontent.com/112861069/338904057-d6a647d8-2636-499b-9765-fc0f179bbb75.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUxNTM4ODksIm5iZiI6MTcyNTE1MzU4OSwicGF0aCI6Ii8xMTI4NjEwNjkvMzM4OTA0MDU3LWQ2YTY0N2Q4LTI2MzYtNDk5Yi05NzY1LWZjMGYxNzliYmI3NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwMVQwMTE5NDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMTE1NzM1MjI4NmIwMTFlMzEzODE3NzI0ODdiMDRlNmRlOTgxYTBhZjZlNmUwNWY2NTdkY2I1YmJiZDBiZjZhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.9EdLStmlIeYpVCINrCJwCHSdJy0TssLEJRSHaQ-KRy8)
De criteria vertaling switch is een feature die ik heb gebouwd, waarbij de standaard w3c tekst die wordt gebruikt op de tool van vervoerregio, een vertaling moet krijgen zodat het makkelijker te begrijpen is. Hiervoor heb ik samen met Eliza eerst de criteria vertaald en in een word document gezet, vervolgens heb ik de vertaling in hygraph gezet.
Met onderstaande query heb ik de vertaalde tekst opgehaald, dit is te vinden in toolboard.js in het mapje 'queries'.
criteria {
text
}
Vervolgens moest ik een button maken die ervoor zorgt dat er geswitched wordt tussen de 2 teksten. Dit was nogal lastig gezien elke button alleen de tekst moest vertalen van de criteria waar die bij stond. Met onderstaande code doe ik dat, Cyd heeft mij hier ook bij geholpen en gechecked.
function translate(event, criteriumNumber) {
console.log(event, criteriumNumber);
// Get clicked button with event.target
const button = event.target
//
const activeSection = button.closest('details')
const uitleg = activeSection.querySelector('.richtlijn-uitleg')
uitleg.classList.toggle('moeiluk')
button.classList.toggle('moeiluk')
}