How to Create a Virtual Keyboard in JavaScript
This is a simple JavaScript tutorial that will teach you how to create a JavaScript Virtual Keyboard. The virtual keyboard is a kind of on-screen input method. If you're using…
Drag and Drop Elements Using JavaScript & CSS
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…)
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…)
How to Create JavaScript Password Generator (Free Code)
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;
}
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;
}
2. Create a password viewing display (more…)
Number Guessing Game Using JavaScript (Free Code)
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;
}
Step 2: Add a heading in the box (more…)
How to Get Mouse Position in JavaScript (Free Code)
In this tutorial, you will learn how to get Mouse Position using JavaScript. This javascript get mouse position project will help you know which position you currently have your mouse…
How To Make RGB Color Generator Using JavaScript
In this article, I have shown you how to create RGB Color Generator using JavaScript. Earlier I shared with you how to make different types of random color generators, background-color generators, etc. In this tutorial, I have shown you how to create JavaScript RGB Color Generator. RGB is a color format. RGB (Red, Green, and Blue) is one of the colors we can use to express different formats.
In this project, you can create different colors by combining Red, Green, and Blue colors of your choice. A lot of times we can’t find the color we want to use for different projects. In that case, this kind of project will help you completely.
The three colors used here are red, green, and blue respectively. You can create any color you like by combining these colors.
RGB Color Generator Using JavaScript
Below is a demo that will help you to know how this RGB Color Generator works. Here you will find the required source code and live demo.
If you want, you can copy the source code and use it in your own work. However, for the source code, you can take the help of the download button below the article.
See the Pen
JavaScript RGB Color Generator by Raj Template (@RajTemplate)
on CodePen.
Hope you like the demo above. As you can see above, I used blue as the background color for the first web page. Then I made a small box. All information will be added to this box and its height will depend on the amount of content. First created a display in which the colors can be seen. Then I made three range slides.
I used HTML’s input function to create the slides. Three range riders have been used for the colors Red, Green, and Blue respectively. Below all is a small box in which the color code can be seen. You can copy that code and use it in your work.
How to Create JavaScript RGB Color Generator
RGB Color Generator is built with HTML CSS and JavaScript. First I designed the basics using HTML CSS. Then I implemented it using JavaScript. To make this RGB color generator you must have some basic idea about HTML CSS JavaScript.
If you only want the source code, you can use the download button at the bottom of the article. However, I request you to follow the tutorial below. This will allow you to know step by step how I made this.
Step 1: Basic structure of the generator (more…)
How to Make a Simple Tip Calculator in JavaScript
Simple Tip Calculator is a great JavaScript project for beginners. If you know Basic JavaScript then of course this type of Javascript Tip Calculator is important enough for you. Tip Calculator is basically an application that will help to do Tip Calculation.
For example, you and three of your friends went to eat at a hotel. And there’s a $ 100 bill. You have decided to give a 10% tip of the total bill to the waiter. And three of your friends will pay for that tip. In such a situation, there is no alternative to this type of project to calculate how much amount or how many dollars each person has to pay.
If you want to do this manually you have to work a lot harder. Since programming is to make our daily necessary work easier. So this kind of project will make your calculation much easier. Here you will only input information and it will automatically show the result.
Simple Tip Calculator in JavaScript
So if you are a beginner then you should definitely try this type of project. Here you will find complete source code and tutorial on how to create a Simple Tip Calculator using JavaScript. But yes, you need to have some basic idea about JavaScript. This is because some amount of JavaScript has been used to make this project work.
However, I have done a complete step-by-step explanation. Even if you don’t know JavaScript, you can understand it. If you want the source code, you can use the download button below the article.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
Hopefully, the demo above has helped you to know the live preview of the project (Tip Calculator in JavaScript). But if you can copy the source code from the demo section.
Related Post:
1. Loan Calculator using JavaScript
2. Show and Hide Password Using jQuery
3. Save Text to a File using JavaScript
4. Simple Weather App using JavaScript
5. BMI Calculator using Javascript
6. Simple Stopwatch using JavaScript
I would request you to follow the tutorial below. Because here you will know in full step by step how I made it. First, the background color of the webpage is blue. Then I made a box. At the beginning of this box, I used a heading which is basically to enhance the beauty of this project.
How to Make a Simple Tip Calculator in JavaScript
I created two input areas. In the first input box to input the amount of the bill and in the second input box to input the information of how many people will give this tip.
Then I created a range slider for the percentage of the tip. This means that you can determine what percentage of the total amount you want to give as a tip here. Below all there is a display in which the results can be seen. That is, after inputting the above information, the result of that calculation can be seen in the display below.
Step 1: Basic structure of Tip Calculator
We have created the basic structure of Simple Tip Calculator using the following HTML and CSS code. I have created a box here to tell the basic structure in which all the information can be found.
First I used the background color blue of the webpage and then I created this box. I used background color white and width: 80% and max-width: 350px.
<div id=”tip-calculator”>
</div>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
width: 100%;
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background: rgb(12, 141, 195);
font-family: “Lato”, sans-serif;
font-weight: 400;
line-height: 1.75;
}
#tip-calculator {
width: 80%;
max-width: 350px;
padding: 1rem;
background: white;
border-radius: 0.3rem;
}
Step 2: Add a heading using HTML (more…)
Make a Digital Clock with Date using JavaScript
In this article, you will learn how to create Digital Clock with Date using JavaScript. Earlier I shared with you many more types of digital and analog clocks designs. This digital watch is made with a Glassmorphism design.
Glassmorphism design is a very popular CSS effect that adds extraordinary beauty to any project. We all use digital watches. Making digital clocks from analog clocks is much easier. The time shown here will be taken from the device i.e. the time that will be on your device will be shown here. This time JavaScript’s newDate method is used to receive.
I fully explained how I took the time from the device to show in this project. There is no reason to worry if you are a beginner. Here I have shared step-by-step tutorials and given possible explanations of each line. As I said before you will see the date with this JavaScript digital clock. That means both time and date can be seen.
If you want to make this digital clock, you must have a basic idea about JavaScript HTML, and CSS. Below I have given a complete step-by-step tutorial on how I created this JavaScript Digital Clock with Date. As I said before it is made with the help of Glassmorphism design. In the case of Glassmorphism design, the background is somewhat transparent, meaning that the content in the background can be seen.
Digital Clock with Date using JavaScript
First, we created two colorful circles on the webpage. Here the background of the project(Digital Clock with Date using JavaScript) is almost transparent so the two colorful circles behind it can be seen somewhat clearly. First, a box was created to show the time here.
Then I made another small box where the date will be shown. Arrangements have been made here to show the month, day, and year between the dates.
See the Pen
Untitled by Raj Template (@RajTemplate)
on CodePen.
Hopefully, the demo above has helped you to know how it works. Above you will find the required source code. However, you can download the source code with the help of the button below the article.
First, we created two colorful circles using HTML and CSS. Then I made the basic design. After all, using JavaScript takes time from the device to make it work.
Step 1: Create two colorful circles
We have created two colorful circles on the webpage using the following HTML and CSS codes. I have created an area to see these. Those two circles can be seen in that area.
<div class=”background”>
<div class=”shape”></div>
<div class=”shape”></div>
</div>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
outline: none;
}
body {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
background-color: #080710;
height: 100vh;
}
The width of that area: 430px and height: 520px. Here the height of the circles, the width 140px, and the border-radius helped to convert it into a circle.
.background{
width: 430px;
height: 520px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
}
.background .shape{
height: 140px;
width: 140px;
position: absolute;
border-radius: 50%;
}
The following codes have been used to locate that circle. Different positions and background colors have been added for the two circles.
.shape:first-child{
background: linear-gradient(
#1845ad,
#23a2f6
);
left: -80px;
top: 70px;
}
.shape:last-child{
background: linear-gradient(
to right,
#ff512f,
#f09819
);
right: -80px;
bottom: 80px;
}
Step 2: HTML code to create a digital clock (more…)
Save Textarea Text to a File using JavaScript
In this article, you will learn how to convert Textarea Text to File using JavaScript. This is a great project for beginners. There is a box here, you can convert the contents of that box into a file. Many times in a project you need to save the text content to the file later. In that case, you can use this JavaScript Create and Save text file project.
We usually use Notepad when we want to create any kind of files like HTML, CSS, or text. This project will make that task much easier. There is a small box in which you can input some text or information.
Then there is another small box where you can use the rename of your choice. Then there is a download button that will save the file by clicking on it.
Save Text to a File in JavaScript
I used JavaScript, HTML, and CSS to create this project. First, we created its basic structure using HTML CSS. Then I implemented this project (Create and Save the text file in JavaScript) using JavaScript.
See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.
First I designed the webpage and made a box on it. I added a heading at the beginning of this box. The h1 tag has been used to enhance this heading. Then I created a box using HTML’s Textarea. In this box, you can input some text. Then create another input box in which you can add the rename of the file of your choice. Here you can create any type of file.
If you open this Create and save a file project with a browser, your content will be downloaded automatically. If you open it using a code editor, you will be asked for permission to download the file.
How to save textbox value to file using JavaScript
To build it you need to have a basic idea about HTML CSS and JavaScript. The video below will help you learn how it works.
You can also use the demo section above to know How to save form data in a Text file using JavaScript. If you just want the source code, you can use the download button at the bottom of the article. However, I request you to follow the step-by-step tutorials below.
Below I have shown step-by-step how to save text to a client-side file using JavaScript. Hereafter each step I have given possible results which will help you to understand better.
Step 1: Basic structure of Text to a File project
I have created the basics of this project (Create and Save the text file in JavaScript) using the following HTML and CSS code.
A box has been created here with width: 430px and the background color is white. Here I have used the background-color blue of the webpage.
<div id=”container”>
</div>
* {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #044b82;
font-family: “Kanit”, Verdana, Arial, sans-serif;
}
#container {
width: 430px;
padding: 40px 20px;
background: white;
}
