Lenenmodule
Menu
De module bouwen: Maar eerst even dit.
!!!
Op je rekenmachine kun je machten invoeren.
Dit gaat met toets waar de letters xy of x^y opstaan of het symbool ^ .
Je tikt eerst het grondgetal in.
Dan de xy, x^y of ^ toets en daarna de macht.
Javascript kent de operator ^ niet.
Wij gebruiken de dubbele asterisk (**)
De bestanden klaarzetten
Maak een projectmap met een Index.html, code.js en style.css
Zorg dat de bestanden op de juiste manier aan elkaar gekoppeld zijn.
We beginnen net het plaatsen van input-velden op de pagina.
Hier kan een gebruiker straks de gegevens invoeren om de berekening te maken.
Neem de HTML, JS en CSS code uit de voorbeelden over.
De HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>De leenmodule</title>
<link data-asynced="1" as="style" onload="this.onload=null;this.rel='stylesheet'" rel="preload" href="style.css"> <script type="litespeed/javascript" data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script type="litespeed/javascript" data-src="code.js"></script> </head>
<body>
<div id = "container">
<form>
<input type="number" id="leenbedrag" placeholder="leenbedrag"/>
<input type="number" id="rente" placeholder="rente"/>
<input type="number" id="looptijd" placeholder="looptijd"/><br>
<input type="button" id = "button" value="bereken"/>
</form>
<div id = "renteTotaal"></div>
<div id = "cumulatief"></div>
</div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.prikkels.info/wp-content/litespeed/js/fafc1c06d6a114f3cd527719cf1f019a.js?ver=9171c"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
html, body{
width: 100%;
height: 100%;
}
#container{
position: relative;
margin: 50px auto;
width: 100%;
}
form{
position: relative;
margin: 20px auto;
width: 40%;
}
#leenbedrag, #rente, #looptijd, #button{
width: 100%;
}
$(document).ready(function(){
});
variabelen, click en functie
We beginnen met het declareren van de variabelen die we nodig hebben.
In deze variabelen kunnen we de gegevens uit de invoervelden opslaan zodat we die later in de berekeningen kunnen gebruiken.
De variabele cumulatief bespreken we later.
var leenbedrag;
var rente;
var looptijd;
var cumulatief;
Vervolgens koppelen we een actie aan de knop.
In deze actie worden de gegevens uit de input velden ook daadwerkelijk in de variabelen gezet.
Vervolgens wordt de functie calc aangeroepen.
In deze functie staat nu nog even een check of het tot zo ver goed gaat (console).
Als de gegevens uit de invoervelden correct weergegeven worden in de console mag je de regels 15, 16 en 17 weer deleten.
$("#button").click(function(){
leenbedrag = $("#leenbedrag").val();
rente = $("#rente").val()/100;
looptijd = $("#looptijd").val();
calc();
});
var calc = function(){
console.log(leenbedrag);
console.log(leenbedrag);
console.log(leenbedrag);
}
De formules
In de functie calc geven we de waarde 0 aan variabele cumulatief.
Ook maken we de div #cumulatief (in je html pagina) leeg.
– Begrijp je het verschil tusse de variabele cumulatief en de div cumulatief?
En dan gaan we nu de formules die je in sheets gemaakt had vertalen naar JS.
De resultaten worden opgeslagen in de nieuwe variabelen rentevoet en maandbedrag.
Controleer weer of de uitkomsten okay zijn.
var calc = function(){
cumulatief = 0;
$("#cumulatief").empty();
var rentevoet = (1 + rente) ** (1/12) - 1;
var maandbedrag = (leenbedrag * rentevoet * (1 + rentevoet) ** looptijd / ((1 + rentevoet) ** looptijd - 1));
}
De lijst
Er moet nu nog een lijst gegenereerd worden met alle maanden van de looptijd.
Daarvoor maken we in de functie calc een for-loop.
In de loop maken we voor elke maand een div met de classname termijn.
Op regel 24 zie je dat er ter controle het getal i in de div gezet wordt.
Daarna wordt de div in #cumulatief geplaatst.
Contoleer het werk in firefox.
De eerste div heeft nummer 0, de laatste nummer 35.
Dat lossen we zo meteen op.
for(var i = 0 ; i < looptijd ; i++){
}
for(var i = 0 ; i < looptijd ; i++){
cumulatief+=maandbedrag;
console.log(cumulatief);
}
for(var i = 0 ; i < looptijd ; i++){
cumulatief+=maandbedrag;
var termijn = $("<div class = 'termijn'></div>");
termijn.append(i);
$("#cumulatief").append(termijn);
}
We wissen de controle-regel (console.log) en maken in plaats daarvan 2 variabelen (maand en bedrag) met daarin een regel tekst.
Die variabelen zetten we in termijn.
In de variabele maand staat I+1. Waarom?
Als je nu test zie je dat er inmiddels weer wat opmaak nodig is.
Neem ook de CSS-rules uit het voorbeeld over.
var maand = $("<p class = 'mnd'>Maand "+(i+1)+"</p>");
var bedrag = $("<p>AWG "+cumulatief.toFixed(2)+"</p>");
termijn.append(maand);
termijn.append(bedrag);
$("#cumulatief").append(termijn);
p{
font-family: sans-serif;
font-weight: 100;
font-size: 16px;
float: left;
width: 48%;
padding: 3px 1%;
}
.mnd{
text-align: right;
}
RenteTotaal
In het begin van deze oefening heb je in de html-pagina een div gemaakt met de ID renteTotaal.
Laten we daar ook nog even iets inzetten.
Maak de drie variabelen met elk een tekst waarin de variabelen verwerkt worden.
De variabelen zet je in een h3 tag in #renteTotaal.
Neem ook de css rules voor renteTotaal, h3 en span over
var m = "<h3>Per maand moet <strong>AFL "+maandbedrag.toFixed(2)+"</strong> betaald worden.</h3>"
var c = "<h3>Na "+looptijd+" maanden is <strong>AFL "+cumulatief.toFixed(2)+"</strong> betaald.</h3>"
var r = "<h3>Waarvan <strong>AFL "+(cumulatief-leenbedrag).toFixed(2)+"</strong> rente!</h3>"
$("#renteTotaal").html(m+c+r);
Als je alles goed hebt gedaan heb je nu de module klaar.
Deze kan nu in een website geembed worden.
#renteTotaal{
position: relative;
margin-bottom: 10px;
border-bottom: 0.5px solid gray;
}
h3{
text-align: center;
font-family: sans-serif;
font-weight: 100;
font-size: 16px;
}
span{
font-weight: 300;
}