How to Create JavaScript Password Generator

How to Create JavaScript Password Generator (Free Code)

How to Create JavaScript Password Generator

If you are a beginner and want to create a JavaScript Password Generator then this tutorial is for you. Here I have shown step-by-step and shared complete information on how to create a password generator using JavaScript. 

JavaScript Password Generator will help you create the password of your choice. Earlier I showed you how to create JavaScript Random Password Generator. However, this design will give you the option to create a password manually.

This simple password generator will help you create the password you want. There are different options and controls. This will allow you to create the password you need.

JavaScript Password Generator

You need JavaScript enabled to view it to make it. Here I have used HTML CSS and some amount of JavaScript.

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

First, a box was created on the webpage. In that box, I first created a display where the generated passwords can be seen. 

Then an input box is created where you can control the width of the password. This means that the number of characters you want to create the password can be controlled by this slider.

Then there are the four smaller boxes. This select box created by the checkbox will help you to further customize your password. There is a button at the end of which clicks on which the password is generated and can be seen in the display.

How to create Password Generator using JavaScript

If you want to create this Password Generator JavaScript then you must have a basic idea about HTML, CSS, and javascript. 

But if you just want the source code then follow the part below the article. But if you are a beginner then follow the tutorial below.

This JavaScript Password Generator has a copy button. When you click on the Generate button, the password will be copied automatically.

1. Make a box on the webpage

I first created an area using the following HTML and CSS codes. In this area, you can see all the information of Password Generator with JavaScript.

<div id=”password-generator”>
</div>

The webpage has been designed using the following code. Here the background color of the webpage is blue.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  text-align: center;
  height: 100vh;
  background: #0976d5;
}
webpage has been designed

I have used the background color of this box as white and width: 500px. Box shadows have been used to enhance beauty.

#password-generator {
  padding: 2rem;
  margin: 0 auto;
  width: 500px;
  border-radius: 3px;
  box-shadow: 0 0 2px #1f1f1f;
  border: 3px solid #d5d4ff;
  position: relative;
  background: white;
  white-space: nowrap;
}
Make a box on the webpage

2. Create a password viewing display (more…)

Continue ReadingHow to Create JavaScript Password Generator (Free Code)
Number Guessing Game Using JavaScript

Number Guessing Game Using JavaScript (Free Code)

Number Guessing Game Using JavaScript

JavaScript Number Guessing Game is a simple JavaScript game for beginners. I have shared many more types of JavaScript game tutorials with you before. However, this design is quite simple. 

This Number Guessing Game JavaScript will basically help you to know how to create JavaScript games. The number guessing game project will help you understand how accurate your input number is. That means there is a number limit here. 

You have to guess any one of those numbers. If your guess number is equal to the number guessed by the game then you will win.

The javascript guessing game is a simple project that will help you to learn more about javascript. If you want to make a JavaScript game for the first time then you can try to make this Number Guessing Game in JavaScript.

Number Guessing Game JavaScript

Below is a demo that will help you get a preview of this number guessing game HTML. Here I have shared step-by-step tutorials and source code. Use the button below the article if you want to download the source code.

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

Has created a box on a web page as you can see above. In which a heading is used first then an input space. You will input the number you guessed in that input space.

Then there is a button that will submit the number you guessed. Then there is a display where you can see the results of this game. Below all is a heading that will help you to know if your input number is correct.

I did not use very complex JavaScript to create this Number Guessing Game JavaScript. If you know something about javascript then you can easily create this number guessing game HTML.

How To Make Number Guessing Game JavaScript

Hopefully watching the demo above has aroused your interest in making this project. To build it you must have a basic idea of ​​HTML CSS JavaScript. 

But if you are a beginner, there is no reason to worry. Here I have shared step-by-step tutorials and shown possible results with pictures after each step.

Step 1: Basic structure of Guessing Game

A basic structure of this project has been created using the following HTML and CSS codes. Basically, I made a box on the web page. 

Here we have used blue as the background color of the webpage and white as the background color of the box. Box min-width: 350px, max-width: 400px used.

<div class=”container”>
</div>
*,
*:before,
*:after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: rgb(23, 99, 196);
}
.container{
  position: absolute;
  width: 50%;
  min-width: 350px;
  max-width: 400px;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  background-color: #ffffff;
  padding: 50px 10px;
  border-radius: 5px;
  display: grid;
  justify-items: center;
  font-family: ‘Poppins’,sans-serif;
}
Basic structure of Guessing Game

