Character limit using HTML, CSS and JavaScript

Publié le: 02 octobre 2021
sur la chaîne: 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...

Sur cette page du site, vous pouvez voir la vidéo en ligne Character limit using HTML, CSS and JavaScript durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Leanne R 02 octobre 2021, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 4,578 fois et il a aimé 65 téléspectateurs. Bon visionnage!

1,035