Simple Calculator

Developer
Zoite
Size
4,435 Kb
Views
10,120
  1. Simple Calculator Previews
  2. Simple Calculator HTML Codes
  3. Simple Calculator CSS Codes
  4. Simple Calculator JS Codes

How do I make an simple calculator?

Just a simple calculator, not much to describe.. What is a simple calculator? How do you make a simple calculator? This script and codes were developed by Zoite on 29 November 2022, Tuesday.

Simple Calculator Previews
IQ Test

Simple Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Calculator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="calculator"> <p id="title">FreeCodeCamp</p> <p id="tagline">electronic calculator</p> <input type="text" disabled="disabled" id="answer"/> <div class="row"> <button class="ctrl">AC</button> <button class="ctrl">CE</button> <button>%</button> <button>÷</button> </div> <div class="row"> <button>7</button> <button>8</button> <button>9</button> <button>x</button> </div> <div class="row"> <button>4</button> <button>5</button> <button>6</button> <button>-</button> </div> <div class="row"> <button>1</button> <button>2</button> <button>3</button> <button class="tall">+</button> </div> <div class="row"> <button>0</button> <button>.</button> <button>=</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Calculator - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Pacifico|Open+Sans|Montserrat);
body, html { width: 100%; background-color: #9B8F89;
}
.calculator { width: 250px; height: 335px; background-color: #F3EEE7; margin: 0 auto; border-top-left-radius: 80% 20px; border-top-right-radius: 80% 20px; border-bottom-left-radius: 80% 20px; border-bottom-right-radius: 80% 20px; box-shadow: inset 5px 0 10px -5px #635e61, inset -5px 0 10px -5px #635e61, inset 0px -5px 10px -2px #635e61, 0 0 1px 2px #635e61, 0 10px 20px 0 #494547; text-align: center;
}
.calculator p#title { padding-top: 10px; margin-bottom: -10px; color: #7d777b; font-family: 'Pacifico';
}
.calculator p#tagline { text-transform: uppercase; color: #969194; font-family: 'Open Sans'; font-size: .7em;
}
.calculator input[type='text'] { background-color: #C7C7B0; border: 1px solid #b2b292; line-height: 40px; width: 80%; font-size: 2em; direction: rtl; font-family: 'Montserrat'; padding-right: 10px; margin-bottom: 20px; border-radius: 5px; box-shadow: inset 0px -2px 10px #b2b292;
}
.calculator input[type='text']:focus { outline: none;
}
.calculator .row { display: block;
}
.calculator .row button { width: 40px; height: 30px; border: 1px solid #4B4657; border-top: 2px solid #7c748f; background-image: -webkit-linear-gradient( top , #4B4657, #332f3b); background-image: linear-gradient(to bottom, #4B4657, #332f3b); color: white; font-size: 1.1em; border-radius: 20%; border-top-left-radius: 80% 10px; border-top-right-radius: 80% 10px; border-bottom-left-radius: 100% 10px; border-bottom-right-radius: 100% 10px; margin-left: 5px; margin-right: 5px; margin-bottom: 8px; box-shadow: inset 0 1px 4px #7c748f, inset 0 -4px 20px #332f3b, 0 3px 1px 0 #332f3b;
}
.calculator .row button:focus { outline: 0;
}
.calculator .row button:active { background-image: -webkit-linear-gradient( bottom , #4B4657, #332f3b); background-image: linear-gradient(to top, #4B4657, #332f3b);
}
.calculator .row .ctrl { border: 1px solid #CC4E5F; border-top: 2px solid #e39da7; background-image: -webkit-linear-gradient( top , #CC4E5F, #b33445); background-image: linear-gradient(to bottom, #CC4E5F, #b33445); box-shadow: inset 0 1px 4px #e39da7, inset 0 -4px 20px #b33445;
}
.calculator .row .ctrl:active { background-image: -webkit-linear-gradient( bottom , #CC4E5F, #b33445); background-image: linear-gradient(to top, #CC4E5F, #b33445);
}
.calculator .row .tall { height: 65px; float: right; margin-right: 24px; margin-left: -8px;
}

Simple Calculator - Script Codes JS Codes

var entries = [];
var total = 0;
var temp = '';
$("button").on('click', function() {	var val = $(this).text(); // Got a number, add to temp if (!isNaN(val) || val === '.') { temp += val; $("#answer").val(temp.substring(0,10)); // Got some symbol other than equals, add temp to our entries // then add our current symbol and clear temp } else if (val === 'AC') { entries = []; temp = ''; total = 0; $("#answer").val('') // Clear last entry } else if (val === 'CE') { temp = ''; $("#answer").val('') // Change multiply symbol to work with eval } else if (val === 'x') { entries.push(temp); entries.push('*'); temp = ''; // Change divide symbol to work with eval } else if (val === '÷') { entries.push(temp); entries.push('/'); temp = ''; // Got the equals sign, perform calculation } else if (val === '=') {	entries.push(temp); var nt = Number(entries[0]); for (var i = 1; i < entries.length; i++) { var nextNum = Number(entries[i+1]) var symbol = entries[i]; if (symbol === '+') { nt += nextNum; } else if (symbol === '-') { nt -= nextNum; } else if (symbol === '*') { nt *= nextNum; } else if (symbol === '/') { nt /= nextNum; } i++; } // Swap the '-' symbol so text input handles it correctly if (nt < 0) { nt = Math.abs(nt) + '-'; } $("#answer").val(nt);	entries = []; temp = ''; // Push number } else { entries.push(temp); entries.push(val); temp = ''; }
});
Simple Calculator - Script Codes
Simple Calculator - Script Codes
Home Page Home
Developer Zoite
Username zoite
Uploaded November 29, 2022
Rating 4.5
Size 4,435 Kb
Views 10,120
Do you need developer help for Simple Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zoite (zoite) Script Codes
Name
FreeCodeCamp News
Glitch Text
A Pen by zoite
Tic-Tac-Toe
Audio Player With Visualizer
File Dropper
Pomodoro Timer
Leaderboard
Step Bar
Twitter Card
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!