Contador de Palabras en JavaScript

Contador de Palabras en JavaScript

Sexto proyecto de la guia 50 Proyectos de Programacion para Practicar y Aprender. Proyectos para Principiantes

Enunciado del proyecto

Esta herramienta permite al usuario ingresar un texto y obtener automรกticamente la cantidad de palabras que contiene.

Cรณdigo HTML, CSS y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Contador de Palabras</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f9f9f9;
    }
    textarea {
      width: 100%;
      height: 120px;
      padding: 10px;
      margin-bottom: 10px;
    }
    button {
      padding: 10px 20px;
      margin-bottom: 10px;
    }
    #resultado {
      font-weight: bold;
      font-size: 18px;
    }
  </style>
</head>
<body>

  <h2>Contador de Palabras</h2>

  <textarea id="texto" placeholder="Escribe tu texto aquรญ..."></textarea>
  <br/>
  <button onclick="contarPalabras()">Contar Palabras
</button>
  <p id="resultado"></p>

  <script>
    function contarPalabras() {
      const texto = document.getElementById("texto")
.value.trim();
      if (texto === "") {
        document.getElementById("resultado").innerText = 
"No hay palabras.";
        return;
      }

      const palabras = texto.split(/\s+/);
      document.getElementById("resultado").innerText = 
"Nรบmero de palabras: " + palabras.length;
    }
  </script>

</body>
</html>

Contador de Palabras en JavaScript. Explicaciรณn del Cรณdigo

  • HTML: Contiene un textarea para que el usuario escriba el texto, un botรณn y un pรกrrafo para mostrar el resultado.
  • CSS: Estilos simples para mejorar la presentaciรณn visual.
  • JavaScript: La funciรณn contarPalabras() toma el texto, lo separa por espacios usando split(/\s+/) y cuenta cuรกntos elementos tiene el arreglo.

Indice de la guia de proyectos

50 Proyectos de Programacion

Proyecto anterior

Lista de Tareas (To-Do List) en JavaScript