bucle01.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Frutas</title>
  5. let frutas;
  6.  
  7. function iniciar() {
  8. frutas = document.querySelectorAll('#frutas li');
  9. }
  10. function colorearVioleta() {
  11. for (const item of frutas) {
  12. const nombre = item.innerHTML;
  13. if (nombre.length >= 5) {
  14. item.style.color = 'purple';
  15. }
  16. }
  17. }
  18. function pintarAmarillo() {
  19. for (const item of frutas) {
  20. const nombre = item.innerHTML;
  21. if (nombre.includes('i')) {
  22. item.style.backgroundColor = 'yellow';
  23. }
  24. }
  25. }
  26. function ponerNegrita() {
  27. for (const item of frutas) {
  28. const nombre = item.innerHTML;
  29. if (nombre.charAt(0) == 'M') {
  30. item.style.fontWeight = 'bold';
  31. }
  32. }
  33. }
  34. function ordenarLista() {
  35. const nombres = [];
  36. for (const item of frutas) {
  37. nombres.push(item.innerHTML);
  38. }
  39. nombres.sort();
  40. for (let i=0; i<frutas.length; i++) {
  41. frutas[i].innerHTML = nombres[i];
  42. }
  43. }
  44. </script>
  45. #frutas {
  46. list-style-type: none;
  47. padding:0;
  48. /*display:flex;
  49. flex-wrap: wrap;*/
  50. display: grid;
  51. grid-template-columns: repeat(6, 1fr);
  52. /*grid-auto-flow: column;*/
  53. }
  54. #frutas li {
  55. margin-right:1em;
  56. }
  57. </style>
  58. </head>
  59. <body onload="iniciar()">
  60. <h1>Frutas</h1>
  61. <ul id="frutas">
  62. <li>Cereza</li>
  63. <li>Plátano</li>
  64. <li>Kiwi</li>
  65. <li>Manzana</li>
  66. <li>Pera</li>
  67. <li>Naranja</li>
  68. <li>Lima</li>
  69. <li>Limón</li>
  70. <li>Sandía</li>
  71. <li>Albaricoque</li>
  72. <li>Melocotón</li>
  73. <li>Melón</li>
  74. <li>Arándanos</li>
  75. <li>Fresa</li>
  76. <li>Frambuesa</li>
  77. <li>Coco</li>
  78. <li>Uva</li>
  79. <li>Ciruela</li>
  80. <li>Níspero</li>
  81. <li>Mandarina</li>
  82. <li>Piña</li>
  83. <li>Maracuyá</li>
  84. <li>Aguacate</li>
  85. <li>Granada</li>
  86. <li>Tamarindo</li>
  87. <li>Higo</li>
  88. <li>Dátil</li>
  89. <li>Caqui</li>
  90. <li>Paraguayo</li>
  91. <li>Pomelo</li>
  92. </ul>
  93. <p id="botones">
  94. <button onclick="colorearVioleta()">5 letras o más</button>
  95. <button onclick="pintarAmarillo()">Tiene alguna i</button>
  96. <button onclick="ponerNegrita()">Empieza por M</button>
  97. <button onclick="ordenarLista()">Ordenar alfabéticamente</button>
  98. </p>
  99. </body>
  100. </html>

Proinf.net