Skip to content

Instantly share code, notes, and snippets.

@stormsweeper

stormsweeper/README.md

Created December 20, 2017 20:13
Show Gist options
  • Save stormsweeper/6206573da31457e7c759806a4946f979 to your computer and use it in GitHub Desktop.
Save stormsweeper/6206573da31457e7c759806a4946f979 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=6206573da31457e7c759806a4946f979
Raw
README.md

Simple Calculator

You have just started as a front-end developer at your new job. Your first project is to make a simple calculator website. Your responsibility is to create the user interface for the calculator code other developers have already written.

HTML

You will need to add buttons for the numbers 0-9, each operation (addition, subtraction, multiplication, division, total), and a clear button. You may change the HTML as you need, but there must be a tag with the id screen to display the output.

CSS

You may style the calculator as you see fit, although a grid layout for the buttons is preferred.

JavaScript

You have been provided with the Calculator object, which has 3 functions, described below. Use jQuery to add click handlers for each button. Each click handler should call the appropriate function. The Calculator object updates the screen automatically.

Calculator.number()

Call this for the number buttons 0 through 9. Example: clicking the number "1" button should call Calculator.number(1);

Calculator.operation()

Call this for the following operations: addition ("+"), subtraction ("-"), multiplication ("*"), division ("/"), or total ("="). Example: clicking "+" should call Calculator.operation("+");

Calculator.clear()

Call this for operations to reset the calculator Example: clicking "clear" should call Calculator.clear();

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<!-- This is the code for the calculator object -->
<script type="text/javascript" src="https://rawgit.com/stormsweeper/48b77d1515d4db4f3becd2487c3d9ee1/raw/cf49d04b03dad832bbf8b01ac7b91073a8d9ec0f/calc.js"></script>
</head>
<body>
<div id="calculator">
<div id="screen">
0
</div>
<div id="buttons">
<!-- The steps below match the steps in the JavaScript -->
<!-- 1. add a button for the number 1 -->
<button id="num1" class="number">1</button>
<button id="num2" class="number">2</button>
<button id="num3" class="number">3</button>
<button id="num4" class="number">4</button>
<button id="num5" class="number">5</button>
<button id="num6" class="number">6</button>
<button id="num7" class="number">7</button>
<button id="num8" class="number">8</button>
<button id="num9" class="number">9</button>
<button id="num0" class="number">0</button>
<!-- 2. add a clear button -->
<button id="clear">C</button>
<button id="equals" class="operation">=</button>
<button id="add" class="operation">+</button>
<button id="subtract" class="operation">-</button>
<button id="multiply" class="operation">*</button>
<button id="divide" class="operation">/</button>
<!-- 3. add a button for "+" (addition) -->
<!-- 4. add a button for "=" (equals/total) -->
<!-- 5. add buttons for the other numbers -->
<!-- 6. add button for the other operations (-, *, /) -->
</div>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console","instructions"]}
Raw
script.js
// The steps below match the steps in the HTML
// 1. Add a click handler for the "1" button
$("#num0").click(function() {
Calculator.number(0);
});
$("#num1").click(function() {
Calculator.number(1);
});
$("#num2").click(function() {
Calculator.number(2);
});
$("#num3").click(function() {
Calculator.number(3);
});
$("#num4").click(function() {
Calculator.number(4);
});
$("#num5").click(function() {
Calculator.number(5);
});
$("#num6").click(function() {
Calculator.number(6);
});
$("#num7").click(function() {
Calculator.number(7);
});
$("#num8").click(function() {
Calculator.number(8);
});
$("#num9").click(function() {
Calculator.number(9);
});
// 2. Add a click handler for the "clear" button
$("#clear").click(function() {
Calculator.clear();
});
$("#equals").click(function() {Calculator.operation("=");});
$("#add").click(function() {Calculator.operation("+");});
$("#subtract").click(function() {Calculator.operation("-");});
$("#multiply").click(function() {Calculator.operation("*");});
$("#divide").click(function() {Calculator.operation("/");});
// 3. Add a click handler for the "+" button
// 4. Add a click handler for the "=" button
// 5. Add click handlers for the other numbers
// 6. Add click handlers for the other operations (-, *, /)
Raw
styles.css
#calculator {
display: flex;
flex-direction: column;
margin: auto;
width: 300px;
}
#buttons {
display: flex;
flex-flow: wrap;
justify-content: center;
}
#screen {
text-align: right;
font-family: monospace;
font-size: 32px;
border: 1px dotted green;
background: #eeffee;
padding: 5px;
}
#buttons button {
width: 60px;
height: 50px;
margin: 5px;
border-radius: 5px;
}
.number {
background: #eeeeff;
}
#clear {
background: #ffeeee;
}
.operation {
background: #eeeeee;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment