En este código le vamos a enseñar hacer un contador automático de palabras en JavaScript. El programa tiene la misma función de un MSWord que puede rastrear cada palabra que ingresó. Puedes usar este código como referencia. Para obtener más información sobre esto, solo siga los pasos a continuación.
Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.
La interfaz principal:
Este código contiene la interfaz de la aplicación. Para crear esto simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">Contador Automático de Palabras en JavaScript</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-6">
<center><button class="btn btn-success" onclick="reset()">Limpiar</button></center>
<br />
<div class="form-group">
<textarea class="form-control" onkeyup="wordCount(this.value);" style="resize:none; height:330px; width:695px;"></textarea>
</div>
<center>
<div id="result"></div>
</center>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Creando el Script:
Este código contiene el script de la aplicación. El código contará automáticamente las palabras cuando ingrese en el campo de texto. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.
function wordCount(val) {
var count = parseInt(val);
var wordCount=val.split(" ");
document.getElementById("result").innerHTML = "Total de Palabras:" + " <label class='text-primary' style='font-size:20px;'>"+wordCount.length+"</label>";
}
function reset(){
document.getElementById("result").innerHTML = "";
document.getElementById("words").value="";
}
Ahí lo tienes, creamos con éxito un contador automático de palabras usando JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.
Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube:
