Word & Character Counter App

To copy Engineer

Word & Character count App

0 Words and 0 Characters


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word & Character Counter App</title>
</head>

<body>
    <div class="pk-container">
        <div class="pk-heading">
            <h1 style="color:rgb(187, 49, 15)">To copy Engineer</h1>
            <h3><b>Word & Character count App</b></h3>
        </div>
        <textarea id="pk-area" placeholder="Enter Text and word Here"></textarea>
        <p class="pk-result">
            <span id="pk-word">0</span> Words and
            <span id="pk-char">0</span> Characters
        </p>
    </div>
</body>
<script>
    let pkArea = document.getElementById('pk-area');
    let pkChar = document.getElementById('pk-char');
    let pkWord = document.getElementById('pk-word');

    pkArea.addEventListener('input', function () {
        let content = this.value;
        pkChar.textContent = content.length;

        content.trim();
        console.log(content);

        let wordList = content.split(/\s/);

        let words = wordList.filter(function (element) {
            return element != "";
        });

        pkWord.textContent = words.length;
    });

</script>

<style>
    .pk-container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pk-container h1 {
        font-size: 25px;
    }

    .pk-container h3 {
        font-size: 20px;
    }

    .pk-heading {
        border: 2px solid rgb(187, 49, 15);
        padding: 5px;
        font-weight: 700;
        text-align: center;
        width: 400px;
    }

    #pk-area {
        height: 200px;
        width: 400px;
        resize: none;
        font-size: 15px;
        font-weight: 700;
        padding: 5px;
        margin-top: 15px;
        color: rgb(187, 49, 15);
        outline: none;
        border: 2px solid rgb(187, 49, 15);
    }

    #pk-area:focus {
        border: 2px solid rgb(187, 49, 15);
        outline: none;
    }

    .pk-result {
        color: rgb(187, 49, 15);
        font-size: 20px;
        width: 401px;
        text-align: center;
        font-weight: 700;
        padding: 5px;
        border: 2px solid rgb(187, 49, 15);
        margin-top: 10px;
    }

    #pk-word,
    #pk-char {
        font-size: 25px;
        font-weight: bold;
        text-decoration: underline;
    }
</style>

</html>