How To Create A Calculator With Javascript, HTML And CSS

Oyetoke Toby
8y
41.9k
0
6

Blog

Calculator is one of the basic project a Javascript or any other language a newbie programmer should probably know how to create. It is a basic project because it entails arithmetic operations. All you have to do is to create a button for each numbers, arithmetic operations. symbols and then add a screen that serves as a screen or lcd.

Method

Each buttons created has their own event handlers and functions. Whenever a number button is clicked, it prints the number indicated on the button into the textbox which is the screen. Then when an arithmetic operation is clicked after a value has been entered, it stores the value in the textbox to be the first-number and reset the value in the textbox to zero. After entering the second number you'll be calculating together with the first number and clicking the equals-to button, the equals to button will store the value in the textbox as the second number and then it will check the arithmetic you clicked. Once it checked arithmetic operation you click, it will add or subtracts or multiply or divide the first-number and second-number depending on the arithmetic operation you clicked and then prints the result back to the textbox.

<!Doctype html>
<html>
<head>
<title>Javascript Calculator</title>
<style>
body {
background-color:#fff;
margin: 0px auto;
}
.calbody{
background: #097C9B;
border: 1px solid #ff0;
padding: 10px;
margin-left: 450px;
min-width: 27.4em;
max-width: 27.4em;
}
h1{
text-align: center;
font-size: 40px;
color: #003652;
}
#lcd{
text-align: right;
width: 23em;
height: 40px;
font-size: 18px;
}
#lcdu{
color: grey;
text-align: right;
width: 27.6em;
height: 35px;
font-size: 15px;
}
button{
background-color: #fff;
width: 80px;
height: 60px;
font-size: 20px;
border: 1px solid #097C9B;
}
button:hover{
background-color: #509CA9;
}
</style>
</head>
<body>
<h1>
Javascript Calculator</h1>
<div class="calbody">
<form name="lcdform">
<input id="lcdu" name="lcdsu" type="text" value="" />
<input id="lcd" name="lcds" type="text" value="0" />
</form>
<div id="calbutton">
<button id="num1" onclick="numone();">1</button>
<button id="num2" onclick="numtwo();">2</button>
<button id="num3" onclick="numthree();">3</button>
<button id="operationplus" onclick="operationplus();">+</button>
<button id="operationraistop" onclick="operationraistop();">^</button>
<button id="num4" onclick="numfour();">4</button>
<button id="num5" onclick="numfive();">5</button>
<button id="num6" onclick="numsix();">6</button>
<button id="operationmult" onclick="operationmult();">*</button>
<button id="operationsqrt" onclick="sqrots();">Sqrt()</button>
<button id="num7" onclick="numseven();">7</button>
<button id="num8" onclick="numeight();">8</button>
<button id="num9" onclick="numnine();">9</button>
<button id="operationminus" onclick="operationminus();">-</button>
<button id="clr" onclick="clr();">C</button>
<button id="operationperc" onclick="operationperc();">%</button>
<button id="num0" onclick="numzero();">0</button>
<button id="num00" onclick="numdobuzero();">00</button>
<button id="operationdivid" onclick="operationdivid();">/</button>
<button id="sumbit" onclick="equalsto();">=</button>
</div>
</div>
<script>
var firstnumber;
var secondnumber;
var result;
var operations;
function numone(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "1";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";
}
}
function numtwo(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "2";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";
}
}
function numthree(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "3";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";
}
}
function numfour(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "4";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";
}
}
function numfive(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "5";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";
}
}
function numsix(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "6";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";
}
}
function numseven(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "7";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";
}
}
function numeight(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "8";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "8";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";
}
}
function numnine(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "9";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";
}
}
function numzero(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "0";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "0";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";
}
}
function numdobuzero(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
return;
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";
}
}
function clr(){
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = "";
return;
}
function operationplus(){
operation = "+";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
//alert(firstnumber);
}
function operationmult(){
operation = "*";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationminus(){
operation = "-";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationdivid(){
operation = "/";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationperc(){
operation = "%";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function equalsto(){
secondnumber = parseInt(document.lcdform.lcds.value);
if (operation == "+")
{
result = firstnumber + secondnumber;
}
else if (operation == "*"){
result = firstnumber * secondnumber;
}
else if (operation == "-"){
result = firstnumber - secondnumber;
}
else if (operation == "/"){
result = firstnumber / secondnumber;
}
else if (operation == "%"){
if (document.lcdform.lcds.value == "0"){
result = firstnumber / 100;
document.lcdform.lcdsu.value = firstnumber + operation + "100";
}
else if (document.lcdform.lcds.value != "0") {
result = firstnumber / secondnumber * 100;
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;
}
}
else if (operation == "^"){
for (var i = 0; i < secondnumber; i++){
result = firstnumber * i;
}
}
document.lcdform.lcds.value ="";
document.lcdform.lcds.value = result.toString();
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();
return;
}
function sqrots(){
firstnumber = document.lcdform.lcds.value;
result = Math.sqrt(parseInt(document.lcdform.lcds.value));
document.lcdform.lcds.value = result;
document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;
}
function operationraistop(){
operation = "^";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
}
</script>
</body>
</html>

Results: