Analizador de texto

Nota: Este proyecto lo resolvimos en 4 sprints.

Creamos una aplicación web que servirá para que el usuario pueda analizar un texto en el navegador mostrando una serie de indicadores y métricas específicas sobre caracteres, letras, números, etc. Que hayan sido enviadas como input por ella.

Comenzamos este proyecto haciendo un fork y clonando el repositorio, que contiene un boilerplate con tests (pruebas). Un boilerplate es la estructura básica de un proyecto que sirve como un punto de partida con archivos y configuración inicial de dependencias y tests. El boilerplate que les damos contiene esta estructura:

./
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── README.md
├── package.json
├── src
│   ├── analyzer.js
│   ├── index.html
│   ├── index.js
│   └── style.css
└── test
    ├── .eslintrc
    └── analyzer.spec.js

Tecnologias usadas:

• HTML, CSS y JavaScript.

• Utilizamos Github Pages para desplegar nuestro sitio web.

  Aqui el link: https://dev-ventura.github.io/DEV013-text-analyzer/

Funcionalidades

1. La aplicación permite al usuario ingresar un texto escribiéndolo en un cuadro de texto.

2. La aplicación calcula las siguientes métricas y actualiza el resultado en tiempo real a medida que la usuaria escribe su texto:

   • #PALABRAS: Cuenta el número de palabras en el texto de entrada y mostrar este recuento a la usuaria
   • #CARACTERES: Cuenta el número de caracteres en el texto de entrada, incluidos espacios y signos de puntuación, y mostrar este recuento a la usuaria.
   • #SIN CARACTERES: Cuenta el número de caracteres en el texto de entrada, excluyendo espacios y signos de puntuación, y mostrar este recuento a la usuaria.
   • #NUMEROS: Cuenta cúantos números hay en el texto de entrada y mostrar este recuento a la usuaria.
   • #SUMA NUMEROS: Suma todos los números que hay en el texto de entrada y mostrar el resultado a la usuaria.
   • #LONGITUD PROMEDIO: Calcula la longitud media de las palabras en el texto de entrada y mostrársela a la usuaria.

3. La aplicación permite limpiar el contenido de la caja de texto haciendo clic en un botón.

Pistas, tips y lecturas complementarias que ayudaron en este proyecto

Prepara tu PC para trabajar

Antes de comenzar instala lo siguiente:

1. Node.js
2. git Si estas en Linux es muy probable que ya este instalado 👀. Para conocer más de git visita este enlace
3. Un editor de código, te sugerimos Code

Después en GitHub:

1. Crear una cuenta. Conoce más de GitHub en este link
2. Realiza un fork de este proyecto
3. Configura tu SSH Key en GitHub. Puedes revisar este video o artículo

Luego en una shell ejecuta lo siguiente. Si estas en Windows puedes usar Git Bash:

1. Clona el fork en tu PC
2. Ubica la shell en el proyecto que clonaste
3. Instala las dependencias del proyecto con npm install
4. Instala playwright con npx playwright install chromium --with-deps
5. Para arrancar el servidor web npm start y dirígete a http://localhost:3000 en tu navegador.
6. A codear se ha dicho! 🚀

Objetivos de aprendizaje

Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.

HTML

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

• Modelo de caja (box model): borde, margen, padding

  Links

  • Box Model & Display
  • The box model - MDN
  • Introduction to the CSS box model - MDN
  • CSS display - MDN
  • display - CSS Tricks

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de datos primitivos

  Links

  • Valores primitivos - MDN

• Strings (cadenas de caracteres)

  Links

  • Strings
  • String — Cadena de caracteres - MDN

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Uso de bucles/ciclos (while, for, for..of)

  Links

  • Bucles (Loops)
  • Bucles e iteración - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Pruebas unitarias (unit tests)

  Links

  • Empezando con Jest - Documentación oficial

• Módulos de ECMAScript (ES Modules)

  Links

  • import - MDN
  • export - MDN

• Uso de linter (ESLINT)

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

Control de Versiones (Git y GitHub)

• Git: Instalación y configuración

• Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)

• GitHub: Creación de cuenta y repos, configuración de llaves SSH

• GitHub: Despliegue con GitHub Pages

  Links

  • Sitio oficial de GitHub Pages

Centrado en el usuario

• Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro

Diseño de producto

• Diseñar en distintos niveles de fidelidad

• Seguir los principios básicos de diseño visual