Real time calculation in a form using JavaScript | Tutorial

Real time calculation in a form using JavaScript Tutorial

Real time calculation

In this instructional exercise, we will figure out how to perform computations utilizing JavaScript. It is regularly required to do figurines online all together structures, ask for quote frames and so forth. This instructional exercise will demonstrate to you generally accepted methods to utilize diverse frame components like a drop-down rundown, radio catch, check box and content box in a computation.

This is quite recently fundamental HTML code for a shape. We call a JavaScript work inside the “on click” and “on change” occasions of the shape components. This capacity is the thing that does the counts and updates the cost. We will examine this later in the instructional exercise, yet it’s great you know why it’s there. For the present, we have our HTML code prepared so how about we start coding the JavaScript.

Live Demo   Download Source Code


<html class="gr__localhost"><head><title>Demo|Lisenme</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
<link type="text/css" rel="stylesheet" href="style.css">    
<link rel="stylesheet" href="">
<link rel="stylesheet" href=" Sans">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="//">
  <script src="//"></script>
  <script src="//"></script> 
    <script src="jquery.min.js"></script>
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family: "Open Sans"}
.select-boxes{text-align: center;}
select {
    background-color: #F5F5F5;
    border: 1px double #15a6c7;
    color: #1d93d1;
    font-family: Georgia;
    font-weight: bold;
    font-size: 14px;
    height: 39px;
    padding: 7px 8px;
    width: 250px;
    outline: none;
    margin: 10px 0 10px 0;
select option{
    font-family: Georgia;
    font-size: 14px;
/* Basic reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* Better text styling */
	font: bold 14px Arial, sans-serif;

/* Finally adding some IE9 fallbacks for gradients to finish things up */

/* A nice BG gradient */
html {
	height: 100%;
	background: white;
	background: radial-gradient(circle, #fff 20%, #ccc);
	background-size: cover;

/* Using box shadows to create 3D effects */
#calculator {
    width: 325px;
    height: auto;
    margin: 0px auto;
    padding: 20px 20px 9px;
    background: #9dd2ea;
    background: linear-gradient(rgba(171, 183, 241, 0.87), #8bceec);
    border-radius: 20px;
    box-shadow: 0px 4px rgba(0, 104, 136, 0.53), 0px 10px 15px rgba(0, 0, 0, 0.2);

/* Top portion */
.top span.clear {
	float: left;

/* Inset shadow on the screen to create indent */
.top .screen {
	height: 40px;
	width: 212px;
	float: right;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
	/* Typography */
	font-size: 17px;
	line-height: 40px;
	color: white;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	text-align: right;
	letter-spacing: 1px;

/* Clear floats */
.keys, .top {overflow: hidden;}

/* Applying same to the keys */
.keys span, .top span.clear {
	float: left;
	position: relative;
	top: 0;
	cursor: pointer;
	width: 66px;
	height: 36px;
	background: white;
	border-radius: 3px;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	margin: 0 7px 11px 0;
	color: #888;
	line-height: 36px;
	text-align: center;
	/* prevent selection of text inside keys */
	user-select: none;
	/* Smoothing out hover and active states using css3 transitions */
	transition: all 0.2s ease;

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
	background: #FFF0F5;
	margin-right: 0;

.keys span.eval {
	background: #f1ff92;
	box-shadow: 0px 4px #9da853;
	color: #888e5f;

.top span.clear {
	background: #ff9fa8;
	box-shadow: 0px 4px #ff7c87;
	color: white;

/* Some hover effects */
.keys span:hover {
    background: #1d91d0;
    box-shadow: 0px 4px #0676b3;
    color: #f1f1f1;

.keys span.eval:hover {
	background: #abb850;
	box-shadow: 0px 4px #717a33;
	color: #ffffff;

.top span.clear:hover {
	background: #f68991;
	box-shadow: 0px 4px #d3545d;
	color: white;

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
	box-shadow: 0px 0px #6b54d3;
	top: 4px;

.keys span.eval:active {
	box-shadow: 0px 0px #717a33;
	top: 4px;

.top span.clear:active {
	top: 4px;
	box-shadow: 0px 0px #d3545d;

</head><body class="w3-light-grey" data-gr-c-s-loaded="true">

<!-- Navigation bar with social media icons -->
<div class="w3-bar w3-black w3-hide-small">
  <a href="" class="w3-bar-item w3-button"><i class="fa fa-facebook-official"></i></a>
  <a href="" class="w3-bar-item w3-button"><i class="fa fa-twitter"></i></a>
  <a href="" class="w3-bar-item w3-button"><i class="fa fa-youtube"></i></a>
  <a href="" class="w3-bar-item w3-button"><i class="fa fa-google"></i></a>
  <a href="" class="w3-bar-item w3-button"><i class="fa fa-linkedin"></i></a>
<!-- w3-content defines a container for fixed size centered content, 
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1600px">

  <!-- Header -->
  <header class="w3-container w3-center w3-padding-48 w3-white">
    <h1 class="w3-xxxlarge"><a href=""><img src="img/logo.jpg" alt="Girl Hat" style="width:20%" class="w3-padding-16"></a></h1>
    <h6>Welcome to our <span class="w3-tag">Tutorial</span></h6>
  <!-- Image header -->

  <!-- Grid -->
  <div class="w3-row w3-padding w3-border">

    <!-- Blog entries -->
    <div class="w3-col l12 s12">
      <!-- Blog entry -->
      <div class="w3-container w3-white w3-margin w3-padding-large">
          <h2 style="text-align: center" ;=""> Real Time Calculation in a Website or Form using JavaScript by Lisenme</h2>
          <div class="select-boxes">
  <div id="calculator">
	<!-- Screen and clear key -->
	<div class="top">
		<span class="clear">C</span>
		<div class="screen"></div>
	<div class="keys">
		<!-- operators and other keys -->
		<span class="operator">+</span>
		<span class="operator">-</span>
		<span class="operator">÷</span>
		<span class="eval">=</span>
		<span class="operator">x</span>

<!-- PrefixFree -->
<script src="" type="text/javascript" type="text/javascript"></script>

              <script language="JavaScript">
// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
	keys[i].onclick = function(e) {
		// Get the input and button values
		var input = document.querySelector('.screen');
		var inputVal = input.innerHTML;
		var btnVal = this.innerHTML;
		// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
		// If clear key is pressed, erase everything
		if(btnVal == 'C') {
			input.innerHTML = '';
			decimalAdded = false;
		// If eval key is pressed, calculate and display the result
		else if(btnVal == '=') {
			var equation = inputVal;
			var lastChar = equation[equation.length - 1];
			// Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
			equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
			// Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
			if(operators.indexOf(lastChar) > -1 || lastChar == '.')
				equation = equation.replace(/.$/, '');
				input.innerHTML = eval(equation);
			decimalAdded = false;
		// Basic functionality of the calculator is complete. But there are some problems like 
		// 1. No two operators should be added consecutively.
		// 2. The equation shouldn't start from an operator except minus
		// 3. not more than 1 decimal should be there in a number
		// We'll fix these issues using some simple checks
		// indexOf works only in IE9+
		else if(operators.indexOf(btnVal) > -1) {
			// Operator is clicked
			// Get the last character from the equation
			var lastChar = inputVal[inputVal.length - 1];
			// Only add operator if input is not empty and there is no operator at the last
			if(inputVal != '' && operators.indexOf(lastChar) == -1) 
				input.innerHTML += btnVal;
			// Allow minus if the string is empty
			else if(inputVal == '' && btnVal == '-') 
				input.innerHTML += btnVal;
			// Replace the last operator (if exists) with the newly pressed operator
			if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
				// Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
				input.innerHTML = inputVal.replace(/.$/, btnVal);
			decimalAdded =false;
		// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
		else if(btnVal == '.') {
			if(!decimalAdded) {
				input.innerHTML += btnVal;
				decimalAdded = true;
		// if any other key is pressed, just append it
		else {
			input.innerHTML += btnVal;
		// prevent page jumps






You May Also Like

About the Author: admin

Leave a Reply

Your email address will not be published. Required fields are marked *