Smoesjes Generator

About: Mijn naam is Willem Luijkx alias Willem Wortel. Ik ben een tinkeraar/maker/uitvinder die STEAM onderwijs nog meer op de kaart wil zetten door te adviseren, te inspireren en lesmateriaal te ontwikkelen.

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

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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.

https://codepen.io/WillemLuijkx/full/gOYjBbm

First Time Author Contest

Participated in the
First Time Author Contest

Be the First to Share

    Recommendations

    • Instrument Contest

      Instrument Contest
    • Make it Glow Contest

      Make it Glow Contest
    • Reuse Contest

      Reuse Contest

    Discussions