AM
Alfredo Méjico ·
recursos de la clase de Patrones de diseño- Comportamiento
2 me gusta2 respuestas
Hugo Suárez López·
¡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> <!-- Contenedor principal para los 100 bloques. --> <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 ----------2 me gusta0 respuestas
Hugo Suárez López·
¡Reto para la comunidad! Usando pseudoclases, recrea la criba de Eratóstenes para identificar los primeros números primos del 1 al 100.
2 me gusta0 respuestas
Carlota Manrique Ruiz·
Recomendación de Álvaro (háganle caso).
Hola, alumno de EDteam que viene desesperado a los comentarios pensando que no sirve para ésto. Déjenme contarles en este comentario random, en una lección aleatoria, cómo conseguí eliminar esa idea de que yo tampoco valía para el front.
Acabo de volver a este curso para repasar. Lo había abandonado a mitad porque llegó un punto en el que ya no entendía NADA. Y en ese momento decidí por un lado seguir estudiando JS, pensé que mi camino estaba obligatoriamente en el back (y si no, es que era tonta) y por otro lado -simplemente porque no me apetecía rendirme del todo, a pesar de estar MUY quemada-, hacerle caso (al fin) a una cosa que nos dijo el profe Álvaro en un directo de este curso: practiquen. Y qué razón tenía. Ojalá le hubiera hecho caso antes :P
Aún sólo entendiendo las bases más sencillas de CSS, con la mitad del curso visto y habiendo tomado sus apuntes correspondientes en mi editor de código, lo mejor que pude hacer fue ponerme a aplicar lo visto hasta el momento (y otras cosas que iba preguntando al tito Google) en webs sencillas que hacía para mí misma, con el único motivo de practicar, practicar y practicar. Todo me salía feo pero le iba pillando la idea. También hice el curso Mi Primera Página Web., donde de la parte de CSS entendí la mitad de la mitad. Luego me vi unos tutoriales de YouTube en donde el chico lo hacía todo sin explicar demasiado, pero se veía claro en lo que salía en el navegador. Luego me di cuenta de varias malas prácticas, lo copié todo y corregí esas malas prácticas que encontraba, muchas veces con la ayuda de chatGPT (úsenlo cada vez que tengan una duda, les aseguro que van a aprender un montón, pregúntenle siempre todas las dudas si no tienen a nadie más que les explique en persona, si son autodidactas por ejemplo). Luego venía al curso y miraba las cosas que apenas recordaba, las aplicaba en mi mini-proyecto y así una y otra y otra vez hasta que me harté. Entonces volví aquí a acabar este curso. Definitivamente la mejor decisión en mi caso fue terminar haciéndolo así. Ahora mi intención es acabar de repasar lo ya visto y seguir aplicando a mi HTML (un día un formulario, otro día una galería, a la semana siguiente una web de recetas...) cada cosa nueva de cada lección que todavía no he visto mientras acabo de estudiar todo lo relacionado con JS en front y un poco del back; de esa manera no me desespero y aprendo más. Cuando acabe este curso comentaré en el último capítulo de la última lección para decirles: SÍ SE PUDO.
Conclusión: si les está costando, se desesperan y creen que no sirven, mi solución fue pasarme a hacer otros cursos mientras aplicaba lo poco que sabía del curso de EDteam, con la ayuda de chatGPT, de blogs, volver al curso a mirar lecciones para resolver dudas, copiando algunas cosas de tutoriales, stack overflow, etc, intentando corregir las malas prácticas que iba encontrando. Sé que lo mío no es el diseño, pero me di cuenta de que sí podía entender CSS y ahora sé que es verdad eso que dicen que la práctica es todo lo que vale, lo comprobé en mí misma y en mi estado de absoluta desesperación xDDDD Puede que me haya costado pero logré mi objetivo, que es saber lo suficiente de CSS como para poder pasar a código lo que me pida un diseñador en el futuro.
Adelante chicos que ustedes pueden, da igual que les cueste un mes, un año o una década, si practican, al final se van a encontrar un día diciendo "ay!!! Si al final lo entiendo!!!"
Avir Gariel·
Costo total, fijo y variable
Para obtener tus costos totales, fijos y variables. Consideras que son mensuales esos costos, por ejemplo en los servidores podría ser un costo anual pero si estas rentando oficinas es un costo anual. Todos los costos y/o cálculos están basados en una mensualidad o anualidad.
1 me gusta0 respuestas
Avir Gariel·
Costo total, fijo y variable
Para obtener tus costos totales, fijos y variables. Consideras que son mensuales esos costos, por ejemplo en los servidores podría ser un costo anual pero si estas rentando oficinas es un costo mensual. Todos los costos y/o cálculos están basados en una mensualidad o anualidad.
*Es una corrección del post anterior, por que no me deja editarlo, ni comentarlo
1 me gusta0 respuestas