Calcul salaire nounou

by MaxenceBrasselet

HTML

<div class="form-container">
    <h2>Calcul salaire Nounou</h2>
    <div class="field-container">
        <div class="label-container">
            <label for="days">Jours travaillés</label>
        </div>
        <div class="input-container">
            <input type="text" name="days" />
        </div>
    </div>
    <div class="action-container">
        <div class="calcul-button">Calculer</div>
    </div>
</div>
<div class="result-container">
    <div class="salaire-net-container">
        <span class="label">Salaire à payer (base: 371.25):</span>
        <span class="salaire-net-value"></span>
    </div>
    <div class="entretien-net-container">
        <span class="label">Frais d'entretien net:</span>
        <span class="entretien-net-value"></span>
    </div>
    <div class="nombre-heure-container">
        <span class="label">Nombre d'heures:</span>
        <span class="nombre-heure-value"></span>
    </div>
</div>
<div class="error-container"></div>

CSS

body {
    background-color: #4679bd
}

.form-container {
    position: relative;
    margin: 60px auto;
    border-radius: 10px;
    width: 300px;
    height: 200px;
    padding: 20px;
    background-color: white;
    color: silver
}

.form-container h2 {
    color: #4B6C70;
}

.form-container .field-container {
    margin: 30px 0 0 10px;
}


.form-container .field-container .label-container{
    margin-left: 5px;
}

.form-container .field-container .input-container {
    margin: 20px 0 0 20px;
}

.form-container .field-container .input-container input {
    border-radius: 5px;
    background-color: #B8D1F2;
    color: white;
    text-align: center;
    height: 20px;
}

.form-container .field-container .input-container input.wrong-value {
    border: 1px solid red;    
}

.form-container .action-container {
    position: absolute;
    text-align: right;
    right: 20px;
    bottom: 20px;
    color: #EB8E15;
    cursor: pointer;
}

.form-container .action-container:hover {
    text-decoration: underline;
}

.error-container {
    display: none;
    padding: 10px;
    position: absolute;
    top: 10px;
    left: calc(50% - 90px);
    color: white;
    text-align: center;
    background-color: #DB8181;
    border: 1px solid red;
    border-radius: 5px;
}

.result-container {
    display: none;
    margin: 0 auto;
    width: 175px;
    background-color: #FF9D00;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.result-container .label {
    color: grey;
}

JavaScript

var calculPayCallback = function() {
    var input = $('.input-container input');
    $('.result-container').hide();
    
    if (input.hasClass('wrong-value'))
        input.removeClass("wrong-value");

    var inputValue = input.val();
    var days = parseInt(inputValue);
    
    if (!days) {
        displayError("Il faut mettre un nombre !");
        input.addClass("wrong-value");
        return;
    }
    
    var basePay = 371.25;
    var entretien = 2.65;

    var entretienNet = Math.round((entretien * days) * 100) / 100;
    var salaireNet = Math.round((entretienNet + basePay) * 100) / 100;
    var nombreHeures = days * 6;
    
    displayResult(entretienNet, salaireNet, nombreHeures);
};

var timeout;
var displayError = function(msg) {
    var container = $('.error-container');
    
    container.append(msg);
    container.show();
    
    if (timeout)
        timeout.clearTimeout();
    
    timeout = setTimeout(function() {
        container.html('');
        container.hide();
    }, 3000);
}

var displayResult = function(entretienNet, salaireNet, nombreHeures) {
    var container = $('.result-container');
    
    $('.salaire-net-value').html(salaireNet);
    $('.entretien-net-value').html(entretienNet);
    $('.nombre-heure-value').html(nombreHeures);
    
    container.show();
}

$('.calcul-button').on('click', calculPayCallback);