Calculator using HTML, CSS and Javascript. Good looking example of Calculator

Calculator using HTML, CSS and Javascript. Good looking example of Calculator

Avatar

 BY TEJAS




For making this Calculator Example, we use HTML5, CSS3, and Javascript. It is very easy to make this Calculator example we use very simple tags and attributes in this example.

This calculator is a very clean and very good looking example. Use HTML codes gives layout to the Calculator like adding buttons, text-areas. Use CSS codes gives colours, shapes, for buttons and textarea and use fonts in it. And use Javascript (js) for performing Addition, Multiplication, Subtraction, and Division.



Also Check:-
  • Pie chart & Column chart example made with using "Canvas JS"
  • Fully Working Fan Using Buttons in CSS
  • See the TyppingEffect Example



  • When you search on google for HTML calculators, you will find tough examples. You can use this Example in your site, and also you can learn advance examples using this calculator example.


    In below video shows working of the calculator


    below here is a HTML & CSS codes.




    Note :-

    You can give any name for html file but there is a css is linked in html with name style.css so before changing css file name you have to clear that. when you change your css name you must have to change name from html file


    index.html :-
        
          
          <!doctype html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>JavaSctipt Calculator - ProgramTuts</title>
            <link rel="stylesheet" href="style.css">
          </head>
          
          <body>
            <script>
            function calcNumbers(result){
              form.displayResult.value=form.displayResult.value+result;
              
            }
            </script>
            <div class="container">
              <form name="form">
              <div class="display">
                <input type="text" placeholder="0" name="displayResult" />
              </div>
                <div class="buttons">
                  <div class="row">
                  <input type="button" name="b7" value="7" onClick="calcNumbers(b7.value)">
                    <input type="button" name="b8" value="8" onClick="calcNumbers(b8.value)">
                    <input type="button" name="b9" value="9" onClick="calcNumbers(b9.value)">
                    <input type="button" name="addb" value="+" onClick="calcNumbers(addb.value)">
                  </div>
                  
                  <div class="row">
                  <input type="button" name="b4" value="4" onClick="calcNumbers(b4.value)">
                    <input type="button" name="b5" value="5" onClick="calcNumbers(b5.value)">
                    <input type="button" name="b6" value="6" onClick="calcNumbers(b6.value)">
                    <input type="button" name="subb" value="-" onClick="calcNumbers(subb.value)">
                  </div>
                  
                  <div class="row">
                  <input type="button" name="b1" value="1" onClick="calcNumbers(b1.value)">
                    <input type="button" name="b2" value="2" onClick="calcNumbers(b2.value)">
                    <input type="button" name="b3" value="3" onClick="calcNumbers(b3.value)">
                    <input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)">
                  </div>
                  
                  <div class="row">
                  <input type="button" name="b0" value="0" onClick="calcNumbers(b0.value)">
                    <input type="button" name="potb" value="." onClick="calcNumbers(potb.value)">
                    <input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)">
                    <input type="button" class="red" value="=" onClick="displayResult.value=eval(displayResult.value)">
                  </div>
                </div>
              
              </form>
            </div>
          </body>
            
          </html>
        
        
    


    style.css :-
        
         
          
    body, html {
    	background: gray;
    	margin: 0;
    	padding: 0;
    }
    
    .container {
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	background: #fff;
    	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
    	border-radius: 14px;
    	padding-bottom: 20px;
    	width: 320px;
    	
    }
    .display {
    	width: 100%;
    	height: 60px;
    	padding: 40px 0;
    	background: greenyellow;
    	border-top-left-radius: 14px;
    	border-top-right-radius: 14px;
    }
    .buttons {
    	padding: 20px 20px 0 20px;
    }
    .row {
    	width: 280px;
    	float: left;
    }
    input[type=button] {
    	width: 60px;
    	height: 60px;
    	float: left;
    	padding: 0;
    	margin: 5px;
    	box-sizing: border-box;
    	background: #ecedef;
    	border: none;
    	font-size: 30px;
    	line-height: 30px;
    	border-radius: none;
    	font-weight: 700;
    	color: #5E5858;
    	cursor: pointer;
    	
    }
    input[type=text] {
    	width: 270px;
    	height: 60px;
    	float: left;
    	padding: 0;
    	box-sizing: border-box;
    	border: none;
    	background: none;
    	color: #ffffff;
    	text-align: right;
    	font-weight: 700;
    	font-size: 60px;
    	line-height: 60px;
    	margin: 0 25px;
    	
    }
    .red {
    	background: greenyellow !important;
    	color: #ffffff !important;
    	
    }
    
    
        
      
        
          <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaSctipt Calculator | ProgramTuts</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    	<script>
    	function calcNumbers(result){
    		form.displayResult.value=form.displayResult.value+result;
    		
    	}
    	</script>
    	<div class="container">
    		<form name="form">
    		<div class="display">
    			<input type="text" placeholder="0" name="displayResult" />
    		</div>
    			<div class="buttons">
    			  <div class="row">
    				<input type="button" name="b7" value="7" onClick="calcNumbers(b7.value)">
    				  <input type="button" name="b8" value="8" onClick="calcNumbers(b8.value)">
    				  <input type="button" name="b9" value="9" onClick="calcNumbers(b9.value)">
    				  <input type="button" name="addb" value="+" onClick="calcNumbers(addb.value)">
    				</div>
    				
    				<div class="row">
    				<input type="button" name="b4" value="4" onClick="calcNumbers(b4.value)">
    				  <input type="button" name="b5" value="5" onClick="calcNumbers(b5.value)">
    				  <input type="button" name="b6" value="6" onClick="calcNumbers(b6.value)">
    				  <input type="button" name="subb" value="-" onClick="calcNumbers(subb.value)">
    				</div>
    				
    				<div class="row">
    				<input type="button" name="b1" value="1" onClick="calcNumbers(b1.value)">
    				  <input type="button" name="b2" value="2" onClick="calcNumbers(b2.value)">
    				  <input type="button" name="b3" value="3" onClick="calcNumbers(b3.value)">
    				  <input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)">
    				</div>
    				
    				<div class="row">
    				<input type="button" name="b0" value="0" onClick="calcNumbers(b0.value)">
    				  <input type="button" name="potb" value="." onClick="calcNumbers(potb.value)">
    				  <input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)">
    				  <input type="button" class="red" value="=" onClick="displayResult.value=eval(displayResult.value)">
    				</div>
    			</div>
    		
    		</form>
    	</div>
    </body>
    	
    </html>
        
    


    style.css :-
        
         
        
    body, html {
    	background: gray;
    	margin: 0;
    	padding: 0;
    }
    
    .container {
    	position: fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    	background: #fff;
    	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
    	border-radius: 14px;
    	padding-bottom: 20px;
    	width: 320px;
    	
    }
    .display {
    	width: 100%;
    	height: 60px;
    	padding: 40px 0;
    	background: greenyellow;
    	border-top-left-radius: 14px;
    	border-top-right-radius: 14px;
    }
    .buttons {
    	padding: 20px 20px 0 20px;
    }
    .row {
    	width: 280px;
    	float: left;
    }
    input[type=button] {
    	width: 60px;
    	height: 60px;
    	float: left;
    	padding: 0;
    	margin: 5px;
    	box-sizing: border-box;
    	background: #ecedef;
    	border: none;
    	font-size: 30px;
    	line-height: 30px;
    	border-radius: none;
    	font-weight: 700;
    	color: #5E5858;
    	cursor: pointer;
    	
    }
    input[type=text] {
    	width: 270px;
    	height: 60px;
    	float: left;
    	padding: 0;
    	box-sizing: border-box;
    	border: none;
    	background: none;
    	color: #ffffff;
    	text-align: right;
    	font-weight: 700;
    	font-size: 60px;
    	line-height: 60px;
    	margin: 0 25px;
    	
    }
    .red {
    	background: greenyellow !important;
    	color: #ffffff !important;
    	
    }
          
      
    Search
    Advertisement
    Share With
    Follow us on
    Advertisement
    Advertisement