PLEASE MAKE THE CHOOSING OF OPERATION IN A DROPDOWN --- HTML CODE: Calculator Enter first number Enter second number Operation Calculate __________________________________________________________________________________________________________________________ JAVASCRIPT CODE: var inputIdFirst = "valueOfX", inputIdSecond = "valueOfY", outputId = "resultHere", opearation="operator"; var getInputs = function(id) { return parseInt(document.getElementById(id).value); } var showOutput = function(outputValue, outputIdAsArg) { document.getElementById(outputId).innerHTML = outputValue; } var manuplateAs = function(opeartor, valueOfX, valueOfY) { if(opeartor == '+') return valueOfX + valueOfY; else if(opeartor == '-') return valueOfX - valueOfY; else if(opeartor == '*' || opeartor == "x") return valueOfX * valueOfY; else if(opeartor == '/') return valueOfX / valueOfY; } var operation = function(operationName){ x = getInputs(inputIdFirst); y = getInputs(inputIdSecond); operator = document.getElementById("operator").value output = manuplateAs(operator, x, y); if(y !== unde}
PLEASE MAKE THE CHOOSING OF OPERATION IN A DROPDOWN --- HTML CODE: Calculator Enter first number Enter second number Operation Calculate __________________________________________________________________________________________________________________________ JAVASCRIPT CODE: var inputIdFirst = "valueOfX", inputIdSecond = "valueOfY", outputId = "resultHere", opearation="operator"; var getInputs = function(id) { return parseInt(document.getElementById(id).value); } var showOutput = function(outputValue, outputIdAsArg) { document.getElementById(outputId).innerHTML = outputValue; } var manuplateAs = function(opeartor, valueOfX, valueOfY) { if(opeartor == '+') return valueOfX + valueOfY; else if(opeartor == '-') return valueOfX - valueOfY; else if(opeartor == '*' || opeartor == "x") return valueOfX * valueOfY; else if(opeartor == '/') return valueOfX / valueOfY; } var operation = function(operationName){ x = getInputs(inputIdFirst); y = getInputs(inputIdSecond); operator = document.getElementById("operator").value output = manuplateAs(operator, x, y); if(y !== unde}
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
Related questions
Question
PLEASE MAKE THE CHOOSING OF OPERATION IN A DROPDOWN
---
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/calculator.css">
<title>Calculator</title>
</head>
<body>
<divclass="calculator">
<div class="inputbox">
<div class="number">
<span class="text">
Enter first number
</span>
<input type="number" id="valueOfX">
</div>
<div class="number">
<span class="text">
Enter second number
</span>
<input type="number" id="valueOfY">
</div>
<div class="number">
<span class="text">
Operation
</span>
<input type="text" id="operator">
</div>
<br>
<button onclick="operation('=')"> Calculate </button>
</div>
<div class="result">
<h1 id="resultHere"></h1>
</div>
</div>
<script src="/calculator.js"></script>
</body>
</html>
__________________________________________________________________________________________________________________________
JAVASCRIPT CODE:
var inputIdFirst = "valueOfX",
inputIdSecond = "valueOfY",
outputId = "resultHere",
opearation="operator";
var getInputs = function(id) {
return parseInt(document.getElementById(id).value);
}
var showOutput = function(outputValue, outputIdAsArg) {
document.getElementById(outputId).innerHTML = outputValue;
}
var manuplateAs = function(opeartor, valueOfX, valueOfY) {
if(opeartor == '+')
return valueOfX + valueOfY;
else if(opeartor == '-')
return valueOfX - valueOfY;
else if(opeartor == '*' || opeartor == "x")
return valueOfX * valueOfY;
else if(opeartor == '/')
return valueOfX / valueOfY;
}
var operation = function(operationName){
x = getInputs(inputIdFirst);
y = getInputs(inputIdSecond);
operator = document.getElementById("operator").value
output = manuplateAs(operator, x, y);
if(y !== undefined && x !== undefined && output !== undefined){
showOutput(`${x} ${operator} ${y} ${operationName} ${output}`);
}else{
showOutput("Please enter valid number or Fill input box")
}
}
__________________________________________________________________________________________________________________________
CSS:
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font: bold 14px Arial, sans-serif;
}
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 20%, #ccc);
background-size: cover;
}
.calculator {
display: flex;
flex-direction: column;
width: 275px;
height: auto;
margin: 100px auto;
padding: 20px 20px 9px;
background: #9dd2ea;
background: linear-gradient(#9dd2ea, #8bceec);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
.inputbox{
padding: 20px;
display: flex;
flex-direction: column;
}
.result{
margin: 20px;
text-align: center;
}
.number{
margin: 3px;
}
.text{
margin:4px;
}
Expert Solution

This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 3 steps with 3 images

Recommended textbooks for you

Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON

Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science

Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning

Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON

Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science

Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning

Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning

Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education

Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY