Front end

DE INHOUD HIERONDER IS GEBASEERD OP CLE1 sprint 3 2018. ik kreeg de opdracht om een spel te maken voor kinderen. ik heb dit gedaan en vervolgens een one pager voor gemaakt, gericht naar kinderen. Voor je gemak heb ik de code en de link naar de website hieronder staan.

Live website
GitHub

HTML

Je hebt onderzoek gedaan naar het werken met HTML5 middels een online cursus. Je kent de basis HTML elementen zoals div, span en p . Je weet wat semantische elementen zijn, en je kan hiermee een basis HTML document opzetten.

Afgelopen twee jaar heb ik tutorials gevolgd op sites zoals w3schools en stackoverflow. Hier heb ik geleerd hoe je websites maakt op basis van html en css. Daarnaast gebruik ik de app Mimo om dagelijks opdrachten te doen op gebied van html, css en javascript. Dit helpt me om regelmatig met programmeren bezig te zijn.

Na die tutorials weet ik ook wat de elementen doen. Div is een block element, span een inline element, en p gebruik je voor paragrafen.

De tag <span> wordt gebruikt om inline-elementen in een document te groeperen. Deze tag biedt op zichzelf geen visuele verandering. Je kunt een haak toevoegen aan een deel van een tekst of een deel van een document.

De tag <div> definieert een divisie of een sectie in een HTML-document. Het element <div> wordt vaak gebruikt als container voor andere HTML-elementen zoals stijlen met CSS of om bepaalde taken uit te voeren met JavaScript.

De tag <p> definieert een alinea. Browsers voegen automatisch wat ruimte (margin) toe voor en na elk <p> -element. De marges kunnen worden aangepast met CSS (met de margin-eigenschappen).

Een semantisch element beschrijft=de betekenis ervan voor zowel de browser als de ontwikkelaar.
Voorbeelden van niet-semantische elementen: <div> en <span> – Vertelt niets over de inhoud.
Voorbeelden van semantische elementen: <form>, <table> en <article>: definieert duidelijk de inhoud.

In de code van mijn one pager kan je zien dat ik deze elementen heb gebruikt.

CSS

Je kan werken met css selectors: tags, id’s en classes. Je kan werken met css eenheden: %, em, vw, vh en px. Je begrijpt de werking van css display: block, inline-block, inline, flex. Je website is responsive door gebruik te maken van relatieve eenheden, flex, grid, en/of media queries. Je gebruikt geen css framework.

heb ik gebruikt om precies het midden te bepalen van de pagina zodat ik zeker weet dat de onderdelen op de juiste plaats staan.

In dit project heb ik tagsid’s en classes als selectors gebruikt. Id’s heb ik voornamelijk gebruikt voor onderdelen waarin ik javascript. Hierdoor kon ik makkelijker onderscheid maken in tussen onderdelen waar ik javascript voor gebruik en waar niet.

Het belangrijkste verschil tussen display: block en display: inline-block is dat er geen regeleinde achter het tweede element voegt waardoor je er nog een element naast kan zetten.

Om mijn website responsive te maken heb ik gebruik gemaakt van Media queries. Ik heb ervoor gezorgd dat mijn website responsive is voor een normale desktop en voor een telefoon met de pixels van 360 x 640. Hierdoor laat ik zien dat ik weet hoe ik de pagina moet veranderen wanneer de window of scherm een bepaalde grootte heeft.

Javascript

Middels code voeg je nuttige functionaliteit toe aan je applicatie. Je app toont een status en kan reageren op acties van de gebruiker. Je hebt je code zelf geschreven. Je code is leesbaar opgebouwd met heldere functienamen en variabelen, en dit kan je mondeling toelichten. Je gebruikt geen javascript framework of library.

Voor mijn one pager heb ik javascript gebruikt om duidelijk te laten zien hoe mijn product werkt. Met deze demo kan je het spel via de browser spelen. De bedoeling is om de vlammen te blussen voor de tijd om is. Als het je lukt dan staat er een berichtje dat aangeeft dat je hebt gewonnen. Anders staat er een berichtje dat je hebt verloren. Er is een mogelijkheid om het spel opnieuw te spelen zonder de website te hoeven refreshen. Om goed aan te geven hoeveel tijd je over hebt, heb ik een timer gemaakt. Deze stopt zodra al het vuur uit is, zodat je kan zien hoe snel je was.

Daarnaast heb ik aan het eind van de onderstaande code ervoor gezorgd dat de pagina na anderhalve minuut ververst.

//Dit voeg ik toe

var fires = [document.getElementById('vuur'),document.getElementById('vuur1'),document.getElementById('vuur2'),document.getElementById('vuur3'),document.getElementById('vuur4')];

//De functie om het spel te herstarten

