codemediaweb.com

Code Media

hire me

How To Create a Image Magnifier Using JavaScript

by

If you want to create JavaScript Image Magnifier then this tutorial is for you. Here I have shown step-by-step how to create Image Magnifier Glass using HTML CSS and JavaScript.  Earlier I showed another jquery image magnifying glass. If you want to create an Image Magnifier Glass using JQuery then you can watch that tutorial. … Read more

Simple Captcha Validation Using HTML CSS JavaScript

by
JavaScript CAPTCHA Validation

Javascript captcha validation is a common web element that makes a website more secure. Custom Captcha is mainly used in the login forms, registration forms, and contact forms.

In this article, I have shown how to create Simple Captcha Validation using JavaScript. Here you will find the captcha HTML code for free. With it, you will get step by step tutorial.

JavaScript CAPTCHA Validation

Captcha Validation protects the website from spammers. It is used to identify robots or bots. Since you are a programmer, you know that spamming a website can easily be done using loops of different program languages. 

Like you are creating a contact form so that the user can message manually. However, using a programming language, automatic messaging can be done at a certain time. Captcha Validation JavaScript is used to prevent this type of spam.

See the Pen
Untitled by Shantanu Jana (@shantanu-jana)
on CodePen.

In the case of Captcha Validation, basically from two boxes and a button. A box will contain some pictures or some captcha code. You have to input in another box by looking at those characters. If you input incorrectly, your message will not be sent.

Create Custom Captcha in HTML CSS & JavaScript

If you want to create this Custom Captcha using JavaScript then follow the tutorial below. Html, CSS, and javascript have been used to create this Simple Captcha Validation.

There is basically a display where random Captcha code can be seen. There is another input box to input the Captcha code. It has a submit button that will submit your input Captcha.

Step 1: Basic structure of Custom Captcha

The basic structure of Captcha Validation has been created using the following code. A box has been created here on the webpage. 

This project (Custom Captcha in JavaScript) has width: 400px, height: 200px and background color white.

<body onload=”Captcha();”> 
  <div class=”capt”> 
  </div>
</body>
body{
  background-color: rgb(7, 112, 209);
  font-family: sans-serif;
  }
.capt{
  background-color:#ffffff;
  width: 400px;
  height:200px;
  border-radius: 5px;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;   
}
Basic structure of Custom Captcha

Step 2: Captcha code viewing display

Read more

Preview Image Before Upload in JavaScript (Free Code)

by

Preview Image Before Upload is a common web element. preview uploaded image is used to preview an image before uploading it to the server.  This image upload with preview also plays an important role in various image uploading and editing websites. Demo Download In this article, you will learn how to create this type of … Read more

Simple Password Generator with JavaScript (Free Code)

by

If you want to create Password Generator using JavaScript then this tutorial is for you. Here I will discuss with you what is JavaScript Password Generator and how it is created. The design I will show you here is a random password generator. In the case of Random Password Generator, you will not be able … Read more

Simple Automatic Popup Window Using HTML and CSS

by

Automatic Popup Window is currently seen on most web pages. This tutorial will help you to know how to create Popup Window using HTML CSS and javascript. Automatic Popup Window HTML is used for various purposes. Mostly used for subscription forms or newsletters. It also uses the Automatic Popup box to display different types of … Read more

EMI Calculator Using HTML, CSS and JavaScript

by
JavaScript EMI Calculator

If you want to make a javascript EMI calculator then this tutorial is for you. Here I will discuss with you how to create a loan calculator using JavaScript.

There are different types of interest rate calculator or emi calculator. However, the design that I have created here is absolutely simple. Basically, it will be suitable for you if you are a beginner.

In this tutorial, you will learn about JavaScript and how to create an EMI calculator JavaScript. Here I will discuss everything with you. What could be the problem and how to make it easier.

JavaScript EMI Calculator

There are many types of tutorials on the internet for creating emi calculator HTML. However, in this article, you will find a lot of advanced and extra information. 

The loan calculator will basically help you to know how much you have to pay per month including the interest of any loan amount.

For example, you have taken a loan of 1000 rupees or you are buying a product which costs 1000 rupees. There is 5% interest per year. 

Now you want to return that money in 6 months. Then you can calculate how much money you have to pay per month with this interest rate calculator.

If you are having difficulty understanding what I am saying then be sure to follow the preview below.

See the Pen
EMI Calculator by Shantanu Jana (@shantanu-jana)
on CodePen.

Hope you liked the demo above and that you know how this JavaScript Loan Calculator works. With the help of HTML, I created the input boxes and added some basic text here. 

I have designed all the information by CSS. The most important thing here is JavaScript. There is a manual formula for calculating emi that EMI calculator formula I have added by JavaScript.

How to Create a EMI Calculator with JavaScript

Of course to make this simple EMI calculator you need to have some idea about HTML CSS and JavaScript. To make this JavaScript loan calculator you need to follow a few steps below.

Make a box on the webpage

Now I have created a basic area of ​​this emi calculator. This means that a box has been created at the top of the webpage in which all the input boxes and information of this loan calculator can be seen. The width of this box: 345px, height: 420px and background color white has been used.

<div id=”loancal”>
</div>
body {
  background: #ffffff;
  font-family: sans-serif;
}
#loancal {
  width: 345px;
  height: 420px;
  background-color: white;
  color: #fff;
  padding: 10px;
  margin: 100px auto;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
Make a box on the webpage

Add headings to EMI Calculator

Read more