Make Simple Calculator using HTML, JS and CSS

Make Simple Calculator using HTML, JS and CSS

Spread The Love

HTML and Javascript are very vast languages, beginners always start learning Programming from these languages. In this article, we'll be discussing how to create a simple Calculator using HTML, Javascript, and CSS with Live Demo. The calculator will only able to perform basic Arithmetic Operations: Addition, Subtraction, Multiplication, and Division.

HTML Code

<html>

<head>

<title>Plugins Reviews Calculator</title>

</head>

<body>

<p>Simple Calculator</p>

<div id='plugins-reviews-calculator'>

<form name="calculator">

<input type="text" name="answer" />

<input type='button' value=" 1 " onclick="calculator.answer.value += '1'" />

<input type='button' value=" 2 " onclick="calculator.answer.value += '2'" />

<input type='button' value=" 3 " onclick="calculator.answer.value += '3'" />

<input type='button' value=" + " onclick="calculator.answer.value += '+'" />

<input type='button' value=" 4 " onclick="calculator.answer.value += '4'" />
<input type='button' value=" 5 " onclick="calculator.answer.value += '5'" />
<input type='button' value=" 6 " onclick="calculator.answer.value += '6'" />
<input type='button' value=" - " onclick="calculator.answer.value += '-'" />

<input type='button' value=" 7 " onclick="calculator.answer.value += '7'" />
<input type='button' value=" 8 " onclick="calculator.answer.value += '8'" />
<input type='button' value=" 9 " onclick="calculator.answer.value += '9'" />
<input type='button' value=" x " onclick="calculator.answer.value += '*'" />

<input type='button' value=" C " onclick="calculator.answer.value = ''" />
<input type='button' value=" 0 " onclick="calculator.answer.value += '0'" />
<input type='button' value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)" />
<input type='button' value=" / " onclick="calculator.answer.value += '/'" />
</form>
</div>
</body>
</html>

CSS Code

<style>
#plugins-reviews-calculator
{
 position: relative;
 width: 400px;
 border: 2px solid black;
 border-radius: 12px;
 margin: 0px auto;
 padding: 30px 30px 25px 20px;
 background-color: #dfdfe6;
 margin-top: 7%;
 box-shadow: 3px 4px 5px #606060;
}
p
{
 font-size: 44px;
 font-weight: 600;
 color: #f25454;
 text-align: center;
 text-shadow: 3px 3px 2px #b2f7ef;
}
#pl-re-cal
{
 position: relative;
 float: right;
 margin-top: 15px;
}
input[type=button]
{
 background: #a19595;
 width: 20%;
 font-size: 20px;
 font-weight: 700;
 border-radius: 6px;
 margin-left: 13px;
 margin-top: 10px;
}
input[type=button]:active
{
 background-color: #3e8e41;
}
input[type=button]:hover
{
 background-color: #606060;
 color: #fff;
 cursor: pointer;
}
input[type = text]
{
 position: relative;
 display: block;
 width: 90%;
 margin: 5px auto;
 font-size: 20px;
 padding: 10px;
 box-shadow: 4px 0px 5px black;
}
</style>

Guys, I hope You liked my article And if you like this, don’t forget to share it with your friends! ? and  Like my Facebook Page for WordPress Tutorials and Latest Updates. You can also join my Newsletter for latest WordPress Tutorials.

  • 21
    Shares

Himani Bhardwaj

I Himani Bhardwaj founder of Plugins Reviews and also a Professional Developer. I'm a Passionate self-made Girl and plays an active role in the activities of WordPress Plugin Reviews I have also attended Chandigarh WordPress Meetup Sessions. I run an online website geared to help those who wants to Know about WordPress Topmost Plugins, Themes and also who wants to learn about PHP Concepts

Leave a Reply

Close Menu