Detect CapsLock in HTML CSS & JavaScript

Detect CapsLock using JavaScript

Hello friends hope you're doing well today it's a new project again as usual, today in this blog we're going to build a simple project and it is a CapsLock Detector, and we will be building this using HTML CSS and JavaScript. there are lots of amazing I have created, and I am sure today's design is also awesome.

Before we begin let me explain more about this project to you, because some of you didn't understand what this project is all about, so that's what I'll be doing here I'll be explaining more.

So a Detect CapsLock or CapsLock Detect Program is a program that detects when user hits or clicks the CapsLock key this program is then detected and this triggers a function to show a text for the user telling the user if CapsLock is turned on or off.

So now that you understand what this program does it's time to explain the usefulness of this program/project.

This program is useful in some case that you've a login form and you want user to be careful using CapsLock so they don't miss their password and they can get access to their account/website. take windows for example if a user clicks his/her CapsLock button windows trigger a command that says CapsLock is turned on.

So the take away of this is that this is just a custom warning to ensure user that CapsLock is turned on so the user will be informed and quickly turn off if CapsLock turned on is by mistake so they can Login correctly.

Detect CapsLock using HTML CSS & JavaScript[Vide Tutorial]

In the video you have seen the demo of the CapsLock Detector and the concept i used creating this using HTML CSS and JavaScript. I have tried to explain the concept of this programm in this blog post and how it can be used in so many areas. I hope you liked this project and alos understood the codes.

If you liked this Detect CapsLock program and want to get the source code or files, then you can get it from the source code area.

You May Like This:

Before Copying the given codes of Detect CapsLock, you need to create three files: an index.html file a style.css file and a script.js file. The index.html file and style.css file are your html file you will need this to style and create this project, after creatig those two files then you would need to also create a script.js file to add functions to the project => this is your JavaScript file. After creating these files then you can copy-paste the following codes in your text-editor. You can also directly download all source files from the give download button.

Detect CapsLock using HTML CSS & JavaScript[Source Code]

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Detect CapsLock using JavaScript</title>
  <!-- FontAwesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
      <div class="header">
        <div class="header_text">Detect CapsLock using JavaScript</div>
      </div>
      <div class="eInput">
        <input type="text" placeholder="Add your text here">
        <i class="icon fa fa-lock"></i>
      </div>
      <div class="error_msg">
        <span>CapsLock is turned on</span>
      </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS CODE:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  background: #6c5ce7;
  color: #fff;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(136deg, #6c5ce7, #8e44ad);
}
.container{
  padding: 20px;
  max-width: 400px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.2);
  position: relative;
}
.container::before{
  content: '';
  position: absolute;
  top: 54px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #bfbfbf;
}
.container .eInput input{
  width: 100%;
  height: 54px;
  padding-left: 20px;
  margin-top: 20px;
  outline: none;
  border: 2px solid #bfbfbf;
  border-radius: 3px;
  transition: .2s ease;
  font-size: 15px;
}
.container .eInput i{
  position: absolute;
  top: 85px;
  right: 33px;
  color: #6c5ce7;
  display: none;
}
.container .eInput input:focus{
  border-color: #6c5ce7;
}
.container .header .header_text{
  font-size: 17px;
  color: #6c5ce7;
  font-weight: 500;
}
.container .error_msg{
  display: none;
  margin-bottom: -10px;
  margin-top: 8px;
}
.container .error_msg span{
  color: #6c5ce7;
  font-weight: 500;
  font-size: 16px;
}

JAVASCRIPT CODE:

const eInput = document.querySelector(".eInput input"),
lock = document.querySelector(".eInput .icon"),
error = document.querySelector(".error_msg");

eInput.addEventListener("keyup", function(event) {
  if (event.getModifierState("CapsLock")) {
    error.style.display = "block";
    lock.style.display = "block";
  } else {
    error.style.display = "none";
    lock.style.display = "none";
  }
});

Detect CapsLock in HTML CSS & JavaScript

Creative Tutorials

Post a Comment

Post a Comment

Contact Form