Skip to content

Instantly share code, notes, and snippets.

@stormsweeper

stormsweeper/INSTRUCTIONS.md

Last active December 20, 2017 20:50
Show Gist options
  • Save stormsweeper/441130ce8bcca135707ed6765e719fe8 to your computer and use it in GitHub Desktop.
Save stormsweeper/441130ce8bcca135707ed6765e719fe8 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=441130ce8bcca135707ed6765e719fe8
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 -->
<!-- 2. add a clear 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
INSTRUCTIONS.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.

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 the addition button should call Calculator.operation("+");

Calculator.clear()

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

Raw
popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["console"]}
Raw
script.js
// The steps below match the steps in the HTML
// 1. Add a click handler for the "1" button
// 2. Add a click handler for the "clear" button
// 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 (-, *, /)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment