Crea tu primera app web: notas + contador fácil y rápido 📝⚡

Iniciar en la programación puede parecer abrumador, entre tantos lenguajes, frameworks y metodologías para considerar. A veces puede parecer más fácil delegar todo a una IA. ¡Tranquilo! Programar para la web puede ser sencillo, divertido y lo mejor de todo, ¡totalmente gratis! 🌐✨

Lo Que Vas a Construir

Siguiendo este tutorial, crearás una aplicación web simple para almacenar notas de texto y contar caracteres y palabras.

La app conservará los datos, así que recordará el texto cuando recargues la página o la vuelvas a abrir. Esto significa que tendrás una forma conveniente de guardar cualquier texto que quieras consultar más adelante, como direcciones, URLs, etc. 📄🔗

Un ejemplo de la simple aplicación web de texto que muestra notas incluyendo un registro de calendario y una lista de URLs.

También cuenta caracteres y palabras, lo cual es una buena introducción al manejo de cadenas (texto). Por supuesto, la app es muy sencilla: ¡ese es el propósito! Pero con este tutorial, aprenderás los conceptos básicos para desarrollar una aplicación web, y luego el mundo será tu ostra. 🦪💻

Cómo Lo Vas a Construir

Aunque las aplicaciones web son muy diversas, por lo general involucran tres tecnologías principales: HTML, CSS, y JavaScript. Es fundamental que comprendas sus roles antes de comenzar. 📚

HTML: El Lenguaje de Marcado de Hipertexto te permite definir la estructura de tu contenido. Con él, puedes marcar un texto según su significado, indicando si es un párrafo, un encabezado o un elemento en una lista, por ejemplo.
CSS: Las Hojas de Estilo en Cascada te permiten estilizar tu contenido. Usando este lenguaje, puedes colorear un párrafo de verde, hacer que todos tus enlaces sean negritas, o posicionar una barra lateral junto a tu artículo principal. 🎨
JavaScript: Con este lenguaje de programación, puedes agregar funcionalidades a tu página web. Puedes hacer que los botones muestren u oculten partes de tu documento al hacer clic, o implementar un procesador de texto completo o un videojuego. 🎮

El sitio web.dev (escrito por miembros del equipo de Chrome) y MDN, la Red de Desarrolladores de Mozilla, son dos excelentes fuentes de información sobre tecnologías web fundamentales.

La página de inicio del sitio web.dev con recursos de aprendizaje para HTML, CSS y JavaScript.

La Estructura de la App

La app que construirás constará de tres archivos simples: index.html, styles.css y script.js. 🗂️

No hay requisitos especiales para ejecutar la app, solo necesitas un navegador web. No hay funcionalidad de backend, por lo que no necesitas un lenguaje de scripting como PHP ni un servidor web local. Una vez que termines, puedes abrir el archivo index.html directamente en tu navegador y todo funcionará. 😊

Es importante mencionar que esta app guarda tu texto sin escribir en un archivo específico en el disco, ya que JavaScript no puede acceder al sistema de archivos. Utiliza el API de Almacenamiento Web, una alternativa poderosa a las cookies. 🍪💾

Cómo Construir el Tomador de Notas

Crea los siguientes tres archivos en el mismo directorio y luego abre index.html en un navegador web. Alternativamente, puedes descargar los archivos de este repositorio de GitHub. 📥

Construyendo la Estructura con HTML

El archivo index.html define la estructura del contenido de tu app en HTML. Incluye referencias a los otros dos archivos para que un navegador pueda combinarlos para el producto final.

Como todos los documentos HTML, la estructura de nivel superior incluye una sección head que contiene metadatos y un body que contiene el contenido real que aparecerá en la página:

html>
<html>
<head>
    ...
head>

Los metadatos en el head son muy breves, con solo un título de página (que aparece en la barra de título de tu navegador) y una referencia al archivo styles.css:

    <title>Textotitle>
    <link rel="stylesheet" href="styles.css" />

El body es más complicado, pero solo hay algunas partes importantes:

    <div id="counter">
        palabras: <span id="words">0span>
        /
        caracteres: <span id="chars">0span>
    div>

<textarea id=«text» autofocus=«1»>textarea>

El elemento div («división») contiene el conteo de palabras y caracteres de la app. Estará ubicado en la parte superior de la app web y se actualizará cada vez que cambie el texto.

Fíjate en los atributos id, que son vitales para la operación. El valor de un id debe ser único, para que la app pueda usarlo para identificar un elemento específico. Hacer esto puede ayudarnos a estilizar estos elementos y también a apuntarles cuando agreguemos funcionalidad.

El textarea es un elemento de formulario incorporado que te permite escribir texto simple en un navegador. Con el atributo autofocus, estará listo para escribir tan pronto como se cargue la página. Finalmente, la página hace referencia al archivo javascript, script.js.

En este punto, puedes abrir el archivo index.html en un navegador. No hará nada en este momento, y ni siquiera se verá bien, pero es útil verificar tu app en cada etapa para asegurarte de que lo básico funcione como esperas.

Una vista de la aplicación web para tomar notas con estilos por defecto del navegador, mostrando todo agrupado en la esquina superior izquierda.

Haciendo Que Se Vean Bien Con CSS