Step 2: Add a heading in the box (more…)

Continue ReadingNumber Guessing Game Using JavaScript (Free Code)
Create Copy to Clipboard using JavaScript

Create Copy to Clipboard using JavaScript (Just 2 Lines)

Create Copy to Clipboard using JavaScript

In this tutorial, you will learn how to create a javascript copy to clipboard. Here I have given step by step tutorial and source code for beginners on how to create copy to clipboard javascript.

Earlier I shared with you many more types of javascript click to copy to clipboard tutorials. But it is much easier than others.

Javascript to copy to clipboard is one of the most important elements for a website. It helps to copy the information in a box. Here I have used textarea to create the box. Although you can use input. In this Textarea, you can copy everything you input with the help of a copy button.

JavaScript Copy to Clipboard

There are two ways to input text in this text area. You can add text to textarea by default. You can also type here and copy that text.

If you want to know how I made this javascript copy to clipboard then keep following this tutorial. Below I have given a demo that will help you to know how I created copy to clipboard javascript. Here you will find the required source code and live preview.

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

As you can see above, I used blue as the background color of a web page. Made a box on top of it. The background color of this box is white. 

First of all, we have created an input space in the box. In that Textarea, you can input the information of your choice.

How To Copy to Clipboard using JavaScript

Then created a button. If you click on the copy button, the information in that input box will be copied. I have done many tutorials on javascript copy to clipboard with you before.

Below I have shown the step-by-step tutorial and the possible results of each step with pictures. If you only have source code then you can use the download button at the bottom of the article.

Step 1: The basic structure of the copy box

A box has been created on the web page using the following HTML and CSS codes. Which will serve as the basic structure of the project i.e. will contain all the information. 

The width of this box is 350px and the background color white has been used.

<div class=”container”>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Poppins”, sans-serif;
}
body {
background: rgb(6, 118, 185);
text-align: center;
align-items: center;
justify-content: center;
}
.container {
width: 350px;
background: white;
margin: 100px auto;
padding: 15px;
border-radius: 4px;
}
The basic structure of the copy box

Step 2: Create input space using Textarea (more…)

Continue ReadingCreate Copy to Clipboard using JavaScript (Just 2 Lines)
Days Between Two Dates Using JavaScript & CSS

Days Between Two Dates Using JavaScript & CSS

Days Between Two Dates Using JavaScript

In this tutorial, you will learn how to create Days Between Two Dates JavaScript. This type of project helps to calculate the distance between two specific dates. A lot of times we have to find the data between two dates in a list. In that case, this project (get days between two dates javascript) will help you completely.

If you want you can calculate your age using this calculator. Although I have already shared many types of JavaScript age calculator tutorials for calculating age. 

The calculated time here can only be seen in the form of days. That is, the number of days between the two dates can be seen here. You will not see any other type of time (hours, minutes, seconds) here.

Days Between Two Dates JavaScript

Below I have given a preview that will help you to know how this project (calculate days between two dates) works. Below you will find all the source codes. But for beginners, I have shared step-by-step tutorials. 

If you are a beginner then follow the tutorial below to make Days Between Two Dates calculator.

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

As you can see above, the background color of a web page is blue. And a box has been made on it. I first used a heading in this box. The background color of this heading is blue and the text color is white. Then there are the two input boxes. 

Those input boxes are mainly for date input (type = “date”). The difference between the two dates will be calculated. We get many types of input functions in HTML. Notable among them are password (type = “password”), text (type = “text”), file (type = “file”), color (type = “color”), etc. 

A type of input with the same date is available. Which will basically help to select a date. Here you can select the date or manually input the date of your choice here.

How to get data between two dates in javascript

Then there is a button that can be clicked to know the difference between these two dates. At the end of all, there is a display in which the results can be seen. This means that when you click on the submit button, you can see the difference between the two dates in the display or box below.

I used only HTML, CSS, and JavaScript to create this Days Between Two Dates project. No jQuery was used here and I gave the necessary explanations for each line.

Step 1: Basic structure of calculator

I have created the basic structure of this project using the following HTML and CSS. The width of this project: 70vw and light blue color has been used in the background.

