Les 1: Function Components

Tijdens deze oefeningenreeks oefen je op het gebruik van function components, en op het opdelen van een interface in componenten. In deze oefeningenreeks wordt er vanuit gegaan dat een div gebruikt wordt als wrapping component, doe je dit niet, dan werkt de CSS eventueel niet.

Oefening 0: Nieuw project & basisstructuur

Maak een nieuw project aan en zorg ervoor dat de titel van de HTML-pagina “Oefeningen Les 1 – Function Components” wordt.

Bouw een component Exercise. Deze component bevat een div die, vanuit de JavaScript code, volgende opmaakt krijgt.

{
    box-shadow: 7px 2px 8px 1px rgba(18,89,46,0.67);
    background: #EEEEEE;
    min-height: 7em;
    padding: .5em;
    margin: 1.5em .5em;
}

1
2
3
4
5
6
7

Verder heeft de component een property title, en bevat de component een andere component ExerciseTitle. Deze laatste component heeft eveneens een property title. Kinderen van de component Exercise moeten getoond worden.

De component ExerciseTitle toont de inhoud van de title property en krijgt volgende opmaak.

{
    font-family: "Lucida Sans", Monaco, monospace
;
    font-size: 3rem
;
    letter-spacing: 3px
;
    color: #3A5D9B
;
    font-weight: 300
;
    font-style: oblique
;
    line-height: 1.2
;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Gebruik deze component om volgend resultaat te bouwen.

Oefening 1: Multiplication Table

Maak een nieuw bestand multiplication_table.js aan, hierin schrijf je de component voor oefening 1. De eerste oefening wordt vanuit dit bestand geëxporteerd onder de naam ExerciseOne.

Deze component bestaat uit een component MultiplicationTable die één property heeft, table. MultiplicationTable is opgedeeld in twee andere componenten Header en Row. Header heeft ook de eigenschap table. Row heeft twee eigenschappen, factor1 en factor2.

De eigenschap table geeft aan welke maaltafel afgeprint moet worden, de eigenschappen factor1 en factor2 geven aan welke 2 getallen er vermenigvuldigt moeten worden. Om table om te zetten in een string kan je gebruik maken van onderstaand object.

    const translate = {
    1: "One",
    2: "Two",
    3: "Three",
    4: "Four",
    5: "Five",
    6: "Six",
    7: "Seven",
    8: "Eight",
    9: "Nine",
}

1
2
3
4
5
6
7
8
9
10
11

Gebruik een for loop om de maaltafels af te printen.

Voor de opmaak kan je gebruik maken van onderstaande stijlen.

// Opmaak voor de component Header
const headerStyle = {
    fontSize: 50,
    color: "#e65100",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    backgroundColor: "#ff9800"
};

// Opmaak voor de component Row
const rowStyle = {
    fontSize: 20,
    color: "#455a64"
};

// Opmaak voor de component MultiplicationTable
const tableStyle = {
    fontFamily: "Comic Sans MS",
    textAlign: "center",
    width: 200,
    padding: 0,
    borderRadius: 20,
    backgroundColor: "#ffe0b2",
    filter: "drop-shadow(0px 0px 5px #666)",
    margin: "2em"
};

// Opmaak voor de component ExerciseOne
const exerciseStyle = {
    display: "flex"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Oefening 2: Rater

Voeg Font Awesome toe aan je project, dit project is beschikbaar vanop https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourselfopen in new window . Download de web versie van Font Awesome en pak het archief uit. Kopieer vervolgens de css en webfonts mappen naar je project en voeg tenslotte all.css toe aan je project.

Maak een nieuw bestand rater.js en bouw hierin een component ExerciseTwo die geëxporteerd wordt zodat je deze op de homepage van je website kan gebruiken om onderstaand resultaat te bouwen.

De component ExerciseTwo bestaat uit 3 andere componenten, Rater, Star en Label.

De component Rater krijgt twee properties, rating en max, de verhouding van deze twee bepaald de score (rating/max) die als property wordt doorgegeven aan de component Label.

De component star heeft 1 property, full. Als deze booleaanse eigenschap waar is wordt een volle ster getoond ander een lege. De sterren kunnen getoond worden met volgende twee CSS-klassen van Font Awesome (die aan een <i> tag meegegeven worden).

Volle ster ➝ fas fa-star
Lege ster ➝ far fa-star

De component Label bepaald het label van de rater aan de hand van een property score, je gebruikt hiervoor volgende tekst.

Kleiner dan 0.1 ➝ Disaster
Tot en met 0.3 ➝ Insufficient
Tot en met 0.5 ➝ Sufficient
Tot en met 0.6 ➝ Average
Tot en met 0.8 ➝ Good
Tot en met 0.9 ➝ Very good
Hoger dan 0.9 ➝ Excellent

Je kan gebruik maken van volgende CSS-code.

const exerciseStyle = {
    display: "flex"
}

const raterStyle = {
    textAlign: "center",
    padding: "2em",
    borderRadius: 2,
    backgroundColor: "#E2E2E2",
    filter: "drop-shadow(0px 0px 5px #666)",
    margin: "2em",
    width: "fit-content"
};

1
2
3
4
5
6
7
8
9
10
11
12
13

Oefening 3: Progressbar

Bekijk de HTML-code hieronder. Deze code bouwt een progressbar, de breedte van de bar wordt bepaald door de l180 op lijn 10. De waarde kan gaan van l0 = 0% tot l360 = 100%. Als de taak 25% voltooid is zal hier dus 0.25 * 360 = l90 staan.

<svg height="80" width="400">
     
     <!--De volledig bar, 100%-->
     <g fill="none" stroke="lightgrey" stroke-width="25">
          <path stroke-linecap="round" d="M20 55 l360 0" />
     </g>

     <!--Het voltooide gedeelte, l180 breed, of 180/360 = 50%-->
     <g fill="none" stroke="green" stroke-width="25">
          <path stroke-linecap="round" d="M20 55 l180 0" />
     </g>
     
     <!--De tekstuele weergave van het voltooide percentage-->
     <text x="180" y="25" fill="green" 
           style="font-family: Verdana; font-size: 25px; font-weight: bold">
          45 %
     </text>
</svg>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Maak een nieuw bestand progressbar.js en bouw hierin, op basis van bovenstaande HTML-code een component ProgressBar die de properties percentage en color krijgt. De progressbar is opgebouwd uit twee andere componenten Label en Bar die dezelfde properties krijgen.

Maak tenslotte een component ExerciseThree aan die geëxporteerd wordt en gebruikt wordt op je home page om volgend resultaat te bekomen (de gebruikte kleuren zijn "#ce4b99", "#ce1b29", en "#125b69".

Oefening 4: Comment Card

Tijdens deze oefening maak je een comment-card, één commentaar op een forum.

Maak een nieuw bestand comment-card.js aan en definieer hierin een component ExerciseFour. Bekijk vervolgens onderstaande structuur (elke kader duid een component aan) en bouw deze na.

CSS

Download het CSS-bestand voor deze oefeningen en plaatst het in de src map, zorg vervolgens dat dit bestand correct ingeladen wordt in comment-card.js.

Dummy data

Voeg onderstaande variabelen toe aan comment-card.js, deze stellen 2 comments voor die gevisualiseerd worden met de CommentCard component. Roep binnen ExerciseFour 2 keer de CommentCard component op, geef telkens een commentaar mee als property en maak hiervoor gebruik van de spread operator. De twee CommentCard componenten zijn van elkaar gescheiden met een <hr/>.

const comment1 = {
    firstName: "Evangeline",
    lastName: "Mcintyre",
    avatar: "http://placehold.it/150x150",
    content: "Nisi ipsum anim reprehenderit ex id laboris sunt deserunt quis. Id velit aliqua commodo reprehenderit nostrud sit elit exercitation mollit proident amet et amet. Do reprehenderit tempor tempor excepteur fugiat irure anim deserunt elit incididunt ut cillum dolore."
}

const comment2 = {
    firstName: "Dudley",
    lastName: "Gates",
    avatar: "http://placehold.it/150x150",
    content: "Reprehenderit sunt enim dolore cillum. Proident Lorem commodo ea duis tempor ipsum dolore in magna aliquip reprehenderit esse. Consequat do fugiat veniam esse anim ullamco eu pariatur laboris ullamco velit excepteur ipsum. Ea consectetur quis anim fugiat fugiat veniam Lorem exercitation Lorem aliqua do."
}

1
2
3
4
5
6
7
8
9
10
11
12
13

De CommentCard component heeft dus de properties firstName, lastName, avatar en content. De component bestaat uit een div die de CSS-klasse "card" krijgt. Binnen deze div worden de andere componenten Avatar en CommentSection gebruikt.

Avatar

De component Avatar heeft één property avatar en toont deze afbeelding via een <img> tag. Dit tag krijgt de CSS-klasse "avatar".

CommentSection

CommentSection heeft 3 properties, firstName, lastName en content. Daarnaast bestaat deze component uit een div die de CSS-klasse "comment-section" krijgt, binnen deze div worden de componenten Author en CommentContent gebruikt.

De component Author heeft twee properties firstName en lastName, de component toont deze in een container die de CSS-klasse "content" krijgt.

De component CommentContent heeft één property content en toont de inhoud hiervan in een paragraaf, deze paragraaf krijgt de CSS-klasse "content".

Oefening 5: Getallen kader

Maak een nieuw bestand number-grid.js en definieer hier een component ExerciseFive. Deze component roept 3 keer een component NumberGrid op, zodat volgend resultaat geproduceerd wordt.

Probeer zelf te bepalen welke properties NumberGrid nodig heeft. Om dit te implementeren kan je het aangeboden CSS bestand gebruiken. Elke cell in bovenstaande kaders is een button die de klasse "square" krijgt. Elke rij is eveneens een div die de klasse "grid-row" krijgt. Tenslotte is ook het volledig kader omringt door een div en krijgt deze div de klasse "grid".

Om het getal te bepalen kan je gebruik maken ven de formule i * n + j + 1, waar i het rijnummer is, n het aantal rijen in totaal, en j het kolomnummer.

# Les 1: Function Components

# Oefening 0: Nieuw project & basisstructuur

# Oefening 1: Multiplication Table

# Oefening 2: Rater

# Oefening 3: Progressbar

# Oefening 4: Comment Card

# CSS

# Dummy data

# Avatar

# CommentSection

# Oefening 5: Getallen kader