Highcharts Demo

author(s): Torstein Hønsi

HTML

<fieldset>
  <h1 style='text-align:center;'>SUELDO MÍNIMO DEL SERVICIO DOMÉSTICO</h1>
  <h4>Remuneración mínima. Pago mensual. Marzo y abril de 2020.
  (en mayo rige otro aumento)</h4>
  <!-- Primer campo de opciones -->
  <p> Ingresar Modalidad de trabajo: </p>
  <div class="select-option">
    <select name="job_type" id="job_type">
      <option value='blank'>---Elegir una opción---</option>
      <option value='cama_adentro'>Cama adentro</option>
      <option value='retiro_mensual'>Con retiro</option>
    </select>
  </div>
  <!-- Opciones de Retiro Mensual campo de opciones -->
  <p id="label_categories" style="display:none"> Ingresar Categoría: </p>
  <div class="select-option">
    <select name="retiro_mensual" id="retiro_mensual" style="display:none">
      <option value=0>---Elegir una opción---</option>
      <option value=21039.50>(1) Supervisores.</option>
      <option value=19546.50>(2) Personal para tareas específicas. Cocineros y otras tareas especiales.</option>
      <option value=19070.50>(4) Asistencia y cuidado de personas (enfermos, discapacitados, niños, mayores).</option>
      <option value=17150.50>(5) Tareas generales típicas del hogar. </option>
    </select>
  </div>
  <!-- Opciones de Cama adentro -->
  <div class="select-option">
    <select name="cama_adentro" id="cama_adentro" style="display:none">
      <option value=0>---Elegir una opción---</option>
      <option value=23435.50>(1) Supervisores.</option>
      <option value=21758.50>(2) Personal para tareas específicas. Cocineros y otras tareas especiales.</option>
      <option value=19070.50>(3) Caseros.</option>
      <option value=21252.50>(4) Asistencia y cuidado de personas (enfermos, discapacitados, niños, mayores).</option>
      <option value=19070.50>(5) Tareas generales típicas del hogar.</option>
    </select>
  </div>
  <!-- Campo de Horas de trabajo -->
  <p style="display:none" id="label_job_time"> Ingresar cantidad de horas de trabajo por semana (desde 24 hs):...

CSS

h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: #007BC1;
  text-align: center;
}

h4 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: #7f1954;
  text-align: center;
}

small {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: #7F1954;
}

fieldset {
  min-width: 80%;
  border-radius: 10px;
  background: #FFFFFF;
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
  position: relative;
  border: 2px groove threedface;
}


/*select*/

.select-option select,
.select-option select {
  background: #E4E4E4;
  font-size: 15px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 width: 94%;
  margin-left: 3%;
  margin-right: 3%;
  height: 30px;
  line-height: 40px;
  padding-left: 10px;
  border-radius: none;
  margin-bottom: 5px;
  -moz-appearance: none;
  color: rgb(127, 25, 84);
}


/*parrafos*/

p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  line-height: 1.1;
  color: #007BC1;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 15px;
}

p.result {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: rgb(127, 25, 84);
  font-size: 40px;
}
p.error {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: rgb(127, 25, 84);
  font-size: 25px;
}



/*number*/

input[type=number] {
  font-size: 1em;
  width: 7em;
  padding: 3px;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}

input[type=number]:focus {
  outline: none;
}

/* para sacar las flechas en el input*/

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}


/* -------------- Button Base --------------...

JavaScript

$(document).ready(function() {
  $("#job_type").on("change", function() {
    valSelectJob = $(this).val();
    select_value = 0;
    number = 0;
    if (valSelectJob == "cama_adentro") {
      $('#retiro_mensual').hide();
      $('#cama_adentro').show();
      $('#label_categories').show();
      $('#job_time').show();
      $('#label_job_time').show();
      $('#button_calculate').show();
    } else if (valSelectJob == "retiro_mensual") {
      $('#cama_adentro').hide();
      $('#retiro_mensual').show();
      $('#label_categories').show();
      $('#job_time').show();
      $('#label_job_time').show();
      $('#button_calculate').show();
    } else {
      $('#cama_adentro').hide();
      $('#retiro_mensual').hide();
      $('#label_categories').hide();
      $('#job_time').hide();
      $('#label_job_time').hide();
      $('#button_calculate').hide();
      $('#button_calculate').hide();
    }
  });
  $("select").on("change", function() {
    $("#job_time").val(0);
    $('#textDiv').hide();
  });
  $("#retiro_mensual").on("change", function() {
    select_value = document.getElementById('retiro_mensual').value;
  });
  $("#cama_adentro").on("change", function() {
    select_value = document.getElementById('cama_adentro').value;
  });
  $("#button_calculate").on("click", function() {
    jobTime = $("#job_time").val();
    var div = document.getElementById("textDiv");
    var divE = document.getElementById("errorDiv");
    if (jobTime >= 24) {
      producto = select_value / 48;
      total = producto * jobTime;
      total = total.toFixed(2);
      div.textContent = '$ '.concat(total);
      var text = div.textContent;
    	$('#textDiv').show();
      $('#errorDiv').hide();
    } else {
    	divE.textContent =	"Por menos de 24 horas semanales, corresponde pago por hora.";
      var text = divE.textContent;
    	$('#errorDiv').show();
      $('#textDiv').hide();
    }

  });

});