How To Make A Calculator (calc) In Just Three Steps Using HTML, CSS And JAVASCRIPT ?


 Step:-1 

HTML Code:-

        	<meta charset="utf-8" />
<div class="Calculator">
<div class="container">
<h1 style="color: #fff;"><img src="images/logo1.png" width="70px;"> Calculator</h1>
<input type="text" name="screen" id="screen" style="padding: 5px;" placeholder="Enter a number">
		<table>
	<tr>
	<td><button>(</button></td>
	<td><button>)</button></td>
	<td><button>C</button></td>
	<td><button>+</button></td>
	</tr>
	<tr>
	<td><button>7</button></td>
	<td><button>8</button></td>
	<td><button>9</button></td>
	<td><button>-</button></td>
	</tr>
	<tr>
	<td><button>4</button></td>
	<td><button>5</button></td>
	<td><button>6</button></td>
	<td><button>*</button></td>
	</tr>
	<tr>
	<td><button>1</button></td>
	<td><button>2</button></td>
	<td><button>3</button></td>
	<td><button>/</button></td>
	</tr>
	<tr>
	<td><button>.</button></td>
	<td><button>0</button></td>
	<td><button>=</button></td>
	<td><button>%</button></td>
	</tr>
	</table>
	</div>
</div>
          
        






Step:-2

CSS Code:-



          body{
	background-image: url('images/wa-5.jpg');
}
.container{
	text-align: center;
	margin-top:15px;
}
.Calculator{
	display: inline-block;
	background-color:#1a1a1a;
	padding: 20px;
	border:2px solid #cc0066;
	margin:20px 0 0 400px;
	border-radius: 50px;
}
table{
	margin: auto;;
}
input{
	border:5px solid #cc0066;
	border-radius: 50px;
	font-size: 30px;
	margin-bottom: 30px;
	/*	background-color: transparent;*/
}
button{
	border-radius: 50px;
	font-size: 30px;
	background-color:#cc0066;
	color: #fff;
	width: 90px;
	height: 50px;
	padding: 10px;
	margin: 5px;
}
	
    







Step:-3

JAVASCRIPT Code:-



	let screen = document.getElementById('screen');
 buttons = document.querySelectorAll('button');
 let displayvalue = '';

 for(item of buttons){
 	item.addEventListener('click', (e) => {
 		buttonText = e.target.innerText;
 		console.log('buttons' ,buttonText); 

 		if (buttonText == '') {
 			 
 			displayvalue += buttonText;
 			screen.value = displayvalue;
 		}
 		else if(buttonText == 'C'){
 			displayvalue = "";
 			screen.value = displayvalue;
 		}
 		else if(buttonText == '='){
 			screen.value = eval(displayvalue);
 		}
 		else{
 			displayvalue += buttonText;
 			screen.value = displayvalue;
 		}
 	})
 }


          
      




Full Code:-



         

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>Calculator</title>
              
                            <!--css-->

              
	<style type="text/css">
		body{
	background-image: url('images/wa-5.jpg');
}
.container{
	text-align: center;
	margin-top:15px;
}
.Calculator{
	display: inline-block;
	background-color:#1a1a1a;
	padding: 20px;
	border:2px solid #cc0066;
	margin:20px 0 0 400px;
	border-radius: 50px;
}
table{
	margin: auto;;
}
input{
	border:5px solid #cc0066;
	border-radius: 50px;
	font-size: 30px;
	margin-bottom: 30px;
	/*	background-color: transparent;*/
}
button{
	border-radius: 50px;
	font-size: 30px;
	background-color:#cc0066;
	color: #fff;
	width: 90px;
	height: 50px;
	padding: 10px;
	margin: 5px;
}
	</style>

                            <!--html-->

              
	<div class="Calculator">
	<div class="container">
		<h1 style="color: #fff;"><img src="images/logo1.png" width="70px;"> Calculator</h1>
		<input type="text" name="screen" id="screen" style="padding: 5px;" placeholder="Enter a number">
		<table>
			<tr>
				<td><button>(</button></td>
				<td><button>)</button></td>
				<td><button>C</button></td>
				<td><button>+</button></td>
			</tr>
			<tr>
				<td><button>7</button></td>
				<td><button>8</button></td>
				<td><button>9</button></td>
				<td><button>-</button></td>
			</tr>
			<tr>
				<td><button>4</button></td>
				<td><button>5</button></td>
				<td><button>6</button></td>
				<td><button>*</button></td>
			</tr>
			<tr>
				<td><button>1</button></td>
				<td><button>2</button></td>
				<td><button>3</button></td>
				<td><button>/</button></td>
			</tr>
			<tr>
				<td><button>.</button></td>
				<td><button>0</button></td>
				<td><button>=</button></td>
				<td><button>%</button></td>
			</tr>
		</table>
	</div>
</div>
              <!--javascript-->
<script type="text/javascript">
	let screen = document.getElementById('screen');
 buttons = document.querySelectorAll('button');
 let displayvalue = '';

 for(item of buttons){
 	item.addEventListener('click', (e) => {
 		buttonText = e.target.innerText;
 		console.log('buttons' ,buttonText); 

 		if (buttonText == '') {
 			 
 			displayvalue += buttonText;
 			screen.value = displayvalue;
 		}
 		else if(buttonText == 'C'){
 			displayvalue = "";
 			screen.value = displayvalue;
 		}
 		else if(buttonText == '='){
 			screen.value = eval(displayvalue);
 		}
 		else{
 			displayvalue += buttonText;
 			screen.value = displayvalue;
 		}
 	})
 }

</script>
          
          



OUTPUT:-