<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Character Count</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <textarea id="my-text" rows="8" placeholder="Type something here..."></textarea>
        <p id="count-result">Total characters: 0</p>
    </div>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
body{
    background-color: #0a192f;
}
.container{
    width: 400px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
textarea{
    width: 100%;
    resize: none;
    background-color: #172a46;
    border: none;
    font-size: 16px;
    line-height: 30px;
    padding: 15px;
    border-radius: 3px;
    color: #a8b2d1;
    outline: none;
}
p{
    color: #e5e5e5;
    text-align: right;
    margin-top: 20px;
}
let myText = document.getElementById("my-text");
myText.addEventListener("input", () => {
    let count = (myText.value).length;
    document.getElementById("count-result").textContent = `Total characters: ${count}`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.