Introduction: Smoesjes Generator
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
Supplies
Een codepen account
een pc of tablet met een browser
Step 1: Een 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.
Step 2: 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:
<html> <head> </head> <body> </body> </html>
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 en <button id="knop"> en <p id="smoesje">
<html>
<head> <title>Smoesjes generator</title> </head> <body> <div id="container"> <h2>Klets jezelf uit elke situatie met deze smoesjes generator</h2> <p>Deze smoesjesgenerator is gemaakt door Jantje Alleman speciaal voor klas 3a.</p> <p><button id="knop">Genereer smoesje</button></p> <p id="Smoesje"></p> </div> </body> </html>
Als je nog een keer uit voert krijg je ook de knop te zien, maar er gebeurt nog niets als je daar op klikt. Daarvoor gaan we een JavaScript toevoegen.
Step 3: JavaScript
De basis van het script
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;
document.getElementById("knop").addEventListener("click", GenereerSmoesje)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 “Smoesje”
{ document.getElementById(“Smoesje”)Waar we de innerHTML (de code binnen de tags) gaan vervangen door een standaard tekstje
.innerHTML = “standaard tekstje”;}
Voer je code uit en klik op de knop om te kijken wat er gebeurd.
de lege paragraaf “tekstje” is nu vervangen door het tekstje “standaard 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;
Het smoesje
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 met de eerste waarde uit deze lijst intro[0]
var tekst = intro[0]
Probeer ook eens intro[1] en intro[2]
Door nu 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(
De hele regel ziet er dan zo uit
var vartekst = intro[Math.floor(Math.random() * intro.length)];
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
var boosdoener = [
"mijn moeder", "de hond", "een Hells Angel", "een agent", "mijn vader", "ik", "mijn wekker", "de dirigent van mijn kerkkoortje", "mijn broer", "mijn kleine zusje", "de oma van de burgemeester", "koningin Maxima"];
en de derde, met de excuses
var excuus = [
"mijn agenda weggegooid", "mijn fiets gejat", "al mijn geld vergokt", "mijn remleidingen doorgesneden", "last van kortsluiting" , "mijn konijn ontvoerd", "mijn fietsbel aan een lantaarnpaal vastgelast", "mijn schoenen in de boom gehangen", "in mijn broek gepoept", "een bekeuring gekregen voor wildplassen", "mijn OV-kaart opgegeten", "mijn soldeerbout ingeslikt" ];
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
var wlk_intro = intro[Math.floor(Math.random() * intro.length)];
var wlk_boosdoener = boosdoener[Math.floor(Math.random() * boosdoener.length)]; var wlk_excuus = excuus[Math.floor(Math.random() * excuus.length)];
en deze daarna in de variabele “tekst” samen te voegen tot een zin.
var tekst = wlk_intro + " " + wlk_boosdoener + " had " + wlk_excuus + "!"
document.getElementById("knop").addEventListener("click", GenereerSmoesje)
function GenereerSmoesje() {
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"];
var boosdoener = [
"mijn moeder",
"de hond",
"een Hells Angel",
"een agent",
"mijn vader",
"ik",
"mijn wekker",
"de dirigent van mijn kerkkoortje",
"mijn broer",
"mijn kleine zusje",
"de oma van de burgemeester",
"koningin Maxima"];
var excuus = [
"mijn agenda weggegooid",
"mijn fiets gejat",
"al mijn geld vergokt",
"mijn remleidingen doorgesneden",
"last van kortsluiting" ,
"mijn konijn ontvoerd",
"mijn fietsbel aan een lantaarnpaal vastgelast",
"mijn schoenen in de boom gehangen",
"in mijn broek gepoept",
"een bekeuring gekregen voor wildplassen",
"mijn OV-kaart opgegeten",
"mijn soldeerbout ingeslikt" ];
var wlk_intro = intro[Math.floor(Math.random() * intro.length)];
var wlk_boosdoener = boosdoener[Math.floor(Math.random() * boosdoener.length)];
var wlk_excuus = excuus[Math.floor(Math.random() * excuus.length)];
var tekst = wlk_intro + " " + wlk_boosdoener + " had " + wlk_excuus + "!"
document.getElementById("Smoesje").innerHTML = tekst;
}Gefeliciteerd, je hebt een webapplicatie geschreven! Die moet er alleen nog wel wat gelikter uit komen te zien. Daarvoor gaan we CSS toevoegen.
Step 4: Cascading Style Sheets
Cascading Style Sheets (afgekort tot CSS), stijlbladen, zijn een mogelijkheid om de vormgeving van webpagina's los te koppelen van hun feitelijke inhoud en centraal vast te leggen. Het Engelse "style" heeft de betekenis van "opmaak", niet van schrijfstijl. Het begrip "cascading" (als een waterval) verwijst naar de mogelijkheid van het overerven van opmaak-eigenschappen. (Bron:Wikipedia - Cascading_Style_Sheet )
Laten we beginnen met het vervangen van die saaie witte achtergrond
We zoeken een afbeelding op op het internet 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);
De hele body sectie ziet er nu zo uit;
body{
background: url(http://www.willemwortel.net/img/smoesjes.png);
background-size: 1000px;
background-repeat: no-repeat;
font-family: sans-serif;
color: #FFF;
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{...}
#container{
position: relative;
top: 160px;
}Maak nu je gegenereerde tekstje wat groter door de font-size van de paragraaf met ID tekstje op 24 pixels te zetten en dikgedrukt
#Smoesje{
font-size: 24px;
font-weight: bold;
}Step 5: Het Resultaat
Klik nu op uitvoeren in Codepen en op genereer smoesje op je webpagina.
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.
Participated in the
First Time Author Contest
