Skip to content

Instantly share code, notes, and snippets.

@outoftime

outoftime/Calc.css

Created November 12, 2015 15:09
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 outoftime/f66d711212edd8edfed4 to your computer and use it in GitHub Desktop.
Save outoftime/f66d711212edd8edfed4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Calc.css
.calc-row:not(:last-child)
{
margin-bottom: 10px;
}
#question
{
margin-top: 50px;
font-size: 60px;
}
#answer
{
margin-top: 30px;
font-size: 60px;
}
.container
{
max-width: 700px;
}
Raw
calc.html
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://rawgit.com/ScriptEdcurriculum/curriculum/master/units/5-javascript/lessons/4-project/starter_code/js/calculator.js"></script
<title>ScriptEd Unit 5 Project: Calculator</title>
</head>
<body>
<div class="container">
<h1>ScriptEd Unit 5 Project: Calculator</h1>
<hr/>
<div class="row">
<div class="col-md-12">
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">7</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">8</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">9</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">/</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">RAND</button>
</div>
</div>
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">4</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">5</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">6</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">x</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">SQRT</button>
</div>
</div>
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">1</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">2</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">3</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">-</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">^</button>
</div>
</div>
<div class="row calc-row">
<div class="col-md-2">
<button type="button" class="btn btn-default btn-block btn-lg calc-btn">0</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">CLEAR</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">=</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">+</button>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary btn-block btn-lg calc-btn">log</button>
</div>
</div>
</div>
</div>
<div id="question" class="text-center">
</div>
<div id="answer" class="text-center">
</div>
</div>
</body>
</html>
Raw
Calc.js
function divide(x,y)
{
return x/y;
}
// You must implement the rest of the functions.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment