Whether for your registration or login forms, or even on your password change pages, informing your user when they use the Caps Lock key on their keyboard will considerably enhance their experience on your site. Let's discover in this article how to achieve this very easily!
Step 1
The HTML code.
<a href="#">
Messages
<span>3</span>
</a>We simply add a link to our page. The span tag will be our notification bubble.
To easily use an icon, we utilize feather icons.
What we do is very simple: we use an original attribute: data-feather which contains the value of the icon we want to add to our message.
Then we execute the JavaScript code with the replace() function so that it detects the class and replaces it with an SVG icon.
Step 2
Let's style the link and its hover effect.
a {
position: relative;
color: white;
border: 2px solid #FF4754;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 4px;
transition: all 0.2s;
}
a:hover {
background-color: #FF4754;
}In the previous step, we use Flexbox (display: flex) to center the content text in our notification bubble both horizontally and vertically.
We give it a 4px border of the page's background color to give the impression that the notification is not directly attached to the border of our button.
Step 3
Now, let's style the notification bubble.
#message {
color: #FF4754;
display: none; /* we will change this with JavaScript */
align-items: center;
justify-content: center;
margin-top: 15px;
}
#message svg {
margin-right: 10px;
}In the previous step, we select our message ID.
Then, we add the keyup event which detects whenever a key on the keyboard is pressed.
Thanks to getModifierState, we will check if the Caps Lock key has been activated using CapsLock.
If so, we display our message by changing the display value to flex, otherwise, we hide our message by ensuring the display value is set to none.