CSS te permite cambiar el estilo de partes de tu página web, dirigiéndote a esas partes y especificando valores para propiedades como font-size y background-color. Esta app de ejemplo no necesita un diseño muy refinado porque su interfaz es tan básica. Sin embargo, podemos pulir un poco las asperezas con un toque de estilo. 🎨✨

Primero, estiliza el body para definir el diseño general:

body {
    margin: 0;
    padding: 0;
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content 1fr;
}

Este CSS utiliza la disposición en cuadrícula para posicionar los conteos de palabras y caracteres en una fila estrecha sobre el textarea. La propiedad grid-template-rows especifica que la fila del conteo debe ser lo más corta posible (min-content) y el textarea debe llenar el espacio restante (1fr).

La fila del contador tiene un estilo básico para diferenciarla del resto del texto, principalmente a través de su fondo:

#counter {
    font-family: sans-serif;
    background-color: #f7f7f7;
    text-align: center;
    width: 100%;
    padding: 0.5em 0;
}

Finalmente, el textarea está estilizado para mostrar texto legible con suficiente espacio para respirar. La línea que separa los conteos del texto es en realidad el borde superior de este textarea.

textarea {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    padding: 1em;
    box-sizing: border-box;
    outline: 0;
    border: none;
    border-top: 1px solid #999;
}

La aplicación para tomar notas con estilos personalizados muestra la barra de conteo en la parte superior con un textarea de tamaño completo debajo.

Agregando Funcionalidad con JavaScript

Con la estructura y el estilo en su lugar, estás listo para agregar funcionalidad: el código que hace que esta simple app realmente haga algo. 🛠️

Antes de comenzar a escribir incluso el código más simple, es conveniente entender lo que deseas que haga. En este caso, hay solo un par de requisitos generales:

Guardar el texto ingresado y recargarlo cuando sea necesario.
Actualizar el conteo de caracteres y palabras para proporcionar estadísticas en tiempo real. 📊

Ambos requisitos implican la actualización de elementos en el documento. Así que el script comienza obteniendo referencias a estos nodos usando el método getElementById:

const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");

Ten en cuenta que words, chars y text son los IDs de sus respectivos elementos en el documento, asignados en el archivo HTML con el atributo id.

A continuación, necesitamos que la app reaccione cuando el texto sea cambiado:

textarea.addEventListener("input", function(ev) {
    localStorage.setItem("text", ev.target.value);
    update_counts(ev.target.value);
});

Un event listener es una función que JavaScript ejecutará automáticamente cuando ocurra un cierto evento. En este caso, anexamos un listener al nodo textarea, el cual se ejecuta cuando se produce el evento «input». Es decir, cuando alguien interactúa con el textarea.

A continuación, usamos el API de Almacenamiento Web para guardar el contenido actual del textarea, que proviene de ev.target.value. En esta estructura, ev es un objeto que representa el evento que disparó el listener, ev.target es el nodo que recibió el evento, y ev.target.value es el texto de ese textarea.

El método setItem toma dos parámetros: un nombre de clave para asociar con los datos y los datos reales a almacenar.

Después, llamamos a update_counts(), pasando el mismo texto. Explicaremos esa función en un momento.

Ahora que estamos guardando el texto, querrás cargarlo nuevamente cuando se abra o se recargue la app. Podemos encargarnos de eso usando otro listener:

window.addEventListener("load", function(ev) {
    var text = localStorage.getItem("text");
    textarea.value = text;
    update_counts(text);
});

Este listener maneja el evento load que ocurre en el objeto window, una representación de nivel superior de la ventana del navegador. Cuando la ventana se carga, una llamada a getItem() devuelve el valor de texto almacenado desde el almacenamiento local. Este código luego establece el valor del textarea al texto cargado y, al igual que el listener anterior, llama a update_counts() con este texto.

El trabajo restante se lleva a cabo en la función update_counts() que se ve así:

function update_counts(text) {
    chars.innerHTML = text.length;
    words.innerHTML = text.split(' ').length;
}

A diferencia de un textarea, el texto normal no tiene una propiedad value, así que establecemos la propiedad innerHTML en su lugar. La propiedad length de una cadena es una propiedad de solo lectura simple que nos da el número de caracteres.

text.split(‘ ‘) divide la cadena en los caracteres de espacio, devolviendo el resultado como un array de strings. Al igual que las cadenas, los arrays tienen una propiedad length que nos da el número de elementos en un array.

Si pruebas este código, sin embargo, podrías notar un par de errores:

No contará una palabra por sí sola en una línea correctamente, ya que no hay caracteres de espacio a su alrededor.
Sin texto en absoluto, informará una sola palabra debido a cómo funciona split.

Para solucionar el primer problema, puedes dividir sobre una expresión regular (\s significa «un carácter en blanco») en lugar de un espacio. Para solucionar el segundo, filtra las cadenas vacías del resultado:

    words.innerHTML = text.split(/\s/).filter(function(n) { return n != ''; }).length;

Si no entiendes completamente esa línea, consulta las páginas de MDN para split y filter.

La aplicación web con texto de ejemplo, mostrando conteos precisos de caracteres y palabras.

Puedes construir muchas aplicaciones web útiles con solo unos pocos archivos. También puedes extender esta simple app de notas para agregar más funcionalidad. Por ejemplo, puedes usar la propiedad window.location para recuperar la URL actual y soportar múltiples notas variando el nombre que pasas a localStorage.setItem. 🗒️🌍