function restart(){

    x = 0

    document.getElementById('result').classList.add('hidden');

    document.getElementById('result').classList.remove('show');

   

    document.getElementById('vuur').classList.add('hidden');

    document.getElementById('vuur').classList.remove('show');

    document.getElementById('vuur1').classList.add('hidden');

    document.getElementById('vuur1').classList.remove('show');

    document.getElementById('vuur2').classList.add('hidden');  

    document.getElementById('vuur2').classList.remove('show');

    document.getElementById('vuur3').classList.add('hidden');  

    document.getElementById('vuur3').classList.remove('show');

    document.getElementById('vuur4').classList.add('hidden');  

    document.getElementById('vuur4').classList.remove('show');

    document.getElementById('restart').classList.add('hidden');

    document.getElementById('restart').classList.remove('show');

    document.getElementById('vuurButton').classList.add('show');

    document.getElementById("myC").style.cursor = "";

}

//Functie die aangeeft of je het spel hebt gehaald

function myFunction () {

    console.log('runned');

    if(x >= 5)

    {

        document.getElementById('vuurButton').classList.add('hidden');

        document.getElementById('vuurButton').classList.remove('show');

        document.getElementById('restart').classList.add('show');

        win()

    }

}

restart()

//Dit is de start knop om te beginnen met de demo

document.getElementById('vuurButton'). onclick = function(event){

    startTimer(20);

    document.getElementById('vuur').classList.add("show");

    setTimeout(function(){document.getElementById('vuur1').classList.add("show");}, 1000);

    setTimeout(function(){document.getElementById('vuur2').classList.add("show");}, 2500);

    setTimeout(function(){document.getElementById('vuur3').classList.add("show");}, 4000);

    setTimeout(function(){document.getElementById('vuur4').classList.add("show");}, 5500);

    start()

    document.getElementById('result').classList.add('show');

    document.getElementById('vuurButton').classList.remove('show');

    document.getElementById('vuurButton').classList.add('hidden');

    document.getElementById("myC").style.cursor="url('image/blusser.png'),help";

};

//Dit is de restart button om het spel opnieuw te spelen.

document.getElementById('restart'). onclick = function(event){

    restart()

    resetl()

    resetw()

    document.getElementById('restart').classList.remove('show');

    document.getElementById('restart').classList.add('hidden');

};

function start(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("", "Snel blus het vuur!");

    document.getElementById("result").innerHTML = res;

}

function fail(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Snel blus het vuur!", "Jammer! Je hebt het helaas niet gehaald.");

    document.getElementById("result").innerHTML = res;

}

function resetl(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Jammer! Je hebt het helaas niet gehaald.", "");

    document.getElementById("result").innerHTML = res;

}

function resetw(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Goed gedaan! Het gebouw is geblust.", "");

    document.getElementById("result").innerHTML = res;

}

function win(){

    var str = document.getElementById("result").innerHTML; 

    var res = str.replace("Snel blus het vuur!", "Goed gedaan! Het gebouw is geblust.");

    document.getElementById("result").innerHTML = res;

}

var timeInSecs;

var ticker;

function startTimer(secs){

timeInSecs = parseInt(secs)-1;

ticker = setInterval("tick()",1000);   // elke seconde

}

function tick() {

var secs = timeInSecs;

if (secs>0) {

timeInSecs--;

}

else {

    fail()

    document.getElementById('restart').classList.add('show');

    

    

clearInterval(ticker); // stop tellen bij 0  

}

if(x >= 5){

    clearInterval(ticker);

}

if (secs<10){

    secs = "0" + secs

}

document.getElementById("countdown").innerHTML = secs;

}

//Op het moment dat er op een vlam wordt geklikt, word 'show' weggehaald en vervangen door 'hidden'.

//Dit gebeurd bij alle vlammen. Bij elke vlam die aangeklikt is komt er een x bij.

var x = 0

document.getElementById('vuur').onclick = function(event){

    document.getElementById('vuur').classList.add('hidden');

    document.getElementById('vuur').classList.remove('show');

    x++

    console.log(x + " vlam geblust");

    myFunction();

};

document.getElementById('vuur1').onclick = function(event){

    document.getElementById('vuur1').classList.add('hidden');

    document.getElementById('vuur1').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

document.getElementById('vuur2').onclick = function(event){

    document.getElementById('vuur2').classList.add('hidden');

    document.getElementById('vuur2').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

document.getElementById('vuur3').onclick = function(event){

    document.getElementById('vuur3').classList.add('hidden');

    document.getElementById('vuur3').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

document.getElementById('vuur4').onclick = function(event){

    document.getElementById('vuur4').classList.add('hidden');

    document.getElementById('vuur4').classList.remove('show');

    x++

    console.log(x + " vlammen geblust");

    myFunction();

};

//refresh de pagina na 90 seconden

    setInterval(function(reload){

        window.location.reload(1);

        console.log("reload");

     }, 90000);

Leave a Reply

Your email address will not be published. Required fields are marked *