“Editor de Texto”

Continuando con el camino de la clase pasada, estuvimos trabajando en el enunciado de “Editor de Texto”, intentando pensar y resolver las funcionalidades pedidas.

Aplicar Estilos negrita / cursiva / subrayado

Para esto podemos usar utilities de Bootstrap relacionadas con el texto. Las utilities son clases.

• https://getbootstrap.com/docs/5.3/utilities/text/#font-weight-and-italics
• https://getbootstrap.com/docs/5.3/utilities/text/#text-decoration
• https://getbootstrap.com/docs/5.3/utilities/colors/#colors

Para agregar o eliminar clases podemos usar la propiedad classList del elemento. Esta propiedad incluye un método .toggle() específico para agregar y eliminar una clase.

• Propiedad classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
• Método toggle(): https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

Editar Texto

Para mostrar un campo de texto más grande que el elemento <Input type="text"> podemos usar el elemento <TextArea> de HTML.

<form>
	<label for="nuevoTexto" class="form-label">Nuevo Texto</label>
	<textarea class="form-control" id="nuevoTexto" rows="3"></textarea>
	<button class="btn btn-primary mt-2" type="submit">Actualizar Texto</button>
</form>

Para asignar el texto a un elemento HTML podemos usar la propiedad innerText del elemento, que descubrimos que mantiene los saltos de linea, a diferencia de innerHtml o textContent. Documentación de textContent.

Estado del botón

Vimos que Bootstrap ya incluye el manejo de un botón como toggle, para “prender y apagar”. Documentación de “toggle” en botones.

Otra posibilidad, para hacer todavía más evidente el cambio es cambiar el color de los botones, o agregar un estilo al texto del botón. Documentación de variantes de botones.

Modificar Tamaño del texto

Para modificar el tamaño nos encontramos con que es necesario construir un valor que podamos usar como valor de la propiedad font-size de CSS. Este valor tiene que tener una unidad, por ejemplo el string '10px' está compuesto entre el número 10 y el string 'px'.

Para ingresar el valor surgió la idea de usar un <input type="range">:

<form>
	<label for="fontSize" class="form-label">Tamaño del Texto</label>
	<input type="range" class="form-range" id="fontSize">
	<button class="btn btn-primary mt-2" type="submit">Actualizar Texto</button>
</form>

“Tablero de Puntos” y “Lista de Contactos”

Presentamos los siguientes enunciados con los que vamos a estar trabajando.