Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je, zoals altijd, in: docs/INSTRUCTIONS.md

Een website dat het ruilproces en doneren mogelijk maakt voor stekjes/planten binnen Buurtcampus Oost Amsterdam.

• Beschrijving
• Kenmerken
• Bronnen

Het project bestaat uit 5 HTML pagina's: index.html, form.html, traded.html, donateform.html en donated.html. De flow van de pagina's kan op 2 manieren:

1. index.html -> form.html -> traded.html
2. index.html -> donateform.html -> donated.html

Het project werkt met required formulieren waarin je gegevens en foto's kan delen, verder kan je in form.html ook plantjes/stekjes kiezen van Buurtcampus Oost zelf. Na het proces krijg je in traded.html (ook in donateform.html) een code die je kan inleveren als bewijs bij het ophalen van je plantje.

Link naar de wiki: https://github.com/Tolga1999/the-client-case/wiki

De website is gebouwd in HTML, CSS en Javascript.

De HTML structuur ziet er als volgt uit: body -> overlay -> header -> main -> footer. Binnnen de body is er een overlay gemaakt voor het tonen van het menu, dit is gedaan met z-index: 1;. Verder staat er in main het formulier die je kan invullen.

de overlay staat standaard "uit" en wordt getoond met de JS onclick functie

<div class="overlay">
       <div class="buttons">
            <button class="ruilenDoneren" onclick="gaTerug()">Ga terug</button>
            <a class="ruilenDoneren" href="index.html">Home</a>
            <a class="ruilenDoneren" href="html/form.html">Ruilen</a>
            <a class="ruilenDoneren" href="html/donateform.html">Doneren</a>
       </div> 
</div>

Het menu staat standaard "uit" in CSS, door te klikken op de knop "Menu" wordt de visibility en opacity van het menu weer op 100% gezet. Er wordt een class toegevoegd aan overlay om de ease in animatie mogelijk te maken binnen de class.

hieronder de HTML en JS code voor het menu:

<div class="menu">
     <button id="menuButton" onclick="menuOpen()">Menu</button>
</div>

function menuOpen() {
    overlay.classList.add('overlayOn')
    menuButton.style.visibility = 'hidden'
    menuButton.style.opacity = '0'
    body.style.overflow = 'hidden'
}

.overlayOn{
    visibility: visible;
    opacity: 1;
}

Voor oplossingen en informatie over HTML, CSS en JS heb ik gebruik gemaakt van de volgende websites:

• stackoverflow.com
• w3schools.com
• css-tricks.com
• MDN web docs.