<html>
<title>JavaScript Calculator</title>
<body>
<div id="title" class="text-center">
<h1>Javascript Calculator</h1>
</div>
<div id="calculator">
<div id="total"></div>
<div id="side">
<div id="operators">
<a>/</a>
<a>*</a>
<a>-</a>
<a>+</a>
</div>
</div>
<div id="clearanderasebuttons">
<a id="clear">C</a>
<a id="clearLastEntry">CE</a>
</div>
<div id="numbers">
<a>7</a>
<a>8</a>
<a>9</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>1</a>
<a>2</a>
<a>3</a>
<a>0</a>
<a>.</a>
</div>
<div id="equalsign">
<a id="equals">=</a>
</div>
</div>
<footer>
<div class="social text-center center-block">
<ul>
<li><a href="https://www.facebook.com/harunpehlivan" target="_blank"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="https://instagram.com/harunpehlivantr" target="_blank"><i class="fa fa-lg fa-instagram"></i></a></li>
<li><a href="https://wa.me/905527410904" target="_blank"><i class="fa fa-lg fa-whatsapp"></i></a></li>
<li><a href="https://twitter.com/harunpehlivan" target="_blank"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="https://github.com/harunpehlivan" target="_blank"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/harunpehlivan" target="_blank"><i class="fa fa-lg fa-linkedin"></i></a></li>
<li>
<a href="https://www.freecodecamp.com/harunpehlivan" target="_blank" title="See my Free Code Camp profile!">
<i class="fa fa-fire fa-lg"></i></li>
</a>
</ul>
</div>
<p>Created and Coded by HARUN PEHLİVAN 2024 -2025</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background-color: #2c1538;
background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
}
#title {
text-align: center;
background-color:black;
color: white;
border: 5px solid white;
margin-bottom: 10px;
margin-right:7px;
margin-left: 7px;
font-family: 'Russo One', sans-serif;
padding-bottom: 10px;
border-style:outset;
-webkit-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
box-shadow: 1px 0px 11px 6px rgba(0, 0, 0, 0.75);
}
#calculator {
width: 310px;
height: 415px;
margin: 60px auto;
padding: 5px;
background-color: #FFE4E1;
border: solid black 3px;
border-radius: 20px;
box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
}
#total {
height: 70px;
width: 250px;
margin-left: 25px;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
background-color: gray;
text-align: right;
font-size: 30px;
font-family: 'Orbitron', sans-serif;
border: solid black;
border-radius: 3px;
overflow: hidden;
}
#side {
width: 49px;
float: right;
}
#side a {
margin: 5px;
display: block;
width: 46px;
height: 50px;
float: right;
padding: 0px;
margin: 5px 10px;
text-align: center;
text-decoration: none;
color: black;
font-size: 39px;
background-color: #F5F5F5;
border-radius: 20px;
-webkit-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
}
#numbers {
margin: 0px;
}
a {
cursor: pointer;
}
#clearanderasebuttons a {
display: block;
width: 90px;
height: 50px;
float: left;
padding-top: 7px;
margin: 5px 10px;
text-align: center;
text-decoration: none;
color: black;
font-size: 25px;
font-weight: bold;
background-color: #F5F5F5;
border-radius: 20px;
-webkit-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
}
#equals {
display: block;
background-color: #F5F5F5;
color: black;
margin-top: 257px;
margin-left: 165px;
height: 50px;
width: 118px;
float: center;
padding-top: 7px;
text-align: center;
text-decoration: none;
font-size: 35px;
font-weight: bold;
border-radius: 20px;
-webkit-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
}
#numbers a {
display: block;
width: 45px;
height: 50px;
float: left;
padding: 2px;
margin: 5px 15px;
text-align: center;
text-decoration: none;
color: black;
font-size: 30px;
background-color: #F5F5F5;
border-radius: 20px;
-webkit-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
}
a:hover {
background-color: white;
}
#numbers a:active {
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
position: relative;
top: 7px;
}
#clearanderasebuttons a:active {
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
position: relative;
top: 7px;
}
#operators a:active {
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
position: relative;
top: 7px;
}
#equalsign a:active {
-webkit-box-shadow: 0px 2px 0px #000000;
-moz-box-shadow: 0px 2px 0px #000000;
box-shadow: 0px 2px 0px #000000;
position: relative;
top: 7px;
}
footer {
padding-top:200px;
font-size:20px;
font-weight:400px;
text-align:center;
color:white;
font-family: 'Playfair Display', serif;
}
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #909AA0;
font-size: 22px;
text-align: center;
padding-top: 12px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover {
/* round facebook icon*/
background: #4060A5;
}
.social .fa-twitter:hover {
/* round twitter icon*/
background: #00ABE3;
}
.social .fa-linkedin:hover {
/* round linkedin icon*/
background: #0094BC;
}
.social .fa-github:hover {
/* round github icon*/
background: #343434;
}
.social .fa-fire:hover {
/* round github icon*/
background: #008000;
}
var buttons = document.getElementsByTagName("a");
var operators = ["+", "-", "x", "÷", "%"];
var decimalAdded = false;
var resultDisplayed = false;
// Add onclick event to all the buttons and perform operations
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function (calculate) {
// Get the input and button values
var input = document.getElementById("total");
var inputValue = input.innerHTML;
var buttonVal = this.innerHTML;
// when the clear button is pressed, everything is erased
if (buttonVal == 'C') {
inputValue = " ";
input.innerHTML = inputValue;
decimalAdded = false;
}
// when the clear last entry button is pressed, the last character is erased
else if (buttonVal == 'CE') {
inputValue = inputValue.substring(0, inputValue.length - 1);
input.innerHTML = inputValue;
//check to see if any decimals in the inputValue, so that no new decimals can be added after the inital decimal is added when the CE button is pressed
if (inputValue.indexOf(".")!==-1) {
decimalAdded = true;
}
else {
decimalAdded = false;
}
}
// if the equal button is pressed, calculate the equation and display the result
else if (buttonVal == '=') {
var equation = inputValue;
var lastChar = equation[equation.length - 1];
// checks the last character of the equation.
if (operators.indexOf(lastChar) > -1 || lastChar == '.')
//if it's an operator or a decimal, remove it
equation = equation.replace(/.$/, '');
// the equation is executed and the resultDisplayed is reset
if (equation) {
input.innerHTML = eval(equation);
resultDisplayed = true;
}
decimalAdded = false;
}
else if (operators.indexOf(buttonVal) > -1) {
// gets the last character from the equation
var lastChar = inputValue[inputValue.length - 1];
// adds the operator only if input is not empty and there is no operator at the last characer
if (inputValue != '' && operators.indexOf(lastChar) == -1)
input.innerHTML += buttonVal;
// allows minus sign if the string is empty
else if (inputValue == '' && buttonVal == '-')
input.innerHTML += buttonVal;
// replaces the last operator (if it exists) with a new operator
if (operators.indexOf(lastChar) > -1 && inputValue.length > 1) {
//'.' matches any character, while $ equals the end of string, any operator at the end of string will get replaced by a new operator
input.innerHTML = inputValue.replace(/.$/, buttonVal);
}
decimalAdded = false;
}
//prevents more decimals to be added to the inputValue. It is set when the user presses the . button
else if (buttonVal === '.') {
if (!decimalAdded) {
input.innerHTML += buttonVal;
decimalAdded = true;
}
}
// clears out the answer if a number button is add after the equal sign has been pressed
else {
if (resultDisplayed === true) {
input.innerHTML = " ";
decimalAdded = false;
resultDisplayed = false;
}
input.innerHTML += buttonVal;
}
// prevents page jumps
calculate.preventDefault();
}
}
