Skip to content

Instantly share code, notes, and snippets.

@christianjuth

christianjuth/calculator.markdown

Last active February 6, 2017 04:48
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 christianjuth/b524705767a223ce8c7ab76299eb5880 to your computer and use it in GitHub Desktop.
Save christianjuth/b524705767a223ce8c7ab76299eb5880 to your computer and use it in GitHub Desktop.
Download ZIP
Calculator
Raw
index.haml
.calculator
.calculator-header
.calculator-screen 0
.calculator-body
.btn-row
.btn.calc-btn-clear Ce
.btn.calc-btn-posNegative +/-
.btn.calc-btn-percentage %
.btn.calc-btn-divide ÷
.clearfix
.btn-row
.btn.calc-btn-7 7
.btn.calc-btn-8 8
.btn.calc-btn-9 9
.btn.calc-btn-multiply ×
.clearfix
.btn-row
.btn.calc-btn-4 4
.btn.calc-btn-5 5
.btn.calc-btn-6 6
.btn.calc-btn-subtract -
.clearfix
.btn-row
.btn.calc-btn-1 1
.btn.calc-btn-2 2
.btn.calc-btn-3 3
.btn.calc-btn-add +
.clearfix
.btn-row
.btn.btn-bg.calc-btn-0 0
.btn.calc-btn-decimal .
.btn.calc-btn-equals =
.clearfix
%a.brand{href: "http://www.christianjuth.com", target: "_blank"} Christian Juth
Raw
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:900|Pacifico" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='style.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<div class="calculator">
<div class="calculator-header">
<div class="calculator-screen">0</div>
</div>
<div class="calculator-body">
<div class="btn-row">
<div class="btn calc-btn-clear">Ce</div>
<div class="btn calc-btn-posNegative">+/-</div>
<div class="btn calc-btn-percentage">%</div>
<div class="btn calc-btn-divide">÷</div>
<div class="clearfix"></div>
</div>
<div class="btn-row">
<div class="btn calc-btn-7">7</div>
<div class="btn calc-btn-8">8</div>
<div class="btn calc-btn-9">9</div>
<div class="btn calc-btn-multiply">×</div>
<div class="clearfix"></div>
</div>
<div class="btn-row">
<div class="btn calc-btn-4">4</div>
<div class="btn calc-btn-5">5</div>
<div class="btn calc-btn-6">6</div>
<div class="btn calc-btn-subtract">-</div>
<div class="clearfix"></div>
</div>
<div class="btn-row">
<div class="btn calc-btn-1">1</div>
<div class="btn calc-btn-2">2</div>
<div class="btn calc-btn-3">3</div>
<div class="btn calc-btn-add">+</div>
<div class="clearfix"></div>
</div>
<div class="btn-row">
<div class="btn btn-bg calc-btn-0">0</div>
<div class="btn calc-btn-decimal">.</div>
<div class="btn calc-btn-equals">=</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<a href="http://www.christianjuth.com" target="_blank" class="brand">Christian Juth</a>
</body>
</html>
Raw
script.coffeescript
class Calculator
constructor: (screen, buttons, screenMax = 8)->
# vars
$this = this
@screen = screen
@screen.text(@screenValue)
@screenValue = "0"
@screenMax = screenMax
@first = "0"
@second = ""
@operator = ""
@lastSecond = ""
@lastOperator = ""
# Button Bindings
# bind numbers
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].forEach (number)->
$(buttons[number]).click ()->
$this.numberClicked(number)
# bind operators
["divide",
"multiply",
"subtract",
"add"
].forEach (operator)->
$(buttons[operator]).click ()->
$this.operatorClicked(operator)
# bind others
["clear",
"decimal",
"equals",
"posNegative",
"percentage"
].forEach (button)->
$(buttons[button]).click ()->
$this[button+"Clicked"]()
# Key Bindings
$(window).keypress (e)->
# vars
code = e.keyCode || e.which
# bind numbers
if code >= 48 && code <= 57
$this.numberClicked(code - 48 + "")
# bind operators
[ ["divide", 47],
["multiply", 42],
["subtract", 45],
["add",43]
].forEach (btn)->
if code == btn[1]
$this.operatorClicked(btn[0])
# bind other
[ ["clear", 99, 67],
["decimal", 46],
["equals", 61, 13],
["posNegative", 95],
["percentage", 37]
].forEach (btn)->
keycodes = btn.splice(1)
keycodes.forEach (keycode)->
if code == keycode
$this["#{btn}Clicked"]()
# --- Internal functions ---
screenNotFull: ->
screenValue = @screenValue.replace(/(-|\.)/g,"")
screenValue.length < @screenMax
clearScreen: ->
@screenValue = "0"
@screen.text(@screenValue)
# --- Calculator Functions ---
clearClicked: ->
@first = "0"
@second = ""
@operator = ""
@screenValue = "0"
@screen.text(@screenValue)
numberClicked: (number)->
$this = this
if @operator != "" && @second == ""
$this.clearScreen()
if @screenNotFull()
if @screenValue.replace(/(-)/g,"") != "0"
number = @screen.text() + number
else if @screenValue.includes("-")
number = "-#{number}"
if $this.operator == ""
@first = number
else
@second = number
@screenValue = number
@screen.text(number)
posNegativeClicked: ->
$this = this
if @operator != "" && @second == ""
$this.clearScreen()
@second = "0"
if @second == ""
if @first.includes("-")
@first = @first * -1 + ""
else
@first = "-#{@first}"
number = @first
else
if @second.includes("-")
@second = @second * -1 + ""
else
@second = "-#{@second}"
number = @second
@screenValue = number
@screen.text(number)
percentageClicked: ->
$this = this
if @operator != "" && @second == ""
$this.clearScreen()
@second = @first
if @second == ""
@first = @first / 100 + ""
number = @first
else
@second = @second / 100 + ""
number = @second
@screenValue = number
@screen.text(number)
decimalClicked: ->
$this = this
if @operator != "" && @second == ""
$this.clearScreen()
@second = "0"
if @second == ""
unless @first.includes(".")
@first = @first + "."
number = @first
else
unless @second.includes(".")
@second = @second + "."
number = @second
@screenValue = number
@screen.text(number)
operatorClicked: (operator)->
$this = this
unless @second
@operator = operator
else
$this.equalsClicked()
@operator = operator
equalsClicked: ->
if @operator == ""
@operator = @lastOperator
@second = @lastSecond
first = parseFloat(@first)
second = parseFloat(@second)
if @operator != "" && @second
if @operator == "add"
result = first + second
else if @operator == "subtract"
result = first - second
else if @operator == "multiply"
result = first * second
else if @operator == "divide"
result = first / second
result = result + ""
@first = result
@lastSecond = @second
@second =""
@lastOperator = @operator
@operator = ""
if result.replace(/(-|\.)/g,"").length > @screenMax
if result.split(".")[0].replace(/(-)/g,"").length > @screenMax
result = "Error"
else
int = result.split(".")[0]
deci = result.split(".")[1]
deci = deci.substring(0,@screenMax - int.replace(/-/g,"").length)
result = "#{int}.#{deci}"
@screen.text(result)
if result == "Error"
@screenValue = "0"
else
@screenValue = result
$(document).ready ->
calculator = new Calculator($(".calculator-screen"), {
clear: ".calc-btn-clear",
0: ".calc-btn-0",
1: ".calc-btn-1",
2: ".calc-btn-2",
3: ".calc-btn-3",
4: ".calc-btn-4",
5: ".calc-btn-5",
6: ".calc-btn-6",
7: ".calc-btn-7",
8: ".calc-btn-8",
9: ".calc-btn-9",
add: ".calc-btn-add",
subtract: ".calc-btn-subtract",
multiply: ".calc-btn-multiply",
divide: ".calc-btn-divide",
equals: ".calc-btn-equals",
posNegative: ".calc-btn-posNegative",
percentage: ".calc-btn-percentage",
decimal: ".calc-btn-decimal"
})
Raw
scripts
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.css
html,
body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Open Sans', sans-serif;
}
body{
background: #EECDA3;
background: -webkit-linear-gradient(to bottom right, #ffad88 22%, #e14e55);
background: linear-gradient(to bottom right, #ffad88 22%, #e14e55);
}
.clearfix{
clear: both;
}
.calculator{
position: relative;
width: 200px;
border-radius: 5px;
overflow: hidden;
-webkit-box-shadow: 0px 23px 158px 15px rgba(183,28,28,0.74);
-moz-box-shadow: 0px 23px 158px 15px rgba(183,28,28,0.74);
box-shadow: 0px 23px 158px 15px rgba(183,28,28,0.74);
}
.calculator .calculator-header{
background-color: #e15653;
height: 65px;
color: #fff;
}
.calculator .calculator-header .calculator-screen{
height: 100%;
text-align: right;
font-size: 30px;
padding: 15px;
}
.calculator,
.calculator .calculator-body{
background-color: #f26f6a;
}
.btn{
width: 25%;
padding: 12px 0;
text-align: center;
background-color: #f26f6a;
color: #fff;
float: left;
cursor: pointer;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.btn:hover{
background-color: #e86661;
}
.btn.btn-bg{
width: 50%;
}
.brand,
.brand:visited{
position: absolute;
padding: 0;
margin: 0;
bottom: 5px;
right: 10px;
text-decoration: none;
color: rgba(0,0,0,0.3);
font-size: 14px;
font-family: 'Pacifico', cursive;
}
.brand:hover{
text-decoration: underline;
}
/* --- Codecademy preview ---- */
@media screen and (max-width: 300px) and (max-height: 200px){
html,
body{
overflow: hidden;
}
.brand,
.brand:visited{
display: none;
}
.calculator{
width: 195px;
margin-top: 190px;
}
}
Raw
style.scss
// ----- Mixins -----
@mixin prefix($props...) {
@each $prop, $key in $props{
@each $prefix in (webkit moz o ms) {
#{'-' + $prefix + '-' + $prop}: $key;
}
#{$prop}: $key;
}
}
@mixin prefix-value($props...) {
@each $prop, $key in $props{
@if $key {
@each $prefix in (webkit moz o ms) {
#{$prop}: #{'-'+$prefix+'-'+$key};
}
#{$prop}: $key;
}
}
}
// ---- Main Code ----
html,
body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: visible;
@include prefix-value(display flex);
align-items: center;
justify-content: center;
font-family: 'Open Sans', sans-serif;
}
body{
background: #F89B7D;
@include prefix-value(
background linear-gradient(to bottom right, #ffad88 22%, #e14e55)
);
}
.clearfix{
clear: both;
}
.calculator{
position: relative;
width: 200px;
border-radius: 5px;
overflow: hidden;
@include prefix(
box-shadow (0px 23px 158px 15px rgba(183,28,28,0.74))
);
.calculator-header{
background-color: #e15653;
height: 65px;
color: #fff;
.calculator-screen{
height: 100%;
text-align: right;
font-size: 30px;
padding: 15px;
}
}
&, .calculator-body{
background-color: #f26f6a;
}
.calculator-body .btn{
width: 25%;
padding: 12px 0;
text-align: center;
background-color: #f26f6a;
color: #fff;
float: left;
cursor: pointer;
@include prefix(user-select none);
&.btn-bg{
width: 50%;
}
&:hover{
background-color: #e86661;
}
}
}
.brand,
.brand:visited{
position: absolute;
padding: 0;
margin: 0;
bottom: 5px;
right: 10px;
text-decoration: none;
color: rgba(0,0,0,0.3);
font-size: 14px;
font-family: 'Pacifico', cursive;
&:hover{
text-decoration: underline;
}
}
/* --- Codecademy preview ---- */
@media screen and (max-width: 300px) and (max-height: 200px){
html,
body{
overflow: hidden;
}
.brand,
.brand:visited{
display: none;
}
.calculator{
width: 195px;
margin-top: 190px;
}
}
Raw
styles
<link href="//fonts.googleapis.com/css?family=Open+Sans|Roboto:900|Pacifico" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment