Calculator Using HTML, CSS and JavaScript

-

 

Build a Neumorphism Digital Calculator

 using HTML,  CSS and JavaScript.

Hello Guys!!!  Here's NEUMORPHISM DIGITAL CALCULATOR using HTML | CSS | JS.


Today I am sharing you the full working calculator which is made using JavaScript + it's a Neumorphism design.

Neumorphism is basically a very popular design currently used to create a variety of UI design. If you want to learn how to make this design, you mist have a basic idea about HTML, CSS, and JavaScript. Here, the structure and buttons of this calculator are basically made using HTML programming code. The CSS code helped to transform it into a Neumorphism design. This calculator is enabled using JavaScript code. 

In this series, we are going to be making a simple calculator with basic HTML, CSS and JavaScript. Our calculator will only able to perform basic math operations: addition, subtraction, multiplication and division. To better understand this tutorial you would need to have a little knowledge of HTML and CSS.

If you want to see the demo of it, I have added the video below.

Recommended videos for you :


Visually, a calculator is a table enclosed in a container. And as you should already know tables are made of rows and columns with cells to contain table data.
As you might have already guessed, we would need to create “buttons” for inputting values and a screen for displaying these values.

  •  A display area for displaying operators, operands and solutions.
  •  Buttons for inputting values to the display screen
Let’s get started !!

HTML

This is the basic format for HTML documents:
<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaScript Casio </title>

</head>   <body>      <! -- Content -- >   </body></html>

Open the "Index.html" file and type the following:

Index.html

<html>
  <head>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"
    media="all"/>   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
    font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="bootstrap/css/font.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>NEUMORPHISM DIGITAL CALCULATOR</title>
    <script type="text/javascript"
  </head>
<body>
<div class="calculator"> 
<form id="my-cal-light"> 
   <div class="display-result">
	<input type="text" id="displayNum" name="displayNum" placeholder="0" class="calculation-input"/>
	<input type="text" id="displayResult" name="displayResult" class="result-input" readonly/>
   </div> 

   <div class="calculation-items"> 	
	<div class="row-calculate"> 
	<div class="cal-item math-item">
	     <input type="reset" name="resetCalculate" value="C" onclick="reset_calculate()"> 
        </div> 
	<div class="cal-item math-item">
	     <input type="button" name="clearOneItem" value="&#9003" onclick="clearineitem()"> 
	</div> 
	<div class="cal-item math-Item">
	     <input type="button" name="remain" value="%" onclick="addCalculateItem(remain.value)"> 
	</div> 
	<div class="cal-item math-item green-input">
	     <input type="button" name="plus" value="+" onclick="addCalculateItem(plus.value)"> 
	</div> 
   </div> 

	<div class="row-calculate"> 
	     <div class="cal-item">
	          <input type="button" name="n1" value="1" onclick="addCalculateItem(n1.value)"> 
	     </div> 
	     <div class="cal-item">
		  <input type="button" name="n2" value="2" onclick="addCalculateItem(n2.value)"> 
	     </div>
	     <div class="cal-item">
		  <input type="button" name="n3" value="3" onclick="addCalculateItem(n3.value)"> 
	     </div> 
	     <div class="cal-item math-item green-input">
		  <input type="button" name="neg" value="-" onclick="addCalculateItem(neg.value)"> 
	     </div>
	 </div>

	 <div class="row-calculate">
	      <div class="cal-item">
		   <input type="button" name="n4" value="4" onclick="addCalculateItem(n4.value)"> 
	      </div> 
	      <div class="cal-item">
		   <input type="button" name="n5" value="5" onclick="addCalculateItem(n5.value)"> 
	      </div> 
	      <div class="cal-item">
		   <input type="button" name="n6" value="6" onclick="addCalculateItem(n6.value)"> 
	      </div> 
	      <div class="cal-item math-item green-input">
		   <input type="button" name="mp" value="*" onclick="addCalculateItem(mp.value)"> 
	      </div> 
	 </div> 

	<div class="row-calculate"> 
	     <div class="cal-item">
		  <input type="button" name="n7" value="7" onclick="addCalculateItem(n7.value)"> 
	     </div> 
	     <div class="cal-item">
		  <input type="button" name="n8" value="8" onclick="addCalculateItem(n8.value)"> 
	     </div> 
	     <div class="cal-item">
		  <input type="button" name="n9" value="9" onclick="addCalculateItem(n9.value)"> 
	     </div> 
	     <div class="cal-item math-item green-input">
		  <input type="button" name="dp" value="/" onclick="addCalculateItem(dp.value)"> 
	     </div> 
	 </div>

	 <div class="row-calculate"> 
	      <div class="cal-item">
		   <input type="button" name="n0" value="0" onclick="addCalculateItem(n0.value)"> 
	      </div> 
	      <div class="cal-item">
		   <input type="button" name="n_dot" value="." onclick="addCalculateItem(n_dot.value)"> 
	      </div> 
	      <div class="cal-item eval-item math-item">
		   <input type="button" id="" name="" value="=" onclick="evalCalculateItem()"> 
	      </div> 
	  </div>
   </div>
