We are using (html, css, and Javascript) Build a web application that has a simp
ID: 3800634 • Letter: W
Question
We are using (html, css, and Javascript) Build a web application that has a simple calculator on it. This calculator needs to have buttons for the user to interact with it.
Content
The page must feature a calculator that has buttons so users can enter any positive integer. It also needs to support the following mathematical functions: addition, subtraction, multiplication, and division. As well as an equal button so that it performs the operations and a clear button to clear out the user input.
Like a simple calculator, the user should be able to click buttons to enter a number, and then press an operation and then key in another number. If the user clicks the equal button, it will perform the operation. However, the user can choose to do another mathematical operation instead, so they can perform complex operations.
If the user clicks the enter button and receives their results, they can choose to do another mathematical operation on the number or enter in a new number that replaces the old. This functionality should be similar to the default Windows calculator, in that regard.
The calculator needs to be mathematically accurate.
IT WILL BE REJECTED IF:
You use inline CSS or JavaScript
You have CSS outside of the head tag
You use any third party JavaScript libraries (third party CSS libraries are okay)
You don’t enable JavaScript’s strict mode
You use var instead of let
You don’t use the EventListener API
Your page doesn’t pass: https://validator.w3.org/
If the page doesn’t render and work properly across Google Chrome and Mozilla Firefox
Explanation / Answer
<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"></div>
<div class="keys">
<p><input type="button" class="button gray"
value="mrc">
<input type="button" class="button gray"
value="m-">
<input type="button" class="button gray" value="
m+">
<input type="button" class="button pink"
value="/"></p>
<p><input type="button" class="button black"
value="7"><input type="button"
class="button black" value="8">
<input type="button" class="button black" value="9"
><input type="button"
class="button pink" value="*"></p>
<p><input type="button" class="button black"
value="4"><input type="button"
class="button black" value="5">
<input type="button" class="button black" value="6"
><input type="button"
class="button pink" value="-"></p>
<p><input type="button" class="button black"
value="1"><input type="button"
class="button black" value="2">
<input type="button" class="button black" value="3"
><input type="button"
class="button pink" value="+"></p>
<p><input type="button" class="button black"
value="0"><input type="button"
class="button black" value=".">
<input type="button" class="button black" value="C"
><input type="button"
class="button orange" value="="></p>
</div>
</div>
CSS
body
{
background-color:tan;
}
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
CSS
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
}
Css
.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.