circulito.html

  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <meta charset="UTF-8">
  4. <title>Circulito</title>
  5.  
  6. function cambiarLetra(input) {
  7. const parrafo = document.getElementById('chiquito');
  8. parrafo.style.color = input.value;
  9. }
  10.  
  11. function cambiarFondo(input) {
  12. const parrafo = document.getElementById('chiquito');
  13. parrafo.style.backgroundColor = input.value;
  14. }
  15.  
  16. function cambiarTamaño(input) {
  17. const parrafo = document.getElementById('chiquito');
  18. parrafo.style.fontSize = input.value;
  19. }
  20.  
  21. </script>
  22. #config {
  23. display:flex;
  24. }
  25. #config fieldset {
  26. margin-right:1em;
  27. }
  28. </style>
  29. </head>
  30. <h1>Circulito</h1>
  31. <div id="config">
  32. <legend>Color de letra</legend>
  33. <label><input type="radio" name="letra" value="black" onchange="cambiarLetra(this)">Negro</label><br>
  34. <label><input type="radio" name="letra" value="darkred" onchange="cambiarLetra(this)">Rojo</label><br>
  35. <label><input type="radio" name="letra" value="green" onchange="cambiarLetra(this)">Verde</label><br>
  36. <label><input type="radio" name="letra" value="purple" onchange="cambiarLetra(this)">Violeta</label><br>
  37. <label><input type="radio" name="letra" value="darkblue" onchange="cambiarLetra(this)">Azul</label>
  38. <legend>Color de fondo</legend>
  39. <label><input type="radio" name="fondo" value="white" onchange="cambiarFondo(this)">Blanco</label><br>
  40. <label><input type="radio" name="fondo" value="lightpink" onchange="cambiarFondo(this)">Rosa</label><br>
  41. <label><input type="radio" name="fondo" value="lightgreen" onchange="cambiarFondo(this)">Verde claro</label><br>
  42. <label><input type="radio" name="fondo" value="plum" onchange="cambiarFondo(this)">Lila</label><br>
  43. <label><input type="radio" name="fondo" value="lightblue" onchange="cambiarFondo(this)">Azul claro</label>
  44. <legend>Tamaño de letra</legend>
  45. <label><input type="radio" name="tamaño" value="6pt" onchange="cambiarTamaño(this)">Diminuta</label><br>
  46. <label><input type="radio" name="tamaño" value="10pt" onchange="cambiarTamaño(this)">Pequeña</label><br>
  47. <label><input type="radio" name="tamaño" value="12pt" onchange="cambiarTamaño(this)">Normal</label><br>
  48. <label><input type="radio" name="tamaño" value="16pt" onchange="cambiarTamaño(this)">Grande</label><br>
  49. <label><input type="radio" name="tamaño" value="36pt" onchange="cambiarTamaño(this)">Enorme</label>
  50. </div>
  51. <p id="chiquito">
  52. 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.
  53. </p>
  54. </body>
  55. </html>

Proinf.net