</form>
</div>
</body>
</html>


Adding Flavours of CSS !!

Open the "Styles.css" file you created and type the following:

Style.css


<--! for styling --!>

body {
    min-height: 100vh; 
    padding: 0; 
    margin: 0; 
    display: grid; 
    place-items: center;
    font-family: arial; 
    background: #bccbde;
}

.{
    box-sizing: border-box;
}

@font-face {
    font-family: "digital-7"; 
    src: url(digital-7. tt@) format("truetype");
} 

input { 
    outline: 0;
}

#my-cal-light {
    position: relative;
    background-color: #fff;
    padding-top: 50px;
    width: 305px; 
    border-radius: 30px; 
    background: #808080;
    box-shadow: inset 6px 6px 12px #ffff, inset -6px -6
    px 12px #d7d7d7, 10px 10px 20px rgba(0, 0, 0, 0.2);
}

#my-cal-light::before { 
    content: ""; 
    position: absolute; 
    height: 100px: 
    width: 4px; 
    right: -5px;
    top: 100px;
    background: #f0f0f0; 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


#my-cal-light::after {
    content: "";
    position: absolute; 
    height: 60px;  
    width: 4px;
    right: -5px; 
    top: 210px; 
    background: #f0f0f0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; 
}

#my-cal-light .display-result { 
    position: relative; 
    margin: 0 10px; 
    height: 160px;
    border-radius: 10px; 
    background: #000000; 
    border: 8px solid #acacac; 
    color: #21a6b0;
}

#my-cal-light .display-result input {
    font-weight: 400; 
    font-family: "digital-7"; 
    width: 100%; 
    border: none;
    text-align: right;
    background-color: transparent; 
} 

#my-cal-light .calculation-input { 
    padding: 5px 15px;  
    color: #4db6b1;  
    font-size: 2.5rem;
}

#my-cal-light .calculation-input::placeholder { 
    opacity: 1; 
}

#my-cal-light .result-input { 
    font-size: 3rem;
    padding: 5px 15px; 
    color: #21a6b0;
}

#my-cal-light .calculation-items{
    border-radius: 35px; 
    padding-bottom: 25px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

#my-cal-light .row-calculate {
    display: flex;
}

#my-cal-light .cal-item {
    width: 60px;
    height: 60px; 
    margin: 8px; 
    border-radius: 10px;
    background: #F5F5F5;
    box-shadow: 6px 6px 12px #d7d7d7. -6px -6px 12px #ffffff;
}

#my-cal-light .eval-item {
    width: 140px; 
    background: #FF1D58;
}

#my-cal-light .cal-item input {
    width: 100%; 
    height: 100%;
    border: 0; 
    background-color: transparent; 
    cursor: pointer;
    font-size: 25px; 
    color: #000000;
}

#my-cal-light .eval-item input {
color: #fff;
}

#my-cal-light .math-item input { 
    font-size: 30px; 
}

