circulito2.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Circulito 2</title>
  5.  
  6. addEventListener('DOMContentLoaded', function() {
  7.  
  8. const parrafo = document.getElementById('chiquito');
  9. const config = document.getElementById('config');
  10.  
  11. config.addEventListener('click', function(event) {
  12.  
  13. if (event.target.tagName == 'INPUT') {
  14.  
  15. const input = event.target;
  16.  
  17. switch (input.name) {
  18. case 'letra':
  19. parrafo.style.color = input.value;
  20. break;
  21. case 'fondo':
  22. parrafo.style.backgroundColor = input.value;
  23. break;
  24. case 'tamaño':
  25. parrafo.style.fontSize = input.value;
  26. break;
  27. }
  28. }
  29.  
  30. });
  31.  
  32. });
  33.  
  34. </script>
  35. #config {
  36. display:flex;
  37. }
  38. #config fieldset {
  39. margin-right:1em;
  40. }
  41. </style>
  42. </head>
  43. <h1>Circulito 2</h1>
  44. <div id="config">
  45. <legend>Color de letra</legend>
  46. <label><input type="radio" name="letra" value="black">Negro</label><br>
  47. <label><input type="radio" name="letra" value="darkred">Rojo</label><br>
  48. <label><input type="radio" name="letra" value="green">Verde</label><br>
  49. <label><input type="radio" name="letra" value="purple">Violeta</label><br>
  50. <label><input type="radio" name="letra" value="darkblue">Azul</label>
  51. <legend>Color de fondo</legend>
  52. <label><input type="radio" name="fondo" value="white">Blanco</label><br>
  53. <label><input type="radio" name="fondo" value="lightpink">Rosa</label><br>
  54. <label><input type="radio" name="fondo" value="lightgreen">Verde claro</label><br>
  55. <label><input type="radio" name="fondo" value="plum">Lila</label><br>
  56. <label><input type="radio" name="fondo" value="lightblue">Azul claro</label>
  57. <legend>Tamaño de letra</legend>
  58. <label><input type="radio" name="tamaño" value="6pt">Diminuta</label><br>
  59. <label><input type="radio" name="tamaño" value="10pt">Pequeña</label><br>
  60. <label><input type="radio" name="tamaño" value="12pt">Normal</label><br>
  61. <label><input type="radio" name="tamaño" value="16pt">Grande</label><br>
  62. <label><input type="radio" name="tamaño" value="36pt">Enorme</label>
  63. </div>
  64. <p id="chiquito">
  65. Lorem fistrum no te digo trigo por no llamarte Rodrigor ahorarr qué dise usteer a wan al ataquerl la caidita. Ahorarr va usté muy cargadoo a wan te voy a borrar el cerito te va a hasé pupitaa pecador fistro mamaar a wan la caidita. No puedor qué dise usteer diodenoo a peich. Mamaar ahorarr ese pedazo de por la gloria de mi madre. A wan te voy a borrar el cerito qué dise usteer condemor te voy a borrar el cerito caballo blanco caballo negroorl no puedor hasta luego Lucas condemor.
  66. </p>
  67. </body>
  68. </html>

Proinf.net