JavaScript Calculator V1 - jQuery | FreeCodeCamp
$grey: #CCCCCC;
$pink: #FAC8BF;
$calculatorBase: #6A8D9D;
$btnBase: #466675;
$lightBlue: #94FFFC;
$red: #c13636;
html {
background: linear-gradient(
170deg,
$pink,
darken($pink, 10),
darken($pink, 20)
);
font-family: 'Poppins', sans-serif;
height: 100%;
}
.container {
width: 50%;
margin: 30px auto;
}
.calculator {
width: 400px;
height: 700px;
background-color: $calculatorBase;
border-radius: 10px;
-webkit-box-shadow: 23px 23px 35px -3px rgba(51, 51, 51, 1);
-moz-box-shadow: 23px 23px 35px -3px rgba(51, 51, 51, 1);
box-shadow: 23px 23px 35px -3px rgba(51, 51, 51, 1);
}
#title {
text-align: center;
font-family: 'Grand Hotel', cursive;
position: relative;
font-size: 30px;
top: 15px;
color: #38525e;
letter-spacing: 2px;
}
#title span {
font-family: 'Gruppo', cursive;
font-size: 20px;
color: darken($btnBase, 10);
padding-bottom: 5px;
border-bottom: 1px dashed $btnBase;
}
#screen {
max-width: 350px;
height: 140px;
background-color: $grey;
margin: 25px;
position: relative;
top: 5px;
border-radius: 5px;
box-shadow: inset 0px 0px 25px 0px rgba(115, 115, 115, 1);
overflow: hidden;
}
#output {
max-width: 320px;
max-height: 50px;
color: #333;
font-size: 58px;
position: relative;
top: 55px;
margin: 0 5px;
}
#output span{
padding: 0 15px;
font-size: 25px;
text-transform:uppercase;
}
.button-container {
position: relative;
top: -30px;
margin: 50px 10px;
width: 400px;
height: 400px;
cursor: pointer;
}
.btn {
width: 70px;
height: 70px;
background-color: $btnBase;
display: inline-block;
margin: 5px 10px;
border-radius: 5px;
text-align: center;
line-height: 70px;
font-size: 30px;
color: $grey;
box-shadow: inset 0px -12px 7px -10px rgba(43, 62, 71, 1),
1px 6px 7px -1px rgba(43, 62, 71, 1);
}
.btn:hover {
background-color: darken($btnBase, 10);
color: white;
}
.red-btn {
background-color: $red;
box-shadow: inset 0px -12px 7px -10px rgba(128, 35, 35, 1),
1px 6px 7px -1px rgba(128, 35, 35, 1);
}
.red-btn:hover {
background-color: darken($red, 10);
color: white;
}
.equal {
width: 165px;
background-color: $lightBlue;
color: #333;
box-shadow: inset 0px -12px 7px -10px rgba(76, 138, 135, 1),
1px 6px 7px -1px rgba(52, 71, 69, 1);
}
.equal:hover {
background-color: darken($lightBlue, 10);
color: white;
}
.btn:active, .red-btn:active, .equal:active {
position: relative;
top: 1px;
}
#endTag {
position: relative;
top: 10px;
left: 100px;
}
#endTag a {
color: $red;
}
#endTag a:hover {
color: darken($red, 20);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
var output = "",
operators = [".", "+", "-", "*", "/", "%"];
function checkInput(input) {
//console.log(output);
//console.log(output.slice(-1), output.slice(-2), output.slice(-2, -1));
for (var i = 0; i < operators.length; i++) {
if (
output.slice(-1) === operators[i] &&
output.slice(-2, -1) === operators[i]
) {
output = output.slice(0, -1);
setTimeout(function() {
//console.log(output);
$("#output").html(output);
}, 1000);
} else {
$("#output").html(output);
} //ELSE
} //for
} //CHECK INPUT FUNCTION
$(".btn").click(function() {
//console.log($(this).attr('id'));
var userInput = $(this).attr("value");
if ($(this).attr("value") === "AC") {
output = "";
$("#output").html(output);
} else if (output.length >= 9) {
$("#output").html("<span>Too Many Characters</span>");
if (userInput === "CE") {
output = output.slice(0, -1);
$("#output").html(output);
}
} else {
if ($(this).attr("value") === "AC") {
output = "";
$("#output").html(output);
} else if (userInput === "CE") {
output = output.slice(0, -1);
$("#output").html(output);
} else if (userInput === "=") {
$("#output").html(eval(output));
} else {
output += userInput;
checkInput(userInput);
} //ELSE
} //ELSE
}); // BTN CLICK FUNCTION
}); //DOCUMENT READY
Built a JavaScript Calculator for freeCodeCamp advanced Front-End development projects using jQuery.
A Pen by HARUN PEHLİVAN on CodePen.
<div class="container">
<div class="calculator">
<div id="title">FreeCodeCamp <br>
<span>JavaScript Calculator</span></div>
<div id="screen">
<span id="output"></span>
</div>
<div class="button-container">
<div value="AC" class="btn red-btn">AC</div>
<div value="CE" class="btn red-btn">CE</div>
<div value="%" class="btn">%</div>
<div value="/" class="btn">/</div>
<div value="7" class="btn">7</div>
<div value="8" class="btn">8</div>
<div value="9" class="btn">9</div>
<div value="*" class="btn">*</div>
<div value="4" class="btn">4</div>
<div value="5" class="btn">5</div>
<div value="6" class="btn">6</div>
<div value="-" class="btn">-</div>
<div value="1" class="btn">1</div>
<div value="2" class="btn">2</div>
<div value="3" class="btn">3</div>
<div value="0" class="btn">0</div>
<div value="." class="btn">.</div>
<div value="+" class="btn">+</div>
<div value="=" class="btn equal">=</div>
</div>
<!-- /.button-container -->
</div>
<!-- /.calculator -->
<p id="endTag"><a target="_blank" href="https://tr.gravatar.com/tebm">Coded by HARUN PEHLİVAN 2017</a></p>
</div>
<!-- /.container -->