Simple Calculator using Javascript

Hello to those of you who are new, and welcome back to those who came back to this blog. Today, I share another simple yet interesting snippet about how to create a basic calculator using HTML, CSS, and JavaScript. Previously I have shared a blog about animated background using only HTML and CSS. Check that snippet out if you haven't. I hope you like it. In this project, I will design a straightforward interface for the calculator with HTML, CSS, and some necessary JavaScript codes.

JavaScript is one of the most powerful programming languages in web development with a lot of functionality. With this scripting language, we can do many things from image animation to content updates and so on.

From the image above, I guess you will know what it will look like in the end. It's a simple-looking one, and it is helpful for beginners who are newly learning about JavaScript and want to make a simple of their own.

So it will be a basic calculator where you will have two inputs. Underneath those two inputs, you will have four different options: a radio button for addition, subtraction, multiplication, and division. Finally, below the radio buttons, you will have a control calculated based on the options you have selected above. There is another element as an h1 tag, which is primarily invisible. Still, whenever you click on the calculate button, the h1 title as a form result will appear underneath the calculate button. I will highly recommend you follow the below tutorial from start to finish to get what I am trying to achieve here for this snippet.

Video Tutorial:

I hope you have watched the video and understand the necessary coding behind this project. I am also providing the below so that you can play around with it according to your needs. You can add more codes to make this project look even better than this.

Let's a few words about the structure of this project. I have created a div element named 'wrapper' and provided a simple h2 tag at the top. Then I took two input text elements with different names and ids. After that, I took four other input radio elements with four values add, subtract, multiply, and divide. Later a button with on-click events in it. I then took an h1 tag with the name 'resultarea,' which will display the result after calculation. After the CSS markup, I did some basic CSS styling to make the calculator in the middle of the viewport and other styling like fonts, margin padding, etc. Then I used JavaScript for all the clickable events of the project.

It is impossible to explain everything here, so I am providing you the source of this project. Feel free to grab the code and use your creativity to make it even better.

Simple calculator using JavaScript (Source Code):

To do this project, you need to create two files, one HTML File and the other one is CSS File. You can create a separate js file, but here I have included it underneath the HTML file. After that, copy the code, save and run that in your browser.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Calculator using Javascript</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<h2>Simple Calculator</h2><input id="num-one" name="num-one" type="text"> <input id="num-two" name="num-two" type="text"><br>
		<br>
		<input checked id="box1" name="sign-area" type="radio" value="add"><b>+</b> <input id="box2" name="sign-area" type="radio" value="subtract"><b>-</b> <input id="box3" name="sign-area" type="radio" value="multiply"><b>*</b> <input id="box4" name="sign-area" type="radio" value="divide"><b>/</b><br>
		<br>
		<button onclick="outcome()" type="button">calculate</button>
		<h1 id="resultArea"></h1>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script> 
	<script>
	       function outcome() { 
	           var x = Number(document.getElementById("num-one").value);
	           var y = Number(document.getElementById("num-two").value);
	           var z = 0;
	           
	           if (document.getElementById("box1").checked){
	               z = x + y;
	           }
	           else if (document.getElementById("box2").checked){ 
	               z = x - y;
	           }
	           else if (document.getElementById("box3").checked){
	               z = x * y;
	           }
	           else{
	               z = x / y;
	           }
	           document.getElementById("resultArea").innerHTML = " Result : "+ String(z);    
	       } 
	</script>
</body>
</html>

CSS:

body {
	background: #EE4477;
}
.wrapper {
	width: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #262626;
	padding: 50px;
	color: #fff;
	text-align: center;
}
.wrapper h2 {
	text-transform: uppercase;
	font-family: poppins;
	margin-bottom: 10%;
}
input[type="text"] {
	height: 40px;
}
input[type="text"] {
	font-size: 24px;
}
button {
	background: #EE4477;
	border: none;
	color: #fff;
	display: inline-block;
	padding: 10px 25px;
	font-size: 18px;
	text-transform: uppercase;
	font-family: poppins;
	letter-spacing: 2px;
	font-weight: bold;
}
input[type="radio"] {
	width: 20px;
	height: 20px;
}
b {
	font-size: 30px;
}

I hope you like it. Keep following this blog for more exciting projects soon, and thank you for your visit.

Video Tutorial:

Post a Comment

Post a Comment

About Us

Contact Form

Simple Calculator using Javascript

Video Tutorial:

You might like

Post a Comment

Post a Comment

Contact Form