En mandag seint i mai fikk vi besøk av Jens Finnäs fra J++ i Sunnmørsposten. Han var her i forbindelse med et kurs i regi av NxtMedia om å «komme i gang med datajournalistikk» som var åpent for alle. Vi benytta anledningen til å få utvikla en enkel kalkulator der folk kunne regne ut sine bomutgifter når den nye bypakken i Ålesund blir rulla ut.
Det fine med å snakke med folk som kan er at svaret på om dette var mulig var «ja, du behöver bara lite javascript». Så da satte vi oss ned, og jeg lærte å skrive javascript fra grunnen av. Slik ser hele koden ut:
<!doctype html>
<html lang=»en»>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/global/css/reset.css»/>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/global/css/grid980.css»/>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/global/css/global.css»/>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/group/polarisBundle/css/polarisBundle.css»/>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/publication/smp/css/smp.css»/>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/global/css/adtech-colorbox.css»/>
<link rel=»stylesheet» type=»text/css» href=»http://static.polarismedia.no/skins/prod/global/css/widget.polaris.jobClassifieds.css»/>
<script type=»text/javascript» src=»http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js»>
</script>
<!– Mobilview først–>
<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no»>
</head>
<body>
<style type=»text/css»>
#kalkulator select{
font-size: 18px;
}
#kalkulator .question{
margin-top: 35px;
}
#kalkulator .cost{
text-align: right;
}
#kalkulator h3{
margin-bottom: 0px;
margin-top: 35px;
font-size: 18px;
}
#kalkulator {
padding: 25px;
}
#kalkulator .options label{
font-size: 12px;
display: inline-block;
}
#kalkulator .result{
max-width: 330px;
}
</style>
<div class=»container egghvit» id=»kalkulator»>
<h2>Regn ut hvor mye bypakken vil koste deg</h2>
<p>Bypakken i Ålesud ble vedtatt 22.mai. Fra 2016 og i 16 år fremover blir det bomring rundt byen. En bompassering koster 20 kroner for personbil og 60 kroner for biler over seks meter. Én passering gjelder i én time, mellom 17.00 og 22.00 gjelder tretimersregel. Kjøp av bombrikke gir 10% rabatt.</p>
<form onchange=»countCost()»>
<div class=»questions»>
<div class=»question»>
<div class=»text»> <h3>Hvor mange dager i uka kjører du bil til jobben?</h3>
<p style=»font-size:14px»>(Tur/retur) </p>
</div>
<div class=»options»>
<div class=»car»>
</div>
<div class=»number job»>
<select>
</select>
<label>
<input type=»radio» value=»20″ name=»carJob» checked> Bil under 6 meter
</label>
<label>
<input type=»radio» value=»60″ name=»carJob»> Bil over 6 meter
</label>
</div>
</div>
</div>
<div class=»question»>
<div class=»text»><h3>Hvor mange ganger i uka kjører du bil til fritidsaktiviteter?</h3>
<p style=»font-size:14px»>(Mellom 17 og 22 gjelder tretimersregelen) </p>
</div>
<div class=»options»>
<div class=»car»>
</div>
<div class=»number hobby»>
<select>
</select>
<label>
<input type=»radio» value=»20″ name=»carHobby» checked> Bil under 6 meter
</label>
<label>
<input type=»radio» value=»60″ name=»carHobby»> Bil over 6 meter
</label>
</div>
</div>
</div>
</div>
</form>
<div class=»result»>
<div class=»box week»>
<h3>
Per uke:
</h3>
<table>
<tr>
<td>
Dine jobbreiser koster:
</td>
<td class=»cost-job cost»>
</td>
</tr>
<tr>
<td>
Dine fritidsreiser koster:
</td>
<td class=»cost-hobby cost»>
</td>
</tr>
<tr>
<td>
Totalt:
</td>
<td class=»cost-total cost»>
</td>
</tr>
<tr>
<td>
Med brikke koster det:
</td>
<td class=»cost-reduced cost»>
</td>
</tr>
</table>
</div>
<div class=»box month»>
<h3>
Per måned:
<p style=»font-size:14px»>(Fire uker per måned.)</p>
</h3>
<table>
<tr>
<td>
Dine jobbreiser koster:
</td>
<td class=»cost-job cost»>
</td>
</tr>
<tr>
<td>
Dine fritidsreiser koster:
</td>
<td class=»cost-hobby cost»>
</td>
</tr>
<tr>
<td>
Totalt:
</td>
<td class=»cost-total cost»>
</td>
</tr>
<tr>
<td>
Med brikke koster det:
</td>
<td class=»cost-reduced cost»>
</td>
</tr>
</table>
</div>
<div class=»box year»>
<h3>
Per år:
<p style=»font-size:14px»>(47 uker per år.)</p>
</h3>
<table>
<tr>
<td>
Dine jobbreiser koster:
</td>
<td class=»cost-job cost»>
</td>
</tr>
<tr>
<td>
Dine fritidsreiser koster:
</td>
<td class=»cost-hobby cost»>
</td>
</tr>
<tr>
<td>
Totalt:
</td>
<td class=»cost-total cost»>
</td>
</tr>
<tr>
<td>
Med brikke koster det:
</td>
<td class=»cost-reduced cost»>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type=»text/javascript»>
function countCost(){
var jobCar=$(«input[type=’radio’][name=’carJob’]:checked»).val()*2
var hobbyCar=$(«input[type=’radio’][name=’carHobby’]:checked»).val()
var hobby=$(«.number.hobby select»).val()*hobbyCar
var job=$(«.number.job select»).val()*jobCar
var totalCost=hobby+job
var reducedCost=totalCost*0.9
$(«.box.week .cost-job»).html(job + » kr»)
$(«.box.week .cost-hobby»).html(hobby + » kr»)
$(«.box.week .cost-total»).html(totalCost + » kr»)
$(«.box.week .cost-reduced»).html(reducedCost + » kr»)
$(«.box.month .cost-job»).html(job*4 + » kr»)
$(«.box.month .cost-hobby»).html(hobby*4 + » kr»)
$(«.box.month .cost-total»).html(totalCost*4 + » kr»)
$(«.box.month .cost-reduced»).html(reducedCost*4 + » kr»)
$(«.box.year .cost-job»).html(job*47 + » kr»)
$(«.box.year .cost-hobby»).html(hobby*47 + » kr»)
$(«.box.year .cost-total»).html(totalCost*47 + » kr»)
$(«.box.year .cost-reduced»).html(reducedCost*47 + » kr»)
}
var lists=$(«.number select»);
lists.each(function(){
var list=$(this)
for(var i=0; i<10; i++){
list.append(«<option>»+i+»</option>»)
}
})
countCost()
</script>
</body>
</html>
For det trente øye er dette ganske enkelt og grunnleggende, men for folk som meg – nybegynnere – er dette temmelig skremmende greier å holde styr på. Men med en ekspert ved sin side, går det meste bra. Vi lanserte kalkulatoren dagen derpå, og saken hoppa rett inn på best lest-lista. Dette er noe folk vil vite og har savna info om.
Ingenting er garantert eller ferdig vurdert i bypakke-debatten i Ålesund, men dette verktøyet var tydlig savna, selv om resultatet kan bli annerledes.
Se kalkulatoren og prøv den selv her.
Liv-Jorunn
#smpLAB 