Hugo Suárez López – ¡RETO CUMPLIDO! Recreación de la criba de Eratóstenes utilizando pseudoclases. L

¡RETO CUMPLIDO! Recreación de la criba de Eratóstenes utilizando pseudoclases. Les comparto el código fuente sobre el algoritmo que desarrollé. Así cómo una captura de pantalla del resultado en el navegador web Google Chrome Dev:

---------- INICIO DEL ARCHIVO index.html ---------- <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Criba de Eratóstenes</title> <link rel="stylesheet" href="/style.css"> </head> <body>

<h1>Los números primos del 1 al 100</h1>  <div class="criba"> <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div> <div class="number">8</div> <div class="number">9</div> <div class="number">10</div> <div class="number">11</div> <div class="number">12</div> <div class="number">13</div> <div class="number">14</div> <div class="number">15</div> <div class="number">16</div> <div class="number">17</div> <div class="number">18</div> <div class="number">19</div> <div class="number">20</div> <div class="number">21</div> <div class="number">22</div> <div class="number">23</div> <div class="number">24</div> <div class="number">25</div> <div class="number">26</div> <div class="number">27</div> <div class="number">28</div> <div class="number">29</div> <div class="number">30</div> <div class="number">31</div> <div class="number">32</div> <div class="number">33</div> <div class="number">34</div> <div class="number">35</div> <div class="number">36</div> <div class="number">37</div> <div class="number">38</div> <div class="number">39</div> <div class="number">40</div> <div class="number">41</div> <div class="number">42</div> <div class="number">43</div> <div class="number">44</div> <div class="number">45</div> <div class="number">46</div> <div class="number">47</div> <div class="number">48</div> <div class="number">49</div> <div class="number">50</div> <div class="number">51</div> <div class="number">52</div> <div class="number">53</div> <div class="number">54</div> <div class="number">55</div> <div class="number">56</div> <div class="number">57</div> <div class="number">58</div> <div class="number">59</div> <div class="number">60</div> <div class="number">61</div> <div class="number">62</div> <div class="number">63</div> <div class="number">64</div> <div class="number">65</div> <div class="number">66</div> <div class="number">67</div> <div class="number">68</div> <div class="number">69</div> <div class="number">70</div> <div class="number">71</div> <div class="number">72</div> <div class="number">73</div> <div class="number">74</div> <div class="number">75</div> <div class="number">76</div> <div class="number">77</div> <div class="number">78</div> <div class="number">79</div> <div class="number">80</div> <div class="number">81</div> <div class="number">82</div> <div class="number">83</div> <div class="number">84</div> <div class="number">85</div> <div class="number">86</div> <div class="number">87</div> <div class="number">88</div> <div class="number">89</div> <div class="number">90</div> <div class="number">91</div> <div class="number">92</div> <div class="number">93</div> <div class="number">94</div> <div class="number">95</div> <div class="number">96</div> <div class="number">97</div> <div class="number">98</div> <div class="number">99</div> <div class="number">100</div> </div>

</body> </html>

---------- FIN DEL ARCHIVO index.html ---------- ---------- INICIO DEL ARCHIVO style.css ---------- h1 { text-align: center; color: navy; }

.criba { text-align: center; }

/* ----- SIMBOLOGÍA PARA EL FONDO -----

VERDE BANDERA = NÚMERO PRIMO MORADO CLARO = NÚMERO COMPUESTO

Los 100 bloques se inicializan con el fondo VERDE (PRIMO) */ .number { width: 50px; height: 50px; display: inline-block; margin: 0.5em 0.25em; background-color: green; color: white; line-height: 50px; }

/* El procedimiento para calcular los números PRIMOS del 1 al 100 se describe a continuación:

1. El PRIMER bloque se "desactiva" pintando su fondo de color MORADO (Dado que la UNIDAD NO es PRIMO NI COMPUESTO)*/ .number:first-child,

/ 2. Ahora el siguiente bloque con fondo VERDE, marcado con el NÚMERO 2, se mantiene en VERDE (PRIMO) Mientras que sus múltiplos siguientes, comenzando con el NÚMERO 4, se "desactivan" colocando su fondo de color MORADO (COMPUESTO) / .number:nth-child(2n + 4),

/ 3. Ahora el siguiente bloque con fondo VERDE, marcado con el NÚMERO 3, se mantiene en VERDE (PRIMO) Mientras que sus múltiplos siguientes, comenzando con el NÚMERO 6, se "desactivan" colocando su fondo de color MORADO (COMPUESTO) / .number:nth-child(3n + 6),

/ 4. Se sigue con el mismo procedimiento anteriormente detallado con el siguiente bloque en VERDE (PRIMO), marcado con el NÚMERO 5, así cómo con los demás bloques que aún se mantengan en VERDE (PRIMO) / .number:nth-child(5n + 10), .number:nth-child(7n + 14)

/ 5. Por simple inspección visual, se determina que los múltiplos de 7 terminan de seleccionar TODOS los números COMPUESTOS del 1 al 100. Por lo cual el SELECTOR para los múltiplos de 11 y los posteriores números PRIMOS, ya no son necesarios. / /* .number:nth-child(11n + 22) */

{ background-color: rgba(128, 0, 128, 0.25); color: rgba(0, 0, 0, 0.5); }

---------- FIN DEL ARCHIVO style.css ----------