Objective: This assignment is to get you familiar with basic controls and layouts in HTML $,$ CSS

and JavaScript.

The Calculator App

Your task is to design a simple calculator app on the web browser, modeled after the default

calculator app, found on MacOS.

Problem Description and Requirements

Your app should have the following features.

$1)$ Styling and Layout$(30$ points$)$ : Your app should look something similar to the screenshot

above. This is a good opportunity for you to get some experience with page Layouts and CSS$,$

you will need these for later assignments as well. Here are some specifics. Note you need to do a

CSS reset and set the HTML font$-$size to $62\mathrm{.}5\%$ before you use the values below.

$$ For the calculator dimensions I used a max$-$width of $30\%$ of the screen and centered it on

the page.

$$ The text field on top is created using a text$-$area. You will need to play around with the

max$-$width, max$-$height and font$-$size attributes to match it close to what I have here.

$$ The background color for the numeric buttons is rgb$(168,168,168)$;

$$ The background color for the operator buttons is orange

$$ The background color for the clear button is rgb$(35,18,134)$

$$ Each button has a margin of $0\mathrm{.}2$rem $($after a CSS reset and html width set to $62\mathrm{.}5\%)$

$$ The font size on the buttons and text area is $2$rem and $5$rem respectively.

$$ The buttons have a width and height of $6$rem.

$2)$ Basic Functionality $(40$ points$)$ : Your app should perform basic arithmetic tasks like add,

subtract, multiply, division. For a more concrete set of requirements, I have broken this down

into the following points

o When a user hits a numeric button, the corresponding value should be appended

to the text$-$area from right to left. $($See demo link$)$

o A basic expression is of the form $.$ So $"5+$

$7"$ is an expression where operand$1$ is $"5",$ operand$2$ is $"2"$ and the operator is $"+".$

Your app should maintain this form. Any number the user generates initially will

be assigned to operand$1,$ any number the user generates after hitting the operator

will be assigned to operand$2.$ This can be done by recording the value in the text

area when the user hits one of the operators. The value should be stored in some

variable $($this is your operand$1)$ and the text$-$area should be cleared. The value of

the operator that was pressed should also be stored in some variable $($operator$)$

o The result should of the operation should be shown when the user hits the $=$

button. This can be achieved by storing the value in the text area in a second

variable $($operand$2)$ and the result can now be computed, since you have valid

values for operand$1,$ operand$2$ and operator. The result should be shown on the

display.

o C stands for Clear. This should clear the display. If the user hits C while entering

operand$1,$ operand$1$ should be cleared. If the user hits this when entering

operand$2,$ operand$1$ should still be saved. This should only just clear whatever is

on the display.

o Since this is a basic app, we will only consider basic integer operations. This

means for division operations; you should only display the floor value of the

division. So$,$ if the user performed $25/9,$ this should display $2.$

$3)$ Code Quality $/$ Documentation $(30$ points$)$ : Your code should be well documented. I will

be specifically looking for comments to see how you have approached your logic. Assignments

with zero$/$minimal documentation will not receive ANY credit In addition, you should define

multiple methods inside this class to break down the functionality of this problem into simple

modules. You should have at least $3$ functions $($and more if needed$).$ Please make sure you

adhere to these practices.