How to Check Password Strength in JavaScript

How to Check Password Strength in JavaScript

password strength checker javascript

In this article, you will learn how to create a password strength checker using JavaScript. Earlier I shared many more projects like Random Password Generator, Password Show Hide, etc. In this tutorial, you will learn how to create a javascript password strength checker.

This type of design will make your login and registration form more attractive and perfect. This type of password strength checker allows the user to input a strong and unique password.

This type of project is perfect for you if you want to add some conditions for inputting passwords in your login form.

Password Strength Checker JavaScript

In this case, the user will be able to input different types of characters to make his password even stronger. There is a progress bar to understand how strong this password is. Different colors have been added to this progress bar. These colors will indicate the quality of the password.

There are four types of steps in the bar. When you input general characters, red background color appears in 25% of the progress bar. When you input a variety of special characters into the password, the bar’s background color will increase by another 25%.

When different types of special characters, numbers, and capital letters are input into the password, then the progress bar will be hundred percent and its color will be green.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

There is an icon that allows the user to see and hide the password. Hopefully, you understand this kind of strength of password check will make your login form more attractive. It was created using only HTML CSS and JavaScript.

How to Create Password Strength Checker

If you know basic HTML CSS JavaScript you can easily create a javascript password strength checker. Here I have shared a step-by-step tutorial. 

First I created a box at the top of the web page. That box contains the first input box. Then I provided an icon. That icon will help you see and hide your password. If you are a beginner then follow the step-by-step tutorial below.

Step 1: Basic structure of Strength Checker

I have created a box on the web page using the following code. Then I designed the webpage a bit using CSS and used the blue color of the background of the webpage.

<div class=”wrapper”>
  <div class=”container”>
 
  </div>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: rgb(38, 125, 236);
}

I designed this box using the following codes. Box width: 400px, height will depend on the amount of content. I have also used white color in the background and used a shadow all around to enhance the beauty.

.wrapper{
  background-color: #ffffff;
  width: 400px;
  padding: 40px 0;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  border-radius: 3px;
  box-shadow: 0 20px 25px rgba(0,0,0,0.2);
}
.container{
  width: 300px;
  position: relative;
  margin: auto;
}
Basic structure of Strength Checker

Step 2: Place to input password (more…)

Continue ReadingHow to Check Password Strength in JavaScript
How to Detect Enter Key Press in JavaScript
How to Detect Enter Key Press in JavaScript

How to Detect Enter Key Press in JavaScript (Free Code)

How to Detect Enter Key Press in JavaScript

In this tutorial, you will learn how to create detect pressed key javascript. This type of project will basically help you to know which key has been pressed on the keyboard.

detect enter key design can be seen in many large applications. If you want to create a project where the user needs to show the key entered. Then you can use this kind of design.

Detect Pressed key JavaScript

When you click a button on the keyboard, that key, key code can be seen here. If you do not understand what I am saying then you can see the preview below. 

From here you will get a live preview and source code of this project (Detect Enter Key Press in JavaScript).

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see we have created a box at the top of a web page. When you press a key on your keyboard. Then all the information in the box can be seen.

How to Detect enter key in Javascript

Here you will find complete information and step-by-step tutorials. But to make this detect enter key project you need to have an idea about HTML, CSS, and javascript.

Below the article is a section on copying code. There is also a button to download the source code.

Step 1: Basic area of the project

First I created a box at the top of the web page in which all the information can be found. I have used blue color in the background of the web page and light white color has been used in the background of the box. 

<div class=”container”>
 
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: “Montserrat”, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #1276d1; /* fallback for old browsers */
 }
