Character Count using HTML, CSS & JavaScript

Character Count using HTML, CSS and JavaScript

Character Count using HTML, CSS, and JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make a Character Count Using Html, Css, and JavaScript. In Character Count will count the no of characters as the user will enter it will count the character and indicate the user. In Today’s session, We will use HTML, CSS, and JavaScript to complete this Project.

Word/Character Count using HTML, CSS and JavaScript

The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Live Character Count.

Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Live Character Count project.

50+ HTML, CSS & JavaScript Projects With Source Code

At last we will use JS (JavaScript) which will add logic to make the Live Character Count project responsive from the user end.

I hope you have got an idea about the project.

HTML Code for Character Count

<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>

First we’ll start with creating the structure of the Live Character Count project for that as you can see the above code we have used all the necessary elements & attributes. Let us know code the CSS part to add styling and aligned the tags.

Restaurant Website Using HTML and CSS

CSS Code for Character Count

*{
    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;
}

Second comes the CSS code in which we have styled for the structure we have padded as well as aligned the Live Character Count project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now lets code the JavaScript part to make responsive.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

JavaScript Code for Character Count

let myText = document.getElementById("my-text");
myText.addEventListener("input", () => {
    let count = (myText.value).length;
    document.getElementById("count-result").textContent = `Total characters: ${count}`;
});

Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. Let us see the Final Output of the project Character Count using HTML, CSS & JavaScript (Source Code) | Live Character Count.

Final Output Character Count using HTML, CSS & JavaScript

\
We have Successfully created our Character Count using HTML, CSS & JavaScript (Source Code) | Live Character Count. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

10+ Javascript Projects For Beginners With Source Code

Written By – Harsh Sawant

Code By – @harshh9



Tags: , ,

Leave a Reply