Our project aims to create a real-time character counter using JavaScript. It features a text area container that displays both the total character count and remaining character count of 50. As users type, the total character count dynamically increases, and the remaining character count decreases. The text area locks once the limit of 50 characters is reached, and the remaining character count becomes zero. With this functionality, users can keep track of their remaining characters and be alerted when they hit the character limit.
Create these three files, copy the code into each one, then open index.html with Live Server.
real-time-character-counter/ ├── index.html ├── style.css └── index.js
<!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>Real-time Charater Counter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Real-time Charater Counter</h2>
<textarea
id="textarea"
class="textarea"
placeholder="Please write your text here..."
maxlength="50"
></textarea>
<div class="counter-container">
<p>
Total Charaters:
<span class="total-counter" id="total-counter"></span>
</p>
<p>
Remaining:
<span class="remaining-counter" id="remaining-counter"></span>
</p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, we are going to create an age calculator. As you can see from the final version of the project, we have a container here with the title age calculator with an input of a date. If we click on the date input, we can choose the date of our birthday. For example, if we choose a date in in 2022 and if we click now on Calculate Age, you can see the age is calculated based on this date and saying your age is 21 years old.
View project
Welcome to the Stopwatch Project! We will create a timer displayed at the top, along with three buttons - start, stop, and reset. Clicking the START button will begin the timer. The STOP button will pause the timer using a JavaScript method called SetInterval, which can be cleared using clearInterval. The RESET button will reset the timer to zero. If you click STOP and then START again, the timer will continue from the previously elapsed time. We'll start by installing CSS for the buttons' design and hover effects, then use JavaScript to get the browser time, manipulate the content, replace it with the calculated time, and provide the start, stop, and reset functionality.
View project
This project aims to create a temperature converter for beginners. The final version of the project includes three inputs for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats. Additionally, if you change one input, you will see a real-time change inside the other inputs. For instance, changing the Fahrenheit input to 100 degrees will show you that it is equal to 37 degrees Celsius and 311 Kelvin. To create this project, we will learn how to use an "onchange" event listener to track changes inside the inputs. We will also use the switch statement to track changes based on the name of the input we are working on. Additionally, we will use CSS to give the project a modern look, inspired by newMorphISM design. In summary, this project will help us learn how to create a temperature converter using JavaScript and CSS, and we will learn how to track changes using event listeners and switch statements.
View project