Hieronder heb ik beschreven hoe ik JS heb aangepakt en vervolgens uitgelegd wat ik in de bouwfase heb gecodeerd. Ook heb ik de code conventies en de custom properties toegevoegd die ik heb gebruikt.

Na het verkennen van HTML en CSS, alhoewel er nog veel te leren valt, maak ik nu kennis met de basisprincipe JavaScript. Hierbij ga ik ontdekken hoe JavaScript de functionaliteit van een website kan verbeteren en interactie met de gebruiker mogelijk maakt. Tijdens deze sprint is het belangrijk om deze 3 termen te kennen: Queryselectors, Classlist & AddEventListener. Hierbij hebben we een aantal bronnen gekregen om kennis op te doen. Ik heb gekozen om de video te bekijken van CSS-Tricks, want zo kan ik het beter begrijpen. Hieronder staan mijn aantekeningen van de video en uiteindelijk de opgedane kennis toe te passen in mijn eigen project.

var is een variabele die gebruikt kan worden in JS document. je kan ook const of let gebruiken. Zo ziet het eruit:

 var button; 

Deze variabele kan een waarde/ naam krijgen of gerefereerd worden naar een HTML element, class of ID. Om deze referentie te maken, gebruik je de document.querySelector

Uiteindelijk krijg je dan:

var button = document.querySelector("button");

Om te controleren of de variabele goed is gerefereerd, kan je gebruik maken van

console.log()

