Free Energy

De vertaling naar JS

Maak een nieuwe projectmap met index.html, stile.css en code.js files.
Zet één inputveld in je HTML pagina waarin de gebruiker de gemiddelde maandverbruik kan invoeren.
Die waarde van dit inputveld komt in het script op de plaats van het energieverbruik per maand van de gebruiker.

Maak variabelen aan voor de waarden die je in de berekening nodig hebt.
Je mag zelf de namen voor de variabelen bedenken.
De gegevens en de formules die je hierbij nodig hebt vind je in de spreadsheet die je gemaakt hebt.
Je hebt dat bestand grondig bestudeerd.

Je gaat de berekening nu omzetten naar de JS-syntax.

De maandelijkse kosten zonder zonnepanelen

In de spreadsheet heb je verschillende formules opgesteld om het eindbedrag te berekenen.

  • De eerste formule berekent het bedrag voor de eerste 500 kWh.
  • De tweede formule berekent het bedrag voor het verbruik tussen 500 kWh en 1000 kWh.
  • De derde formule berekent het bedrag voor alles boven de 1000 kWh.
				
					=ALS(A26<=500;A26*C16;500*C16)
=ALS(A26<=1000;ALS(A26>500;(A26-500)*C17;0);500*C17)
=ALS(A26>1000;(A26-1000)*C18;0)
  • Deze drie formules kunnen we in JavaScript combineren in één if-statement.

Vaak wordt een flowchart gebruikt om een probleem visueel te verduidelijken. Dit helpt bij het schrijven van de code. Hieronder zie je een flowchart voor het berekenen van de kosten, opgebouwd uit verschillende tarieven.

Het probleem kan als volgt worden samengevat:

  • Tarief 1: De eerste 500 kWh kosten AWG 0.3580 per kWh.
  • Tarief 2: Voor het verbruik tussen 500 en 1000 kWh wordt AWG 0.3684 per kWh berekend.
  • Tarief 3: Voor elke kWh boven de 1000 kWh bedragen de kosten AWG 0.4847.
  • De gebruiker voert het verbruik in. 
  • Bereken hoeveel betaald moet worden op basis van het ingevoerde verbruik.
 

Lees de flowchart aandachtig en leg in je eigen woorden uit wat er gebeurt.

Als je zeker weet dat de flowchart klopt, kun je het if-statement in JavaScript schrijven.
Vergelijk de structuur van de flowchart met de code in het voorbeeld hieronder.
Deze code mag je gebruiken in de rekenmodule voor “zonnepanelen”.

				
					var x = 725; //de gebruikers input
//De tussenuitkomsten
var r1=0; 
var r2=0; 
var r3= 0; 
//de drie terieven
var Tar1=0.3580;
var Tar2=0.3684;
var Tar3=0.4847;
//De variabele waarin de uitkomst komt te staan
var resultaat = 0;

if ( x <= 500 ){
	r1 = x * Tar1; //het volledige verbruik valt in het laagste terief
	//Het if statement wordt verlaten en het resultaat wordt berekend.
}else if ( x > 500 && x <= 1000 ){
	r1 = 500 * Tar1; //De eerste 500 kWh vallen in het laagste tarief
	r2 = (x - 500) * Tar2; // alles boven de 500 kWh valt in het middelste tarief
	//Het if statement wordt verlaten.
}else{
	//Dit codeblok wordt altijd uitgevoerd als de eerste twee condities onwaar zijn.
	r1 = 500 * Tar1; //De eerste 500 kWh vallen in het laagste tarief
	r2 = 500 * Tar2; //De volgende 500 kWh vallen in het middelste tarief		
	r3 = x - 1000 * Tar3; //De rest valt in het hoogste tarief
}
resultaat = r1 + r2 + r3;
console.log(resultaat);

Nog een flowchart

Gebruik de formules uit je spreadsheet om een flowchart te maken die het proces visualiseert voor een foutloze werking van de gehele rekenmodule. Je bent vrij om je eigen keuzes te maken bij het opstellen van de flowchart, gebruik bijvoorbeeld lucidchart of teken het met de hand.

Het eindresultaat moet als een JPG-bestand ingeleverd worden!

  • Maak met behulp van de flowchart en de formules in je spreadsheet de code in Javascript.
  • Zet alle tussenuitkomsten steeds in een nieuwe variabele.
  • Controleer met console.log bij elke formule aan de hand van de spreadsheet of de uitkomst klopt.
  • Zorg er voor dat de uitkomsten steeds op het juiste moment en op de juiste manier worden afgerond.
 
Bijvoorbeeld: In de Spreadsheet kun je zien dat je het aantal zonnepanelen dat nodig is kunt berekenen door het maandverbruik te delen door de maandopbrengst per paneel.

Omdat je geen halve panelen kunt installeren ronden we dat naar boven af.
In Sheets doe je dat met:

				
					=ROUNDUP(A26/C8,0)

In Js ziet dit er zo uit (uiteraard gebruik je hier de variabelenamen die je zelf bedacht hebt).

				
					var aantalPanelen = Math.ceil(maandverbruik/maandopbrengst);

Displaying the results

Als je alle functies hebt gemaakt, en alle uitkomsten kloppen Maak je in javascript enkele zinnen waarin de variabelen verwerkt zijn.
Kijk hiervoor naar het voorbeeldje hieronder.

Verwerk het resultaat in de web-pagina’s die je voor deze opdracht gaat maken.
Uiteraard zorg je daarbij voor dat het foutloos werkt en let je op usability en user experience.