Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make a Detect Capslock using HTML, CSS and JavaScript. This will be a step-by-step guide. Let’s get started 🚀.
Before we start, here are some JavaScript Games you might like to create:
1. Snake Game using JavaScript
2. 2D Bouncing Ball Game using JavaScript
3. Rock Paper Scissor Game using JavaScript
4. Tic Tac Toe Game using JavaScript
5. Whack a Mole Game using JavaScript
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
HTML CodeÂ
Starter Template
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Font Awesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> <title>Detect caps lock using JavaScript - @code.scientist x @codingtorque</title> </head> <body> <!-- Further code here --> </body> </html>
Paste the below code in your <body>
tag
<div class="center"> <p> <div class="container"> <h3>Detect Caps Lock using JavaScript</h3> <input id="myInput" placeholder="Some text.."> <div style="display: flex;align-items: center;"> <div id="signal"></div> <p id="message">Capslock is ON!</p> </div> </div> </p> </div>
Output Till Now
CSS CodeÂ
Create a file style.css
and paste the code below.
body { display: flex; font-family: poppins; justify-content: center; align-items: center; background-color: black; color: white; height: 600px; } .container { padding: 40px; border: 2px solid deepskyblue; border-radius: 10px; } #text { display: none; color: red } input { font-family: poppins; width: 200px; height: 30px; transition: 0.3s; border-radius: 5px; padding: 0 5px; border: none; outline: none; } #signal { height: 10px; width: 10px; border-radius: 50%; background-color: red; box-shadow: 0 0 7px red; margin-right: 10px; }
Output Till Now
JavaScript CodeÂ
Create a file script.js
 and paste the code below.
var input = document.getElementById("myInput"); var signal = document.getElementById("signal"); var message = document.getElementById("message"); input.addEventListener("keyup", function (event) { if (event.getModifierState("CapsLock")) { signal.style.background = "red"; signal.style.boxShadow = "0 0 7px red"; message.innerText = "Capslock is ON!" } else { signal.style.background = "lawngreen"; signal.style.boxShadow = "0 0 7px lawngreen"; message.innerText = "Capslock is OFF!" } })
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