JSFiddle - React, Tailwind, and code Playground

by speakman

HTML

<form id="costcalc" action="">
    <h1>Vad kostar det?</h1>
    <hr />
    <div class="cc-column">
        <p>
            Typ av städning:<br />
            <select name="cc-type">
                <optgroup label="Flyttstädning">
                    <option value="-220">Kontorsstädning</option>
                    <option value="40">Byggstädning</option>
                    <option value="-220">Butiksstädning</option>
                    <option value="40">Flyttstädning</option>
                    <option value="-230">Garagestädning</option>
                    <option value="-250">Hemstädning</option>
                    <option value="0">Hotellstädning</option>
                    <option value="40">Storstädning</option>
                    <option value="-220">Trappstädning</option>
                    <option value="-220">Visningsstädning</option>
                </optgroup>
                <optgroup label="Kringtjänster">
                    <option value="-190">Fönsterputsning</option>
                    <option value="45">Golvvård parkett</option>
                    <option value="80">Golvvård vaxolja</option>
                    <option value="56">Golvvård trägolv</option>
                    <option value="35">Golvvård linoleum</option>
                </optgroup>
            </select>
        </p>
        <p>
            Bostadens yta i kvadratmeter:<br />
            <input type="text" name="cc-space" />
        </p>
        <p>
            Antal städbesök per månad:<br />
            <input type="text" name="cc-per-month" />
        </p>
        <p>
            Vilken dag i veckan:<br />
            <select name="cc-day-of-week">
                <option>Måndag</option>
                <option>Tisdag</option>
                <option>Onsdag</option>
                <option>Torsdag</option>
                <option>Fredag</option>
                <option>Lördag</option>
                <option>Söndag</option>
            </select>
        </p>
   ...

CSS

#costcalc { 
    border: 1px solid silver;
    margin: 20px;
    padding: 20px;
    font-family: sans-serif;
    background-color: black;
    color: white;
    font-size: 12pt;
    border-radius: 15px;
    max-width: 600px;
}

#costcalc h1 {
    font-size: 20pt;
    font-weight: bold;
    text-align: center;
}

#costcalc p {
    margin: 10px 0;
}

#costcalc a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

#costcalc .cc-column {
    margin: 0;
    padding: 0;
    width: 49%;
    float: left;
}

#costcalc .cc-clear {
    clear: both;
}

#costcalc select {
    width: 60%;
}

#costcalc input[type=text] {
    width: 80%;
    color: black;
}

#costcalc img {
    vertical-align: middle;
}

#costcalc input[type=button], #costcalc input[type=reset] {
    padding: 5px 15px;
    margin-right: 15px;
    background-color: #47beed;
    border-color: #47beed;
    color: white;
    font-size: 12pt;
}

JavaScript

$("#costcalc input[name=cc-calculate]").click(function() {
    var typeOfService = $("#costcalc select[name=cc-type]");
    var nameOfService = $("#costcalc select[name=cc-type] option:selected").text();
    var costOfService = parseInt(typeOfService.val());
    var monthCost = $("#costcalc input[name=cc-monthly-cost]");
    var postRutCost = $("#costcalc input[name=cc-post-rut]");
    var surfaceArea = $("#costcalc input[name=cc-space]");
    var visitsPerMonth = $("#costcalc input[name=cc-per-month]");
    
    if (costOfService == 0) {
        monthCost.val("För " + nameOfService.toLowerCase() + ", begär offert!");
        postRutCost.val("");
    } else if (costOfService < 0) {
        costOfService = Math.abs(costOfService);
        monthCost.val(nameOfService + " kostar " + costOfService + " kr/tim.");
        postRutCost.val("");
    } else {
        if (!surfaceArea.val().match(/\d+/)) {
            alert("Bostadens yta måste anges i kvadratmeter och enbart siffror.");
            return;
        }
        if (!visitsPerMonth.val().match(/\d+/)) {
            alert("Antal städbesök måste anges i enbart siffror.");
            return;
        }
        var res = costOfService * parseInt(surfaceArea.val()) * parseInt(visitsPerMonth.val());
        monthCost.val(res + " kr");
        postRutCost.val(res / 2 + " kr");
    }
});
  
/*
Kontorsstädning    220  kr/tim        
Byggstädning        40  kr/per kvm         20kr efter RUT-avdrag +moms
Butiksstädning     220 kr/tim        
Flyttstädning       40 kr/per kvm         20kr efter RUT-avdrag +moms
Garagestädning     230  kr/tim        
Hemstädning        250 kr/tim        
Hotellstädning     Offereras per rum         Allmänna utrymmen
Storstädning        40 kr/per kvm         20kr efter RUT-avdrag +moms
Trappstädning      220 kr/tim        
Visningsstädning   220  kr/tim        

Fönsterputsning    190 kr/tim        
Golvvård parkett    45 kr/kvm        Lyfta möbler
Golvvård vaxolja    80 kr/kvm        Lyfta...