Front end components
Het component die ik heb gemaakt is een registreer en login functie. Aan de client side kunnen gebruikers zich met een formulier registreren bij mijn dating app. De gegevens worden daarna opgeslagen in een database. In het login formulier kan je dan inloggen met je account gegevens. Het formulier heb ik zo gemaakt dat deze progressive enhanced is.
Eigenlijk is progressive enhancement is de simpelste vorm, de scheiding tussen HTML, CSS en JavaScript. Je zou het kunnen zien als lagen van je applicatie of website. Dus de eerste laag is HTML daarboven is je laag CSS en als laatste de JavaScript laag. Deze JS laag is voor je website’s interactiviteit.
bron: Craig, W. (z.d.). Progressive Enhancement 101: Overview and Best Practices. WebFX. Geraadpleegd op 18 maart 2022, van https://www.webfx.com/blog/web-design/progressive-enhancement/
Binnen met feature ga ik form validatie toepassen met als laatste laag Javascript. De gebruiker krijgt feedback wanneer er een fout gemaakt wordt binnen het formulier. Dit wordt aangegeven met een error. Deze maakt ik in Javascript eerst haal elementen op en plaats ik ze in een const variable.
Daarna laat ik het checken in een if else statement. De progressive Enhancement werkt naar zeggen want zonder Javascript doet het formulier gewoon zijn werk. Gebruiker kunnen een account registreren en de data wordt naar mijn database verzonden
Allereerst een robuust en semantisch correct geschreven HTML. Het formulier heeft de correcte input “type” , “name” en ze zijn required. Daarnaast maak ik de styling met CSS bovenop de HTML. Binnen de CSS gebruik ik ook fallbacks voor de fonts maar ook variabelen voor de background. Deze definieer ik eerst in de root zodat ik deze in alle classes of id’s kan oproepen.
Voor de HTML gebruik ik semantisch geschreven code. Elk deel van de registratie/login formulier bestaat uit een fieldset met daarin een label en input field. De input fields hebben de correcte type zoals ‘text of ‘email’. De gebruiker is verplicht om alle velden in te voeren daarom is elk veld ‘required’.
<html>
<body>
<h1 class="header-text">Registratie</h1>
<section class="registratie">
<form id="progressive-form" action='/register' method= post >
<fieldset id="form-username">
<label for="username">voornaam</label>
<input id="username" type="text" name = 'username' placeholder="username" required/>
<p id="errorUsername"></p>
</fieldset>
<fieldset id="form-email">
<label for="emailadres">emailadres</label>
<input id="email" type="email" name = 'email' placeholder="emailadres" required/>
<p id="errorEmail"></p>
</fieldset>
<fieldset id="form-password">
<label for="pass">wachtwoord</label>
<input id="password" type="password" name = 'password' required/>
<p id="errorPassword"></p>
</fieldset>
<fieldset>
<button type="submit" id="submit" value="registreren">registreren</button>
</fieldset>
</form>
</section>
</body>
</html>:root {
--main-bg-color: #0ad4f7;
}background-color: var(--main-bg-color); /* CSS property achtergrond is in de root defined */
font-family: "Roboto",Tahoma, Verdana, sans-serif;`Met javascript heb ik validatie aan mijn formulier toegevoegd. Als eerste haal ik de verschillende HTML elementen op met document.getElementById en zet ik ze in een constante variabel. Daarna wordt de functie uitgevoerd. In de functie wordt er een check uitgevoerd of de invoervelden wel of niet zijn ingevuld. Dit doe ik met een aantal if else statements.
function checkInputs() {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
if(usernameValue === ""){
setErrorFor(username, 'Voornaam moet worden ingevuld');
}else {
setSuccessFor(username);
}
if(emailValue === ""){
setErrorFor(email, 'Email moet worden ingevuld');
}else if (!isEmail(emailValue)) {
setErrorFor(email, 'Email is niet valid')
}else{
setSuccessFor(email);
}
if(passwordValue === ""){
setErrorFor(password, 'Wachtwoord moet worden ingevuld');
}else {
setSuccessFor(password);
}
}Voor de API heb ik verschillende dingen geprobeerd. Mij leek het grappig om een pick up line API te gebruiken. Met deze API haal je met fetch random pick up lines op die je kan gebruiken als ijsbreker.
Met de Web Share API kan je teksten, bestanden, koppelingen of andere inhoud delen met andere. In mijn applicatie heb ik een button gemaakt met een onclick event. Met dit event wordt er een functie aangeroepen waarmee je de app kan delen. Eerst maak ik een shareData object aan met een aantal properties zoals de naam van mn app, omschrijving en de link.
const list = document.querySelector('.pickupLines');
const newURL = 'https://getpickuplines.herokuapp.com/lines/random'
function getRandomPickupLine() {
fetch('https://getpickuplines.herokuapp.com/lines/random')
.then(res => res.json())
.then(data => {
const lineListElement = `<li> ${data.line}</li>`
list.insertAdjacentHTML('beforeend',lineListElement);
})
}; const btn = document.querySelector('button');
const resultPara = document.querySelector('.result');
// web share op de button on click
btn.addEventListener('click', async () => {
try {
await navigator.share(shareData)
resultPara.textContent = 'Deel de school match app'
} catch(err) {
resultPara.textContent = 'Error: ' + err
console.log('browser support geen Web Share API')
//google chrome support het niet volledig. Probeer in Safari
}
});Mozilla. (2022, 18 februari). Fetch API - Web APIs | MDN. Geraadpleegd op 10 april 2022, van https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API