Character limit using HTML, CSS and JavaScript

Published: 02 October 2021
on channel: Leanne R

4,578

In this video, I show you how to set a character limit on an HTML input, and display error indications if the user attempts to exceed the limit.

✨ Contents: ✨

00:17 - Adding the HTML.
01:13 - Hiding the error message with the hidden attribute.
01:33 - Grabbing our input and error message paragraph with getElementById.
01:53 - Adding an input event listener to our input.
02:19 - Writing the function to check our code length.
02:50 - Using a conditional to show the error indications if the code is too long.
03:14 - The error CSS class.
03:32 - Removing the error indications if the user deletes characters.
04:03 - Ensuring that elements don’t jump when the error warning is rendered.
04:17 - Adding the maxlength attribute to our input.
04:48 - Making our maxLength variable dynamic.
05:23 - Updating our error warning with our dynamic maxLength variable.
05:48 - Showing the error message at the correct number of keystrokes.

--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

🐤 Say hi on Twitter: / rybaleanne
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...

On this page of the site you can watch the video online Character limit using HTML, CSS and JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Leanne R 02 October 2021, share the link with friends and acquaintances, this video has already been watched 4,578 times on youtube and it was liked by 65 viewers. Enjoy your viewing!

2,500,434

3.7K