In this project you wil wte the Javasoret code to create a calaulator. Good thing is that everyone knows how the calculator woks. Eisa challenging project, give yoursait iots of me b complate 1. You ane providad with an HTML, and css ies. Look at these fies to understand how to use them F needed based on your coda. (Note You can add onty aerant seedors (. dass) in HTML and cannat make any changes b csSS) Create your Own sfle Al your work will be done in only to JS fie 2 Connect fies arid his is what you should see All ies must have your name in the e's name. You are ready to start
****Urgent Urgent Urgent - Javascript code required****
I am including contents of CSS file and .html file that was provided along with this project.
PLEASE USE JAVA SCRIPT TO MAKE THIS ASSINGMENT. THE CSS AND HTML FILE CANNOT BE EDITED.
***CSS doc***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculatorF17{
flex: 0 0 40%;
}
.screenF17{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttonsF17{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
.btn-grey{
background: rgb(224,224,224);
}
.btF17{
font-size: 4rem;
}
***HTML DOC***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator F17</title>
</head>
<body>
<section class="calculatorF17">
<h1> Calculator F17 </h1>
<form>
<input type="text" name="" id="" class="screenF17">
</form>
<div class="buttonsF17">
<!-- operation buttons -->
<button type="button" class="btF17" data-num="*">*</button>
<button type="button" class="btF17" data-num="/">/</button>
<button type="button" class="btF17" data-num="-">-</button>
<button type="button" class="btF17" data-num="+">+</button>
<!-- number buttons -->
<button type="button" class="btF17 btn-grey" data-num=".">.</button>
<button type="button" class="btF17 btn-grey" data-num="9">9</button>
<button type="button" class="btF17 btn-grey" data-num="8">8</button>
<button type="button" class="btF17 btn-grey" data-num="7">7</button>
<button type="button" class="btF17 btn-grey" data-num="6">6</button>
<button type="button" class="btF17 btn-grey" data-num="5">5</button>
<button type="button" class="btF17 btn-grey" data-num="4">4</button>
<button type="button" class="btF17 btn-grey" data-num="3">3</button>
<button type="button" class="btF17 btn-grey" data-num="2">2</button>
<button type="button" class="btF17 btn-grey" data-num="1">1</button>
<button type="button" class="btF17 btn-grey" data-num="0">0</button>
<button type="button" class="btF17 btn-grey">=</button>
<button type="button" class="btF17 btn-grey">C</button>
</div>
</section>
</body>
</html>
****Urgent Urgent Urgent - Javascript code required****
I am including contents of CSS file and .html file that was provided along with this project.
Also, here is a link to google doc with the CSS and HTML file data which you can access and edit directly if you prefer.
https://docs.google.com/document/d/132uPwAG3GkfBXd8kXmLktWywz2A5eaYAWwNoXE2V2qI/edit?usp=sharing
For step 3 part a - Please choose: green for +, red for -, purple for *, orange for /
For step 11 - Please choose colour yellow.
***CSS doc***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculatorF17{
flex: 0 0 40%;
}
.screenF17{
width: 100%;
font-size: 7rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttonsF17{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
.btn-grey{
background: rgb(224,224,224);
}
.btF17{
font-size: 4rem;
}
***HTML DOC***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculator F17</title>
</head>
<body>
<section class="calculatorF17">
<h1> Calculator F17 </h1>
<form>
<input type="text" name="" id="" class="screenF17">
</form>
<div class="buttonsF17">
<!-- operation buttons -->
<button type="button" class="btF17" data-num="*">*</button>
<button type="button" class="btF17" data-num="/">/</button>
<button type="button" class="btF17" data-num="-">-</button>
<button type="button" class="btF17" data-num="+">+</button>
<!-- number buttons -->
<button type="button" class="btF17 btn-grey" data-num=".">.</button>
<button type="button" class="btF17 btn-grey" data-num="9">9</button>
<button type="button" class="btF17 btn-grey" data-num="8">8</button>
<button type="button" class="btF17 btn-grey" data-num="7">7</button>
<button type="button" class="btF17 btn-grey" data-num="6">6</button>
<button type="button" class="btF17 btn-grey" data-num="5">5</button>
<button type="button" class="btF17 btn-grey" data-num="4">4</button>
<button type="button" class="btF17 btn-grey" data-num="3">3</button>
<button type="button" class="btF17 btn-grey" data-num="2">2</button>
<button type="button" class="btF17 btn-grey" data-num="1">1</button>
<button type="button" class="btF17 btn-grey" data-num="0">0</button>
<button type="button" class="btF17 btn-grey">=</button>
<button type="button" class="btF17 btn-grey">C</button>
</div>
</section>
</body>
</html>
Step by step
Solved in 2 steps
