Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">

<header>
  <h1>El Sorte Extraordinario de Navidad</h1>
  <h3>¿Cómo usar el simulador de sorteo?</h3>
  <p>Introduce los números de los 3 décimos que has comprado para estas navidades (el de la familia, el del trabajo y de los amigos), indica una cantidad de años (se utilizarán los mismo décimos para cada año de sorteo) y el sistema te dirá si tu número salió entre los primeros 5 premios o pedrea</p>
</header>

<div class="decimos">
  <div class="field">
    <label for="dec-familia">¿Cuántos años quieres probar?</label>
    <input type="number" id="hasta_anio" min="0" max="10000" placeholder="00" value="100" required />
  </div>
  
  <div class="field">
    <label for="dec-familia">Décimo de la familia:</label>
    <input type="number" id="dec-familia" min="0" max="99999" placeholder="00000" required />
  </div>
  
  <div class="field">
    <label for="dec-trabajo">Décimo del trabajo:</label>
    <input type="number" id="dec-trabajo" min="0" max="99999" placeholder="00000" required />
  </div>
  
  <div class="field">
    <label for="dec-familia">Décimo del amigos:</label>
    <input type="number" id="dec-amigos" min="0" max="99999" placeholder="00000" required />
  </div>
  
  <div class="field">
    <button class="btn btn--blue" onclick="app.sortear()">¡Probar suerte!</button>
  </div>
  
</div>

<div class="mensaje"></div>

<table class="premios">
  <thead>
    <tr>
      <th>Año</th>
      <th>1º Premio</th>
      <th>2º Premio</th>
      <th>3º Premio</th>
      <th>4º Premio</th>
      <th>5º Premio</th>
      <th>La Pedrea</th>
      <th>Numero anterior 1º</th>
      <th>Numero posterior 1º</th>
      <th>Numero anterior 2º</th>
      <th>Numero posterior 2º</th>
      <th>Numero anterior 3º</th>
      <th>Numero posterior 3º</th>
      <th>Dinero gastado</th>
      <th>Dinero Ganado</th>
    </tr>
  </thead>
<tbody></tbody>
</table>


              
            
!

CSS

              
                html{
  background-color: #ccc;
  font-family: 'Roboto', sans-serif;
}

body {

  padding: 2% 5%;
}

header { 
  border-bottom: 2px solid black;
  margin-bottom: 30px; 
}

.field {
  margin-bottom: 20px;
}

.btn {
  background-color: transparent;
  border: 0;
  padding: 8px 20px;
}

.btn--blue {
  background-color: #3399ff;
  border: 2px solid #0033cc;
  color: white;
  font-weight: bold;
}

input[type="number"]{
  display: inline-block;
  height: 20px;
  font-size: 14px;
  padding: 5px;
  width: 80px;
}

.mensaje {
    display: none;
    font-size: 19px;
    margin-bottom: 20px;
    background: white;
    padding: 30px;
    border: 2px #777777 solid;
}

table {
  background-color: white;
  border: 1px solid #888;
}

table.premios{
  > thead > tr > th {
    border-bottom: 2px solid red;
    padding: 15px;
  }
  
  > tbody {
    > tr {
      > th,
      > td {
        font-size: 8px;
        padding: 0 15px;
        text-align: center;
      }      
    }
  }
}
              
            
!

