Een smoesjesgenerator maken in html, css en javascript

Vaak te laat, vergeet je je huiswerk soms te maken, heb je moeite om elke keer weer met een goed excuus te komen? In deze oefening gaan we een smoesjesgenerator pogrammeren in HTML en Java. Natuurlijk gaan we er ook voor zorgen dat hij er piekfijn uit ziet, dus gaan we ook met Cascading Style Sheet aan de gang.

Voorbereidingen

Creeer een CodePen account of log in op https://codepen.io

Open een nieuwe lege “Pen” en geef het een naam

De webpagina

Een webpagina bestaat doorgaans uit minimaal 2 en eventueel 3 onderdelen. De html met weer te geven elementen, de stylesheet waarin staat hoe de elementen er uit moeten zien en eventueel JavaScript om elementen te manipuleren, interactiviteit te creëren of dingen te automatiseren. De smoesjesgenerator bevat alle 3 deze elementen.

De HTML

Begin met het invoegen van HTML code. HTML bestaat uit verschillende tags met allerlei inhoud. Bijna alle tags hebben een opening en een afsluiting en elementen kunnen zich binnen een ander element bevinden.

Je begin met het benoemen van het begin en einde van de html code met de opentag <html> en de sluittag </html>

De html code bestaat uit 2 delen, een head, met daarin de titel en eventuele andere metadata, en een body met daarin de dingen die weergegeven moeten worden op de pagina.

Dus voeg nu een open en sluit tag  voor de head <head></head> en voor de body <body></body> toe tussen de html tags

Je hebt nu:

Je kunt tussen je head open en sluit tags een titel toevoegen met de title tag

Een DIV is een vak waar je dingen in kunt plaatsen, deze kun je dan de plaats en het uiterlijk geven dat je wilt. Omdat we straks de tekst een specifiek plekje willen geven zet je de inhoud van de generator in een div met het id container. ID’s kun je gebruiken om stylesheets en Javascript specifiek op een element toe te passen

.

Je ziet nu nog steeds een lege pagina, laten we die maar eens gaan vullen.

Begin met een header, een koptekst. Hiervoor zijn headers van verschillende niveau’s beschikbaar. Standaard worden deze headers groter en dikgedrukt weergegeven (dat passen we later nog aan naar hoe we het precies willen hebben.) Voeg nu <h2></h2> tags toe met een weer te geven titel

Vervang h2 maar eens door h1 of h3 en kijk wat gebeurt.

Nu gaan we één of meerdere paragrafen toevoegen. Deze definieer je met <p></p>

nu moet er nog een knop bij die later ons JavaScript uit gaat voeren en een lege plek waar we een gegenereerde tekst in gaan plaatsen. Dus een lege paragraaf en een knop. Voor de knop gebruik je de tag <button></button> met daartussen de tekst die op de knop getoond moet worden.

Om ons JavaScript de knop en de lege paragraaf te kunnen laten herkennen voegen we een ID toe aan de open tags <button id=”knop”> en <p id=”Smoesje”>

Je krijgt nu ook een knop te zien, maar er gebeurt nog niets als je daar op klikt.

Daarvoor gaan we een JavaScript toevoegen.

JavaScript

We beginnen met een stukje code dat gaat “luisteren” naar of er op de knop geklikt wordt.

We zoeken eerst naar het element in ons document

document.getElementById("knop")

Om daarop vervolgens te gaan luisteren naar een click

.addEventListener("click"

Met de opdracht die uitgevoerd moet gaan worden als er geklikt wordt

, GenereerSmoesje)

Dit geeft de code

We roepen nu de functie GenereerSmoesje aan, maar die bestaat nog niet.

Laten we beginnen met een functie die een standaard tekst toevoegt aan de pagina.

we beginnen met het definiëren van de functie GenereerSmoesje

function GenereerSmoesje()

Waarbinnen we in ons document zoeken naar een element met het id “tekstje”

{ document.getElementById(“Smoesje”)

Waar we de innerHTML (de code binnen de tags) gaan vervangen door een standaard tekstje

.innerHTML = “standaard tekstje”;}

