Advertisements
How to create letter counter big text area web pgae using HTML .
<!DOCTYPE html> <html> <head> <title>Letter Counter</title> <style> textarea { width: 500px; height: 300px; } </style> </head> <body> <h1>Letter Counter</h1> <textarea id="textInput"></textarea><br> <button id="countBtn">Count Letters</button><br><br> <p>Number of Letters: <span id="letterCount"></span></p> <script> const countBtn = document.querySelector("#countBtn"); const textInput = document.querySelector("#textInput"); const letterCount = document.querySelector("#letterCount"); countBtn.addEventListener("click", function() { const letters = textInput.value.trim().split(''); letterCount.textContent = letters.length; }); </script> </body> </html>
This code is similar to the previous word counter code, but with a few changes to count the number of letters instead of words. The JavaScript code uses the split('') method to split the input text into individual characters and then updates the letter count displayed on the page.
How to create a letter counter big text area web page using HTML with the refresh button
To create a letter counter web page with a large text area and a refresh button using HTML, you can use the following code:<!DOCTYPE html> <html> <head> <title>Letter Counter</title> <style> textarea { width: 500px; height: 300px; } </style> </head> <body> <h1>Letter Counter</h1> <textarea id="textInput"></textarea><br> <button id="countBtn">Count Letters</button> <button id="refreshBtn">Refresh</button><br><br> <p>Number of Letters: <span id="letterCount"></span></p> <script> const countBtn = document.querySelector("#countBtn"); const refreshBtn = document.querySelector("#refreshBtn"); const textInput = document.querySelector("#textInput"); const letterCount = document.querySelector("#letterCount"); countBtn.addEventListener("click", function() { const letters = textInput.value.trim().split(''); letterCount.textContent = letters.length; }); refreshBtn.addEventListener("click", function() { textInput.value = ''; letterCount.textContent = ''; }); </script> </body> </html>
Download Link
Advertisements
0 Comments