#my-cal-light .green-input { 
    background-color: #51d0de;
}

#my-cal-light .green-input input {
    color: #000000;
}

JavaScript

JavaScript Function to build Calculator 
How we are going to make our calculator working
This section will include the display, solve and clear functions.

  1. Display Function: This function only displays the user input, followed by results. We just an id which can be called by “document.getElementById”. Here, the id is “displayNum”.                                                                                              
  2. Solve Function: The evalCalculateItem() function performs a calculation to be used as the property value.                                          
  3. Clear Function: We just need a void in between the quotes to perform this function.  
  4. Delete Function: We can remove the  wrong number one by one at the back end.


Main.js

<script type="text/javascript">

function addCalculateItem(value) 
{ 
	document.getElementById('displayNum').value += value;

}

function evalCalculateItem() 
{
	var displayn = document.getElementById('displayNum').value; 

	if (displayn != '') 
	{
	    document.getElementById('displayResult').value = eval(document.getElementById('displayNum').value);
        }
	
	if (displayn != '') 
	{
	    document.getElementById('').placeholder = document.getElementById('displayResult').value;
	}
	    document.getElementById('displayNum').value = '';
}

function reset_calculate() 
{
	document.getElementById('displayNum').placeholder = 0;
	document.getElementById('displayNum').value = '';
	document.getElementById('displayResult').value = '';
}

function clearineitem() 
{
	var dnvalue = document.getElementById('displayNum').value; 
	var dnrep = dnvalue.slice(0, -1);
	
	document.getElementById('displayNum').value = dnrep;
}
</script>


OUTPUT SCREEN:
This will be our output screen, where all text will be shown. Like the input that the user will type and the answer calculated from the user input.

        At First :

        After Entering Some Data :

        And Finally Result Will Be Like :
       Note:
  1. After performing the operations, click on the '=' (equal) button to the Display result.                                                                                                                     
  2. If we want to remove the completely visible number, press the C (Clear) button from the Calculator.                                                                                                                     
  3. Furthermore, we can remove the  wrong number one by one at the back end by clicking on the (X) button.
 
With this, we have come to the end of our article. I hope you understood the easiest way to build a JavaScript calculator.

We hope you enjoy our blog as much as We enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.



































Comments











Post a Comment























Popular posts from this blog









tw4






-















*-------------------TW4-----------------------------* CREATE TABLE STUDENT( 	USN VARCHAR (10) PRIMARY KEY, 	SNAME VARCHAR(25), 	ADDRESS VARCHAR(25), 	PHONE BIGINT(10), 	GENDER CHAR(1));  CREATE TABLE SEMSEC( 	SSID VARCHAR(5) PRIMARY KEY, 	SEM INT (5), 	SEC CHAR (1));  CREATE TABLE CLASS( 	USN VARCHAR (10), 	SSID VARCHAR (5), 	PRIMARY KEY(USN, SSID), 	FOREIGN KEY(USN) REFERENCES STUDENT(USN), 	FOREIGN KEY(SSID) REFERENCES SEMSEC(SSID));  CREATE TABLE SUBJECT( 	SUBCODE VARCHAR(10) PRIMARY KEY, 	TITLE VARCHAR(5), 	SEM INT, 	CREDITS INT);  CREATE TABLE IAMARKS ( 	USN VARCHAR(10), 	SUBCODE VARCHAR(6), 	SSID VARCHAR(5), 	TEST1 INT(2), 	TEST2 INT(2), 	TEST3 INT(2), 	FINALIA INT(3), 	PRIMARY KEY(USN, SUBCODE, SSID), 	FOREIGN KEY(USN) REFERENCES STUDENT(USN), 	FOREIGN KEY(SUBCODE) REFERENCES SUBJECT(SUBCODE),  	FOREIGN KEY(SSID) REFERENCES SEMSEC(SSID));  INSERT INTO STUDENT VALUES('2KL20CS400','ADINATH','BELAGAVI',9821456230,'M'); INSERT INTO STUDENT VALUES(...








Read more