A Pen by Sam Legros on CodePen.
Created
July 24, 2017 19:02
-
-
Save teethnclaws/cbd716511cf7364b1f92cf6067be4643 to your computer and use it in GitHub Desktop.
JavaScript Calculator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<link href="https://fonts.googleapis.com/css?family=Montserrat|Pacifico" rel="stylesheet"> | |
</head> | |
<div class="container"> | |
<h3 class="font-title"><a href="https://www.freecodecamp.org/" target="_blank">Free Code Camp</a></h3> | |
<p>JavaScript Calculator</p> | |
<div class="outputDiv"> | |
<h1 class="outputInt">0</h1> <!-- max #s: 000,000,000,000,000 --> | |
<h3 class="operation">0</h3> | |
</div> | |
<div class="myButtons"> | |
<button class="action-button animate red" id="clearAC" onclick="clearAll()">AC</button> | |
<button class="action-button animate red" id="clearCE" onclick="clearAll()">CE</button> | |
<button class="action-button animate drk-green" id="divide">/</button> | |
<button class="action-button animate drk-green" id="multiply">x</button><br /> | |
<button class="action-button animate green" id="seven">7</button> | |
<button class="action-button animate green" id="eight">8</button> | |
<button class="action-button animate green" id="nine">9</button> | |
<button class="action-button animate drk-green" id="subtract">-</button><br /> | |
<button class="action-button animate green" id="four">4</button> | |
<button class="action-button animate green" id="five">5</button> | |
<button class="action-button animate green" id="six">6</button> | |
<button class="action-button animate drk-green" id="sum">+</button><br /> | |
<button class="action-button animate green button1" id="one">1</button> | |
<button class="action-button animate green" id="two">2</button> | |
<button class="action-button animate green" id="three">3</button> | |
<button class="action-button animate drk-green buttonEql" id="equals">=</button><br /> | |
<button class="action-button animate green button0" id="zero">0</button> | |
<button class="action-button animate green buttonDot" id="decimal">.</button> | |
</div> | |
</div> | |
<p class="myFooter"><i class="fa fa-code" aria-hidden="true" style="font-size: 20px;"></i> by <a href="https://www.linkedin.com/in/samlegros/" target="_blank">Sam Legros</a></p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var myInt = []; | |
var myOperation = []; | |
var teeHee = 0.7734; | |
var decimal = false; | |
var numFirst = false; | |
var mathClicked = false; | |
function clearAll() { | |
myInt = []; | |
myOperation = []; | |
decimal = false; | |
numFirst = false; | |
$(".outputInt").html(0); | |
$(".operation").html(0); | |
} | |
function numPress(num) { | |
if (myInt.length < 15 && myOperation.length < 22) { | |
myInt.push(num); | |
myOperation.push(num); | |
$(".outputInt").html(myInt); | |
$(".operation").html(myOperation); | |
numFirst = true; | |
mathClicked = false; | |
} else { | |
myInt = []; | |
myOperation = []; | |
decimal = false; | |
numFirst = false; | |
$(".outputInt").html(0); | |
$(".operation").html("Digital Limit Met"); | |
} | |
} | |
function pressOperation(operation) { | |
if (numFirst == true && mathClicked == false) { | |
myInt = []; | |
myOperation.push(operation); | |
$(".outputInt").html(operation); | |
$(".operation").html(myOperation); | |
decimal = false; | |
numFirst = false; | |
mathClicked = true; | |
} | |
} | |
// OPERATION BUTTONS ---------- | |
$("#divide").click(function() { | |
pressOperation("/"); | |
}); | |
$("#multiply").click(function() { | |
pressOperation("*"); | |
}); | |
$("#subtract").click(function() { | |
pressOperation("-"); | |
}); | |
$("#sum").click(function() { | |
pressOperation("+"); | |
}); | |
$("#equals").click(function() { | |
pressOperation("="); | |
myOperation.pop(); | |
myOperation = myOperation.join(""); | |
var a = eval(myOperation).toFixed(2).replace(/[.,]00$/, ""); | |
if (a.length < 15 && a.length < 22) { | |
$(".outputInt").html(a); | |
} else { | |
$(".outputInt").html(0); | |
$(".operation").html("Digital Limit Met"); | |
} | |
var b = myOperation; | |
var d = eval(b); | |
if (d == teeHee) { | |
$(".outputInt").html("HELLO THERE :)"); | |
} | |
}); | |
$("#decimal").click(function() { | |
if (myInt.length < 15) { | |
if (decimal == false && numFirst == false) { | |
myInt.push(0); | |
myOperation.push(0); | |
myInt.push("."); | |
myOperation.push("."); | |
$(".outputInt").html(myInt); | |
$(".operation").html(myOperation); | |
decimal = true; | |
numFirst = true; | |
} else if (decimal == false && numFirst == true) { | |
myInt.push("."); | |
myOperation.push("."); | |
$(".outputInt").html(myInt); | |
$(".operation").html(myOperation); | |
decimal = true; | |
} | |
} | |
}); | |
// NUMBER BUTTONS ----------- | |
$("#nine").click(function() { | |
numPress(9); | |
}); | |
$("#eight").click(function() { | |
numPress(8); | |
}); | |
$("#seven").click(function() { | |
numPress(7); | |
}); | |
$("#six").click(function() { | |
numPress(6); | |
}); | |
$("#five").click(function() { | |
numPress(5); | |
}); | |
$("#four").click(function() { | |
numPress(4); | |
}); | |
$("#three").click(function() { | |
numPress(3); | |
}); | |
$("#two").click(function() { | |
numPress(2); | |
}); | |
$("#one").click(function() { | |
numPress(1); | |
}); | |
$("#zero").click(function() { | |
if (myInt.length > 0) { | |
numPress(0); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: #cabfb9; | |
min-width: 450px; | |
} | |
.font-title { | |
font-family: 'Pacifico', cursive; | |
} | |
.font-text { | |
font-family: 'Montserrat', sans-serif; | |
} | |
.container { | |
width: 425px; | |
margin: 0px auto; | |
margin-top: 10px; | |
padding-bottom: 25px; | |
background: #276FBF; | |
border-radius: 10px; | |
text-align: center; | |
font-family: 'Montserrat', sans-serif; | |
color: #F6F4F3; | |
box-shadow: 0 9px #13365c; /* darker color */ | |
} | |
.outputDiv { | |
width: 350px; | |
height: 75px; | |
margin: 0px auto; | |
background-color: #183059; | |
border-radius: 10px; | |
padding-right: 10px; | |
} | |
.outputInt { | |
text-align: right; | |
line-height: 50px; | |
} | |
.operation { | |
text-align: right; | |
margin: -18px 2px 0px 0px; | |
color: #BBBBBB; | |
} | |
.myButtons { | |
padding-top: 10px; | |
} | |
.animate { | |
transition: all 0.1s; | |
-webkit-transition: all 0.1s; | |
} | |
.action-button { | |
padding: 15px 0px; | |
margin: 10px 7px; | |
width: 74px; | |
font-size: 24px; | |
text-align: center; | |
cursor: pointer; | |
outline: none; | |
border: none; | |
border-radius: 15px; | |
} | |
.red { | |
background-color: #a70320; | |
border-bottom: 5px solid #a70320; | |
text-shadow: 0px -2px #a70320; | |
box-shadow: 0 5px #67080f; /* darker color */ | |
} | |
.red:active { | |
background-color: #a70320; | |
box-shadow: 0 0px #67080f; /* darker color */ | |
transform: translateY(4px); | |
} | |
/* new red #a70320 - old red #F03A47 */ | |
.drk-green { | |
background-color: #074F57; | |
border-bottom: 5px solid #074F57; | |
text-shadow: 0px -2px #074F57; | |
box-shadow: 0 5px #043238; /* darker color */ | |
} | |
.drk-green:active { | |
background-color: #074F57; | |
box-shadow: 0 0px #043238; /* darker color */ | |
transform: translateY(4px); | |
} | |
.green { | |
background-color: #76a29c; | |
border-bottom: 5px solid #76a29c; | |
text-shadow: 0px -2px #76a29c; | |
box-shadow: 0 5px #2d423f; /* darker color */ | |
} | |
.green:active { | |
background-color: #76a29c; | |
box-shadow: 0 0px #2d423f; /* darker color */ | |
transform: translateY(4px); | |
} | |
.button1 { | |
margin-left: -80px; | |
} | |
.buttonEql { | |
position: absolute; | |
height: 158px; | |
margin-left: 6px; | |
} | |
.button0 { | |
width: 166px; | |
margin-left: -176px; | |
display: inline; | |
} | |
.buttonDot { | |
position: absolute; | |
margin-left: 10px; | |
} | |
.myFooter { | |
margin-top: 15px; | |
font-size: 12px; | |
text-align: center; | |
color: #FFFFFF; | |
} | |
a:link, a:visited, a:hover { | |
text-decoration: none; | |
color: #FFFFFF; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment