Skip to content

Instantly share code, notes, and snippets.

@teethnclaws

teethnclaws/index.html

Created July 24, 2017 19:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save teethnclaws/cbd716511cf7364b1f92cf6067be4643 to your computer and use it in GitHub Desktop.
Save teethnclaws/cbd716511cf7364b1f92cf6067be4643 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Calculator
Raw
index.html
<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>
Raw
script.js
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);
}
});
Raw
scripts
<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>
Raw
style.css
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;
}
Raw
styles
<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