word counter tool

Pratap Chandra Ghosh April 28, 2024

   <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Word Counter</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><style> textarea { width: 100%; padding: 10px; border: 1px solid #ccc; height: 150px; margin-top: 20px; resize: none;}#wordCount { margin-top: 10px; font-size: 20px;}</style></head><body style="background-color: rgb(232, 255, 247);"> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="https://www.youtube.com/@TechPratapOfficial/"> <b>Word Counter</b></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="https://www.youtube.com/@TechPratapOfficial/">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/@TechPratapOfficial/">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://www.youtube.com/@TechPratapOfficial/" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.youtube.com/@TechPratapOfficial/">Action</a></li> <li><a class="dropdown-item" href="https://www.youtube.com/@TechPratapOfficial/">Another action</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="https://www.youtube.com/@TechPratapOfficial/">Something else here</a></li> </ul> </li> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> </div> </nav><hr> <div class="container"> <h1>Word Counter</h1> <textarea id="textInput" placeholder="Type your text here..."></textarea> <div id="wordCount">Words: 0</div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <footer class="bg-primary text-white text-center text-lg-start"> <!-- Copyright --> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © 2024 Copyright: <a class="text-white" href="//www.youtube.com/channel/UCi7Ow0gTSPDft8c5k1tuEFQ/">tech pratap</a> </div> </footer> <script>// script.jsdocument.getElementById('textInput').addEventListener('input', function() { var text = this.value; var wordCount = text.trim().split(/\s+/).filter(function(n) { return n != '' }).length; document.getElementById('wordCount').textContent = 'Words: ' + wordCount;}); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body></html>

Post a Comment

0 Comments

Youtube Channel Image

Tech pratap Subscribe To watch more Blogging Tutorials