Klik maar eens op de knop om te kijken wat er gebeurd.

de lege paragraaf “tekstje” is nu vervangen door het tekstje “Een of ander tekstje”.

Maar dit willen we variabel maken, ofwel de innerHTML moet gevuld worden met een variabele

we maken eerst een niet zo variabele variabele

  var vartekst = "standaard tekstje uit variabele"

die we daarna invullen in onze innerHTML van de “tekstje” paragraaf

.innerHTML = vartekst;

Dit geeft als resultaat

Nu kunnen we de variabele vartekst gaan vullen met willekeurige onderdelen.

De smoesjes gaan bestaan uit een willekeurige intro, een willekeurige boosdoener en een willekeurig excuus.

Hiervoor moeten we eerst drie lijsten maken waaruit het script de drie onderdelen kan kiezen.

We beginnen met een variabele intro om onze tekst mee te beginnen, bijvoorbeeld;

var Intro = [

"Het spijt me, maar",

"Dit geloof je nooit, maar",

"Ik heb het echt geprobeerd, maar",

"Het is echt bizar,",

"Ik baal er enorm van, maar",

"Dit was echt een noodsituatie want"

];

Deze variabele is dus gevuld met een opsomming, je kunt hier iets uit halen door de variabele aan te spreken met daarbij de waarde die je wil hebben (beginnend bij 0)

vul de variabele tekst maar met de eerste waarde uit deze lijst intro[0]

Probeer ook eens intro[1] en intro[2]

Door de waarde tussen de [] willekeurig te maken wordt er een willekeurige waarde uit de lijst genomen en in de vartekst variabele ingevuld. Dit doe je door een willekeurige waarde tussen 0 en 1

Math.random()

te vermenigvuldigen met de lengte in aantal items van onze variabele

* liefwoord.length)

en dit naar beneden af te ronden om een geheel getal te krijgen

Math.floor(

Je zult nu een willekeurige waarde te zien krijgen als je op de knop klikt.

Maak nu een tweede variabele met een opsomming aan boosdoeners

en de derde, met de excuses

en voeg deze samen tot een zin in de vartekst variabele

Doe dit door eerst uit elk deel de willekeurige waarde te selecteren in een nieuwe variabele

En deze daarna in de variabele “tekst” samen te voegen tot een zin.

Gefeliciteerd, je hebt een webapplicatie geschreven!

De Cascading Style Sheet

Laten we beginnen met het vervangen van die saaie witte achtergrond

We zoeken een afbeelding op op het internet (of zoals in dit geval een willekeurige afbeelding uit een gallerij op unsplash.com en we zeggen dat de body deze afbeelding op de achtergrond moet tonen

body{background:  url(http://www.willemwortel.net/img/smoesjes.png);

hem 1000 pixels breed moet tonen

 background-size: 1000px;

en niet moet herhalen

background-repeat: no-repeat;

Stel een ander lettertype in door te bepalen dat je de sans-serif familie wil gebruiken

font-family: sans-serif;

En de tekstkleur wit

color: #FFF;

Om de tekst leesbaar te houden op lichte delen van de achtergrond kunnen we er nog een schaduw achter zetten met 2pixels verticale offset, 2px horizontale offset, 5px blur en zwart 30% ondoorzichtig

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

Bekijk het resultaat weer even, de onderdelen kunnen nog wat beter gepositioneerd worden.

Verplaats de container div wat naar beneden verplaatsen ten opzichte van de bovenkant van de pagina. Je kunt je css code specifiek voor een tag met een ID maken met een stukje #id style, in dit geval maak je dus een stukke stylesheet dat de body{...} style uitbreid met de #container{...}

style

Maak nu je gegenereerde tekstje wat groter door de font-size van de paragraaf met ID tekstje op 24 pixels te zetten en dikgedrukt

Et voila! Een unieke smoesjesgenerator. Vergeet hem niet met de klas te delen.

Deze smoesjesgenerator is natuurlijk ook aan te passen naar een klusjesgenerator, een complimenten generator, een gedichtengenerator enzovoort. Laat je creativiteit de vrije loop.