JSFiddle - React, Tailwind, and code Playground

by alemarch

HTML

<div id="content">
        <header>
            <hgroup>
                <h1><img alt="logo" id="solution" src="images/solution.png">
                IDC Solutions</h1>
            </hgroup>

            <nav>
                <ul>
                    <li>
                        <a href="index.html">Home</a>
                    </li>

                    <li>
                        <a href="helpdeskafdeling.html">Klantenservice</a>
                    </li>

                    <li>
                        <a href="bundels.html">Bundels</a>
                    </li>

                    <li>
                        <a href="about.html">Over ons</a>
                    </li>

                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>
            </nav>
        </header>
    </div>

    <div id="info">
        <h2>Bereken hier al uw kosten</h2><img id=
        "telefoon" src="images/telefoon.png"> <img id="internet" src=
        "images/internet.png">
        <br/>
        <Br/>

        <td><Strong>Kies uw bundel : </Strong></td>
            <select id="pakket">
                <option value="">Kies uw bundel</option>
                <option value="internet">Internet</option>
                <option value="telefonie">Telefonie</option>
                <option value="allin">All-in-1</option>
            </select>
            <button id="bereken" value="bereken" onclick='kostenBerekenen();'>Bereken uw Kosten!</button>
        <div id="resultaat"></div>
    </div>

    <footer>
        <small>&copy;Tayfun Kayahan | IDC Solutions | 1e Jaars student te ID
        College Zoetermeer | Online Helpdesk | 1011176 |</small>
    </footer>

JavaScript

var prijsi = 19.99;
var kwartaal = prijsi * 3;
var jaar = prijsi * 12;
var contract = prijsi * 24;
var prijst = 30.99;
var prijskw = prijst * 3;
var prijsjaar = prijst * 12;
var prijscontract = prijst * 24;
var prijsa = 50.99;
var prijsakw = prijsa * 3;
var prijsajaar = prijsa * 12;
var prijsacontract = prijsa * 24;
var extratela = prijsa + 1;
var extratelkw = (3*1) + prijsakw;
var extrateljaar = (12*1) + prijsajaar;
var extratelcontract = (24*1) + prijsacontract;
var extratelt = prijst + 1;
var extrateltj = (1*12) + prijsjaar;
var extratkw = (3*1) + prijskw;
var extratc = (24*1) + prijscontract;
function kostenBerekenen(){
    pakket = document.getElementById('pakket').value;
    document.getElementById('resultaat').innerHTML = ""
    if(pakket == ""){
        document.getElementById('resultaat').innerHTML+=("Kies een pakket!");
    }
    else if(pakket == 'internet')
    {
        document.getElementById('resultaat').innerHTML+=("<table border='0' id='kosten'><thead colspan='2'><th>Kosten</th></thead><tr><td>Kosten per maand: &euro;" + prijsi +         '</td></tr><tr><td>Kosten per kwartaal: ' +' &euro;' + kwartaal +         '</td></tr><tr><td>Kosten per jaar: ' + '&euro;' + jaar + '</td></tr><tr><td>Kosten per contract (24 maanden): &euro;' + contract + '</td></tr></table>');
    }
    else if(pakket == 'telefonie'){
        document.getElementById('resultaat').innerHTML+=("<table border='0' id='kosten'><thead colspan='2'><th>Kosten</th></thead><tr><td>Kosten per maand: &euro;" + prijst +         '</td></tr><tr><td>Kosten per kwartaal: ' +' &euro;' + prijskw +         '</td></tr><tr><td>Kosten per jaar: ' + '&euro;' + prijsjaar + '</td></tr><tr><td>Kosten per contract (24 maanden): &euro;' + prijscontract +         '</td></tr><tr><td>Kosten p/maand met <strong>extra telefoon:</strong> &euro;' + extratelt +  '</td></tr><tr><td>Kosten per kwartaal met <strong>extra telefoon:</strong> &euro;' + extratkw +         '</td></tr><tr><td>Kosten per jaar met...