<div class=”container”>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: “Rubik”, sans-serif;
}
body {
height: 100vh;
background: rgb(94, 169, 233);
}
.container {
width: 70vw;
max-width: 37.5em;
background-color: #f6f9fa;
padding: 3em 1em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Basic structure of calculator

Step 2: Title of Days Between Two Dates calculator

Now I have added a heading using the following codes. This heading will only help to enhance the beauty. Using margins I determined the position of the heading. The background color is blue and the text color is white.

<div class=”heading”>Days Between Two Dates</div>
.heading{
background: rgb(18, 128, 207);
color: white;
margin: -48px -16px 50px -16px;
font-size: 23px;
padding: 5px;
text-align: center;
}
Title of Days Between Two Dates calculator

Step 3: Create two date input spaces (more…)

Continue ReadingDays Between Two Dates Using JavaScript & CSS
Simple Custom Select Dropdown using HTML and CSS

Simple Custom Select Dropdown using HTML and CSS

Simple Custom Select Dropdown using HTML and CSS

In this article, you will learn how to create Custom Select Dropdown using HTML and CSS. Earlier I shared with you the tutorials on different types of the dropdown menubar and dropdown custom select box. Here I have created a custom dropdown menu which has been created using HTML CSS and some amount of jQuery.

All information and elements have been added by HTML. Select dropdown is designed by CSS. Custom Select Dropdown has been implemented using some amount of jQuery.

This type of Select dropdown we use in different places. We often see such elements in different types of login forms, registration forms. We use the radio button to select any one of the many options. However, if the amount of options is much more then this type of CSS Custom Select Dropdown is used.

When you click on the custom dropdown menu, you will see all the dropdowns. You can select any one of those options dropdowns or menu of your choice.

Custom Select Dropdown Example

It’s easy to make if you have a basic idea about HTML and CSS. As I said, I used JQuery to make Simple Custom Select Dropdown work. But if you do not know jQuery then there is no problem. 

I have given all the necessary explanations. Below I have given a preview that will help you to know how it works.

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

As you can see above, I have created a small box on the webpage that will serve as a Select box. There is an option in that box. When you click on that option, all the dropdown options can be seen below. When you click on any of those options, that option can be found in the Select box.

How to Create a Custom Select Box

Here I have used four menu items. You can use your dropdown. As I said before I created it according to the design of Neumorphism. You can use a different color or any other design here if you want. 

If you only want the source code, use the download button below the article. If you are a beginner I would recommend following the complete step-by-step tutorials below.

Step 1: Basic structure of Select Box

I have used the following HTML and CSS codes to create the basic structure of the CSS Select Box. 

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

I designed the webpage using the following CSS codes. The background color of the webpage is used here.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #dde1e7;
color: #333;
}
.container {
height: 25rem;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 15rem;
height: 100%;
position: relative;
user-select: none;
overflow: hidden;
border-radius: 5px;
}

Step 2: Default option of Select Dropdown

The select box has been created using HTML and CSS in the following. Simple Custom Select Dropdown has a default select option added. Here I used an icon and used a text. 

<ul class=”by_default”>
  <li>
   <div class=”sharing”>
     <div class=”share-icon”>
        <i class=”fab fa-instagram fa-2x”></i>
     </div>
     <p>Instagram</p>
    </div>
  </li>
</ul>

Select Dropdown has no height or width, it has its own size based on the amount of content. However, padding has been used to create some space around it. 

The background color of the Select box is the same as the background color of the web page. However, to understand the size of the Select box, a shadow has been used around the Select box. 

.box .by_default {
background: #dde1e7;
margin: 10px;
box-shadow: -3px -3px 7px #fffdfdcc,
              3px 3px 5px rgba(94, 104, 121, 0.342);
border-radius: 5px;
position: relative;
cursor: pointer;
z-index: 2;
}
.box .by_default li {
padding: 1rem;
}
Default option of Select Dropdown

In the image above we can see the icons and the text are located at the bottom. The following CSS has been used to position these side by side.

.box .sharing {
display: flex;
align-items: center;
}
.box .sharing .share-icon {
margin-right: 1.1rem;
margin-left: 0.9rem;
}
Select Dropdown

Step 3: List of Custom Select Dropdown (more…)

Continue ReadingSimple Custom Select Dropdown using HTML and CSS