terug naar lessen overzicht

Zelfstudie 6: Week 3 opdracht verhaalgenerator

In deze zelfstudie serie:
checkmark simple
Portfolio opdracht verhaalgenerator: deel 2
checkmark simple
Portfolio opdracht verhaalgenerator: deel 3
checkmark simple
Portfolio opdracht verhaalgenerator: deel 4
checkmark simple
Portfolio opdracht verhaalgenerator: deel 5
checkmark simple
checkmark simple
checkmark simple
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

Portfolio opdracht verhaalgenerator: deel 1

Volg de video en codeer mee

In deze video leggen we de basis voor de mappen, bestanden en plaatsen we de basis structuur in de HTML.

Portfolio opdracht verhaalgenerator: deel 2

Volg de video en codeer mee

In deze video plaatsen we de content in de HTML.

Portfolio opdracht verhaalgenerator: deel 3

Volg de video en codeer mee

In deze video doen we de CSS!

Portfolio opdracht verhaalgenerator: deel 4

Volg de video en codeer mee

Nog meer CSS! Responsive design.

Portfolio opdracht verhaalgenerator: deel 5

Volg de video en codeer mee

De functionaliteit! Javascript voor de generator.

Een leuk Javascript voorbeeld

Typ dit in de console in je browser:

let naam = 'john doe'

naam = prompt('Wat is je naam?');

let karakterLowerCase = naam.charAt(0).toLowerCase()

if (karakterLowerCase == 'a' || karakterLowerCase == 'b' || karakterLowerCase == 'c') {

    alert('Hoi ' + naam + '. Jij mag in het groepje ABC samen met Albert, Claes en Bert')

} else if (karakterLowerCase == 'd' || karakterLowerCase == 'e' || karakterLowerCase == 'f' ) {

    alert('Hoi ' + naam + '. Jij mag in het groepje K samen met Maria Melanie en Maarten')

} else {

    alert('Hoi ' + naam + '. Jij mag in het groepje overig met Quintin en Zoof');

}

Het verhaal:

<h1>${hoofdrolSpeler}: de ${bijvn1} Boeddha</h1>

<p>

Er bestaat een japans verhaal over de ${bijvn1} Boeddha. Zijn hele leer bestond uit lachen en hij riep vaak ${benadrukken1}! 

Hij ging vaak midden op de ${locatie1} staan en begon dan ${bijvn3} te lachen. Vaak nam hij zijn ${object1} mee en liep er vrolijk mee rond. Hij had een grote ${bijvn2} kop.

Als de Boeddha lachte schudde zijn ${bijvn3} ronde buik heen en weer! 

<br><br>

De ${bijvn1} Boeddha had twee kale ${bijvn4} monniken in de leer. 1 van de monniken is nog aan de start van de training, hij heeft nogal moeite met lachen! ${karakter1} de ${bijvn5} monnik.

De andere monnik heet ${karakter2} de ${bijvn6}. Beiden kijken ze erg op tegen de ${bijvn1} Boeddha en zijn graag in zijn aanwezigheid. 

<br><br>

De lessen van de ${bijvn1} Boeddha zijn altijd kort maar krachtig. Hij sprak geen woord en beantwoorde alles met een lach!! 

Zelfs zei hij niks toen de ${bijvn5} monnik perongeluk de ${object2} kapot had gemaakt! Hij keek even verbaasd en begon te lachen. Als je de Boeddha vraagt over verlichting, dan antwoord hij met een lach.

Als je hem vraagt over de waarheden van het universum dan ook beantwoord hij met een ${bijvn1} lach!

<br><br>

Vandaag zijn ze alle drie op de ${locatie2} te vinden. En lopen ze lachend rond zelfs ${karakter1} de ${bijvn5} monnik lukt het vandaag aardig om een beetje mee te lachen! Hij heeft veel geleerd de afgelopen weken!

De mensen op de ${locatie2} zijn bekend met de ${bijvn3} lach van de ${bijvn1} Boeddha en kijken vrolijk toe! Het hele dorp is hierdoor altijd vrolijk! Veel mensen lachen mee en roepen de Boeddha en monnik na met

${benadrukken1} en ${benadrukken2}!

<br><br>

Lachen is belangrijk!

</p>

*Er zijn geen links bij deze video reeks.
icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze discord: HTML CSS JS beginners course

portfolio-cursus

logo - discord

#code-cafe

100+ leden