.container {
display: flex;
width: 400px;
flex-direction: column;
padding: 2rem;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
Basic area of the project

Step 2: Display the view of the pressed key (more…)

Continue ReadingHow to Detect Enter Key Press in JavaScript (Free Code)
Drag and Drop Elements Using JavaScript & CSS

Drag and Drop Elements Using JavaScript & CSS

Drag and Drop Elements Using JavaScript

In this tutorial, you will learn how to create javascript drag and drop elements. We see drag and drop JavaScript elements in different web pages or applications. That means we can drag those elements as we wish and keep them wherever we wish.

This type of JavaScript Drag and Drop Sortable is very easy to make. This tutorial will help you if you know basic JavaScript.

The design I have shown here is relatively advanced. Many drag elements have been used here. Earlier I shared a tutorial where I created this project by an element.

JavaScript Drag and Drop

I have created an image gallery with many images here. You can drag each of those images to the place of your choice.

If you do not understand what I am saying then watch the demo below. This preview will help you understand how it works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see I have created a small gallery of some images. Here are 6 images. Under normal circumstances, these images will stand side by side. Then you can drag and drop those images.

How to make drag and drop in javascript

Clicking on any image and dragging it will follow your mouse cursor. This type of design you can use in any of your applications or web pages. 

It will definitely give your user a new kind of experience. This javascript drag and drop is relatively easy to make.

I have given step by step tutorial below. If you only want the source code then you can see the following sections of the article. Here you will find live previews, step-by-step tutorials, and source code.

Step 1: Basic Area of Drag Elements

First created an area in which all the images can be seen in normal conditions.

<div class=”container”>
</div>

I designed the web page using the following codes. Here we have designed a background color and more on the web page.

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: “Recursive”, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
background-color: #333;
}

Now I will design the box in which all the images can be seen. The width of that area: 45vw, height: 40vh.

.container {
display: flex;
justify-content: center;
align-items: center;
width: 45vw;
height: 40vh;
max-width: 700px;
margin: 0 auto;
flex-wrap: wrap;
}

Step 2: Drag Elements have been added (more…)

Continue ReadingDrag and Drop Elements Using JavaScript & CSS
Custom Right Click Context Menu using JavaScript

Custom Right Click Context Menu using JavaScript

Custom Right Click Context Menu using JavaScript

Right-Click Context Menu I almost use in different operating systems. If you want to create a Custom Right Click Menu using JavaScript then this tutorial is for you.

In the case of this type of design, you can see this JavaScript Right-Click Context Menu by right-clicking the mouse. We see this type of design in any operating system or application.

In this tutorial, you will find complete information on how to create a custom context menu. In this case, you will see a box when you right-click the mouse. Where there are 5 menu items. If you want, you can add any image, text, video instead of a menu item.

Custom Right Click Context Menu

Many people use Jquery or React to make this kind of design. But if you want, you can create this custom Right-Click Context Menu JavaScript using Simple JavaScript. 

However, the js used here are comparatively much harder. Below you will find a demo that will help you figure out how to make it work.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, I have added a background color to the top of a web page. You will not see anything on the page because this menu will be visible after right-clicking. 

A small box will appear when you right-click your mouse. Box shadows have been used to enhance the white color and beauty in the background of the box. Each menu item has a hover color attached to it.

How to Create a Custom Right-Click Menu

If you want to create this Custom Right Click Context Menu then I have given all the code below. The explanation is not required for HTML and CSS. 

However, in the case of JavaScript, I have given the explanation of each line. But you need to have a basic idea about HTML, CSS, and javascript.

Step 1: Html code of context menu

The required information for this Right Click Context Menu has been added using your own HTML code. Copy these codes and add them to your HTML file.

<div id=”context-menu”>
  <div class=”item”>View</div>
  <div class=”item”>Refresh</div>
  <div class=”item”>Copy</div>
  <div class=”item”>Customize</div>
  <div class=”item”>Save As</div>
</div>

Step 2: Design the Right Click Menu

Now is the time to design it using a small amount of CSS code. First set a background color for the webpage. Then I designed the box, the background of the box is white color and with it, the box shadow has been used.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}
body {
background-color: #dfe8f1;
}
#context-menu {
background-color: #ffffff;
box-shadow: 0 0 20px rgba(37, 40, 42, 0.22);
color: #1f194c;
width: 10em;
padding: 0.8em 0.6em;
font-size: 1.3rem;
position: fixed;
visibility: hidden;
}
.item {
padding: 0.3em 1.2em;
}
.item:hover {
background-color: rgba(44, 141, 247, 0.2);
cursor: pointer;
}

Step 3: Activate Right Click Menu with JavaScript (more…)

Continue ReadingCustom Right Click Context Menu using JavaScript