It’s time to write about another project from TheOdinProject curriculum. I finished this one more than a month ago, but I didn’t get to write about its construction until now.
The project was written in HTML, CSS and vanilla JS, assignment requirements being the following:
Requirements:
- Your calculator is going to contain functions for all of the basic math operators you typically find on calculators:.
- add
- subtract
- multiply
- divide
- Create the functions that populate the display when you click the number buttons. You should be storing the ‘display value’ in a variable somewhere for use in the next step.
- Make the calculator work! You’ll need to store the first number and second number that are input into the calculator, utilize the operator that the user selects, and then operate() on the two numbers when the user presses the “=” key.
- You should already have the code that can populate the display, so once operate() has been called, update the display with the ‘solution’ to the operation.
- This is the hardest part of the project. You need to figure out how to store all the values and call the operate function with them.
- Users should be able to string together several operations and get the right answer, with each pair of numbers being evaluated at a time. For example, 12 + 7 – 5 * 3 = should yield 42. An example of the behavior we’re looking for would be
- Your calculator should not evaluate more than a single pair of numbers at a time. Example: you press a number button (12), followed by an operator button (+), a second number button (7), and finally a second operator button (-). Your calculator should then do the following: first, evaluate the first pair of numbers (12 + 7), second, display the result of that calculation (19), and finally, use that result (19) as the first number in your new calculation, along with the next operator (-).
- You should round answers with long decimals so that they don’t overflow the screen.
- Pressing “clear” should wipe out any existing data.. make sure the user is really starting fresh after pressing “clear”
- Display a snarky error message if the user tries to divide by 0… and don’t let it crash your calculator!
- Users can get floating point numbers if they do the math required to get one, but they can’t type them in yet. Add a . button and let users input decimals! Make sure you don’t let them type more than one though: 12.3.56.5. It is hard to do math on these numbers. (disable the decimal button if there’s already one in the display)
- Add a “backspace” button, so the user can undo if they click the wrong number.
- Add keyboard support!
HTML structure:
<body>
<main>
<div class="calculator">
<div class="display" id="uiDisplay">
</div>
<div class="numbers-container">
<div class="delete-clear">
<button class="btn delete" id="delete">Delete</button>
<button class="btn clear" id="clear">Clear all</button>
</div>
<div class="number-row">
<button class="number btn" id="7">7</button>
<button class="number btn" id="8">8</button>
<button class="number btn" id="9">9</button>
<button class="operator btn" id="divide">/</button>
</div>
<div class="number-row">
<button class="number btn" id="4">4</button>
<button class="number btn" id="5">5</button>
<button class="number btn" id="6">6</button>
<button class="operator btn" id="multiply">*</button>
</div>
<div class="number-row">
<button class="number btn" id="1">1</button>
<button class="number btn" id="2">2</button>
<button class="number btn" id="3">3</button>
<button class="operator btn" id="subtract">-</button>
</div>
<div class="number-row">
<button class="number btn" id="decimal">.</button>
<button class="number btn" id="0">0</button>
<button class="operator btn" id="equals">=</button>
<button class="operator btn" id="add">+</button>
</div>
</div>
</div>
</main>
</body>
The HTML code is quite simple. Everything is kept in a computer class container.
1. Line 4:
An empty div, with id uiDisplay, which i will populate it from JavaScript using the buttons and result of the operations.
2. Lines 6-34:
All the input buttons are grouped in a div numbers-container, then each line of the computer has its own div number-row, with 4 buttons each.
Each button has an id corresponding the value we send to JavaScript and the literal value, which is also used in JS operations: numerical value, operand, etc.
CSS structure:
The CSS code is very simple. I used flex on the body to center the computer and to align the buttons with each other. The color scheme is already the classic one, standard, nothing out of the ordinary.
Being a project without mobile requirements, i did not pay much attention to this aspect, as there was no need for major interventions for this purpose.
I link the CSS code on Github, to not load the page with 100 lines of CSS.
If you want to see an index with all the articles for this application, go to Articles by projects.