JS

              
                var app = {
  dinero_gastado: 0,
  dinero_ganado: 0,
  otros_premios: {
    lapedrea: 100,
    anterior_al_primer_premio: 2000,
    posterior_al_primer_premio: 2000,
    anterior_al_segundo_premio: 1250,
    posterior_al_segundo_premio: 1250,
    anterior_al_tercer_premio: 960,
    posterior_al_tercer_premio: 960,
    centena_del_primer_premio: 100,
    centena_del_segundo_premio: 100,
    centena_del_tercer_premio: 100,
    centena_del_cuarto_premio: 100,
    dos_ultimas_cifras_primer_premio: 100,
    dos_ultimas_cifras_segundo_premio: 100,
    dos_ultimas_cifras_tercer_premio: 100,
    reintegro_ultima_cifra_primer_premio: 20    
  },
  precio_decimo: 20,
  premios_grandes: [400000,125000,50000,25000,6000,],
  sortear: function(){
    
      // variables
      var d = new Date();
      var anio = d.getFullYear();
      var mensaje = "";
      var hay_premio_grande = false;
      var hasta_anio = (document.getElementById('hasta_anio').value=="")?100:document.getElementById('hasta_anio').value; // 100 por defecto
    
      // Reinicio de variables
      app.dinero_gastado = 0;
      app.dinero_ganado = 0;
   
      // Reinicio de mensajes y tabla
      $('tbody, .mensaje').html("");
    
      // Guardo los décimos
      decimos = [];
      if(document.getElementById("dec-trabajo").value !== "") decimos.push(document.getElementById("dec-trabajo").value);
      if(document.getElementById("dec-familia").value !== "") decimos.push(document.getElementById("dec-familia").value);
      if(document.getElementById("dec-amigos").value !== "") decimos.push(document.getElementById("dec-amigos").value);

      // Controlo que el usuario haya ingresado al menos 1 décimo
      if( decimos.length > 0 ) {
        
        // Genero la fila
        var fila = "<tr>";
                
        // Vamos a simular el sorteo durante 50 años
        hasta_anio = anio + parseInt(hasta_anio);
        for(i=anio;i<hasta_anio;i++){
          
          // Pinto el año
          fila += "<td>" + i + "</td>";

          // Calculo los 5 primeros premios
          var premios = [];
          for(y=0;y<=4;y++){
            premios[y] = Math.floor((Math.random() * 100000) + 1); // 99999 posibilidades
            fila += "<td>" + premios[y] + "</td>";
          }
          
          // Pinto la pedrea
          var pedrea = Math.floor((Math.random() * 100000) + 1);
          fila += "<td>" + pedrea + "</td>";
          
          // Numero anterior 1º
          var numanterior1 = premios[0] - 1;
          fila += "<td>" + numanterior1 + "</td>";
          
          // Numero posterior 1º
          var numposterior1 = premios[0] + 1;
          fila += "<td>" + numposterior1 + "</td>";
          
          // Numero anterior 2º
          var numanterior2 = premios[1] - 1;
          fila += "<td>" + numanterior2 + "</td>";
          
          // Numero posterior 2º
          var numposterior2 = premios[1] + 1;
          fila += "<td>" + numposterior2 + "</td>";
          
          // Numero anterior 3º
          var numanterior3 = premios[2] - 1;
          fila += "<td>" + numanterior3 + "</td>";
          
          // Numero posterior 2º
          var numposterior3 = premios[2] + 1;
          fila += "<td>" + numposterior3 + "</td>";
          
          // Pinto el dinero gastado
          app.dinero_gastado = app.dinero_gastado + (app.precio_decimo * decimos.length);
          fila += "<td>€" + app.dinero_gastado + "</td>";
          

          // VERIFICACION DE PREMIO
          decimos.forEach(function(value, index){
            
            // ¿Está el décimo entre los 5 ganadores?
            if( premios.indexOf(value) != -1 ) {
              var indice = premios.indexOf(value);
              app.dinero_ganado += app.premios_grandes[indice];
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el " + indice + "º premio por un valor de €" + app.premios_grandes[indice] + "</p>";
            }
            
            // Pedrea
            if( pedrea == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Pedrea' por un valor de €" + app.otros_premios.lapedrea + "</p>";
              app.dinero_ganado += app.otros_premios.lapedrea;
            }
            
            // Numero anterior 1º
            if( numanterior1 == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Num. anterior al 1º premio' por un valor de €" + app.otros_premios.anterior_al_primer_premio + "</p>";
              app.dinero_ganado += app.otros_premios.anterior_al_primer_premio;
            }
            
            // Numero posterior 1º
            if( numposterior1 == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Num. posterior al 1º premio' por un valor de €" + app.otros_premios.posterior_al_primer_premio + ", pero para ese entonces te habrás gastado €" + app.dinero_gastado + "</p>";
              app.dinero_ganado += app.otros_premios.posterior_al_primer_premio;
            }
            
            // Numero anterior 2º
            if( numanterior2 == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Num. anterior al 2º premio' por un valor de €" + app.otros_premios.anterior_al_segundo_premio + ", pero para ese entonces te habrás gastado €" + app.dinero_gastado + "</p>";
              app.dinero_ganado += app.otros_premios.anterior_al_segundo_premio;
            }
            
            // Numero posterior 2º
            if( numposterior2 == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Num. posterior al 2º premio' por un valor de €" + app.otros_premios.posterior_al_segundo_premio + ", pero para ese entonces te habrás gastado €" + app.dinero_gastado + "</p>";
              app.dinero_ganado += app.otros_premios.posterior_al_segundo_premio;
            }
            
            // Numero anterior 3º
            if( numanterior3 == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Num. anterior al 3º premio' por un valor de €" + app.otros_premios.anterior_al_tercer_premio + ", pero para ese entonces te habrás gastado €" + app.dinero_gastado + "</p>";
              app.dinero_ganado += app.otros_premios.anterior_al_tercer_premio;
            }
            
            // Numero posterior 3º
            if( numposterior3 == value ) {
              mensaje += "<p>En el año " + i + " el décimo " + value + " ha ganado el premio 'Num. posterior al 3º premio' por un valor de €" + app.otros_premios.posterior_al_tercer_premio + ", pero para ese entonces te habrás gastado €" + app.dinero_gastado + "</p>";
              app.dinero_ganado += app.otros_premios.posterior_al_tercer_premio;
            }

          });
          fila += "<td>" + app.dinero_ganado + "</td></tr>";
         
        }
        
        // Agrego la fila a la tabla
        $('tbody').append(fila);
        
        // Agrego el mensaje final
        if(mensaje===""){
          mensaje = "Ooooh... no has acertado y en todos estos años te has gastado €" + app.dinero_gastado + ", pero ¿y si el año próximo te toca?"
        }
        $('.mensaje').append(mensaje).fadeIn();
        
      }

  }
  
}
              
            
!
999px

Console