In de video werd er uitgelegd dat als er in de HTML geen class wordt aangegeven, maar wel in de CSS, dit in JavaScript toegevoegd kan worden door: `classList.add'

Hier is het voorbeeld dat werd gegeven:

HTML

<div> 
  I'm an element
</div>

CSS

div {
border: 2px solid gray;
padding: 2rem;
margin: 1rem;
}

div.yay {
background: pink;
}

JS

element.classList.add("yay");

Om een functie aan deze button te geven, zoals een 'click' functie, zorgt ervoor dat een bepaalde element een actie uitvoert. Dit doe je met addEventListener.

Dan krijg je dit:

button.addEventListener("click", function() {
element.classList.toggle("yay");
});

In mijn project heb ik een buurtinitiatievenpagina gemaakt. Om het zo overzichtelijk mogelijk te houden voor de gebruiker en dat zij snel kunnen vinden wat bij hun interesses past, heb ik een filtersysteem proberen te maken op basis van categorieën. In dit geval is het cultuur en sport. Dit is de gehele Javascript code die ik heb gemaakt:

  const filterButtons = document.querySelectorAll('.filters button');
  const cards = document.querySelectorAll('.card');

  filterButtons.forEach(button => {
    button.addEventListener('click', function() {
      let categorie;
      if (this.classList.contains('alles')) {
        categorie = 'alles';
      } else {
        categorie = this.classList[0];
      }

      cards.forEach(card => {
        const cardCategorie = card.getAttribute('data-categorie');
        if (categorie === 'alles' || categorie === cardCategorie) {
          card.style.display = 'block';
        } else {
          card.style.display = 'none';
        }
      });
    });
  });

De eerste stap is het selecteren van het element, ik heb dit zo gedaan:

  const filterButtons = document.querySelectorAll('.filters button');
  const cards = document.querySelectorAll('.card');

Hier heb ik alle classes met .filters button geselecteerd en een variabel gegeven met de naam filterButtons. Hetzelfde met de alle classes met .card en hiervan een variabel van gemaakt met de naam cards.

Daarna heb ik voor dit stukje code de filterbuttons een functie gegeven voor wanneer er wordt geklikt. Vervolgens de geselecteerde categorie te bepalen op basis van de klassen van de geklikte knop.

  filterButtons.forEach(button => {
    button.addEventListener('click', function()

Dit selecteert alle filterknoppen en voegt een event listener toe aan elk van hen en reageert op een klikgebeurtenis op de filterknop.

Hieronder staat een stukje code wat bepaalt welke categorie is geselecteerd op basis van de klassen van de geklikte knop. Als de knop de class 'alles' heeft, wordt 'alles' als categorie ingesteld. Zo niet, dan wordt de eerste klasse van de geklikte knop gebruikt als categorie.

let categorie;
if (this.classList.contains('alles')) {
  categorie = 'alles';
} else {
  categorie = this.classList[0];
}

Tot slot geldt voor dit stukje code dat het reageert op gebruikersinteractie met filterknoppen. Het heeft als doel om de weergave van kaarten op een webpagina te beheren op basis van de geselecteerde categorieën. Het vergelijkt de categorie van elke kaart met de geselecteerde categorie. Als de geselecteerde categorie 'alles' is of overeenkomt met de categorie van de kaart, wordt de kaart weergegeven (display: block). Zo niet, dan wordt de kaart verborgen (display: none).

 cards.forEach(card => {
        const cardCategorie = card.getAttribute('data-categorie');
        if (categorie === 'alles' || categorie === cardCategorie) {
          card.style.display = 'block';
        } else {
          card.style.display = 'none';
        }

Hier is het resultaat van de JS code die ik heb geschreven. De interactie werkt dat als je op een categorie klikt de resultaten tonen, in dit geval de buurtinitiatieven van dezelfde categorie.

(PSA: heb de kaarten nog geen styling gegeven, want had volledig gefocust op de JavaScript code 😵‍💫).

Ik heb voor mezelf 5 conventies uitgekozen waaraan ik mij ga houden tijdens het bouwen van mijn website om mijn code zo overzichtelijk mogelijk te houden.

1. Indentation

Gebruik 2 spaces per keer en geen tabs, of een mix van beide.

✔︎

 <section>
   <h1>Voorbeeld</h1>
 </section>

✗

 <section>
     <h1>Voorbeeld</h1>
 </section>

2. Remove trailing white spaces

Geen onnodige spaties

✔︎

 <p>Voorbeeld</p> 

✗

 <p>Voorbeeld </p> 

3. Capitalization

Geen hoofdletters gebruiken

✔︎

<section class= "overzicht-cards">
</section>

✗

<section class= "Overzicht-Cards">
</section>

4. Property Name Stops

✔︎

h1 {
  font-weight: bold;
}

✗

h1 {
  font-weight:bold;
}

5. HTML Validity

Gebruik valide HTML.

✔︎

<section>
<h1>Voorbeeld</h1>
<h2>Voorbeeld</h2>
<p>Dit is een voorbeeld</p>
</section>

✗

<section>
<h2>Voorbeeld</h2>
<h1>Voorbeeld</h1>
<p>Dit is een voorbeeld</p>
</section>

Na de deeltaak 'look-and-feel-custom-properties' te hebben gemaakt, heb ik de custom properties toegepast op mijn website. Ik heb gebruik gemaakt van kleurcodes, font-property en @media (prefers-contrast: more).

In de :root gebruik ik de custom properties voor kleurcodes, hiermee kan ik de kleuren (waarden) een naam geven en gebruiken als variabel in mijn CSS bestand. Ik heb ervoor gekozen om de drie meest voorkomende kleuren een naam te geven (primaryColor, secundaryColor & tertiaryColor) en de kleuren die vrijwel altijd hetzelfde blijven de naam van de kleur zelf te geven, zoals zwart en wit.

:root {
--primaryColor: #46aa64;
--secundaryColor: #0a3250;
--tertiaryColor: #d4e9db;
--grey: #dfe4e5;
--black: #000000
 --white: #ffffff;
}

Ook is er in de huisstijl vastgelegd om in verband met toegankelijkheid een media query vast te leggen met prefers-contrast: more, zodat er indien nodig een duidelijker contrast ontstaat.

@media (prefers-contrast: more) {
  :root {
    --green: #135c29;
  }
}

Ik heb ook een font property gebruikt om vrijwel alle properties van de font die vaak voorkomen aan te duiden in 1 line code (shorthand).

font: normal normal normal 16px/1.5 "AvantGardeGothicMedium";`