Answered: CSS not working, Figure 1 is my output,…

Np Ms Office 365/Excel 2016 I Ntermed

1st Edition

ISBN:9781337508841

Author:Carey

Publisher:Carey

Chapter1: Getting Started With Excel

Section: Chapter Questions

Problem 2.4CP

See similar textbooks

Related questions

Question

100%

CSS not working, Figure 1 is my output, and Figure 2 is the desired output. What's wrong?
---

<!DOCTYPE html>

<head>

<title>

Calculator

</title>

<style>

* {

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;

}

</style>

</head>

<body>

<divclass="calculator">

Enter first number

</span>

</div>

Enter second number

</span>

</div>

<option value="+">Addition (+)</option>

<option value="-">Subtraction (-)</option>

<option value="*">Multiple (*)</option>

<option value="/">Divide (/)</option>

</select>

</div>

<br>

<button onclick="operation('=')"> Calculate </button>

</div>

</div>

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);

operatorss = document.getElementById("operator").value

operator = operatorss

output = manuplateAs(operator, x, y);

if(y !== undefined && y !== "NaN" && x !== "NaN" && x !== undefined && output !== undefined){

showOutput(`${x} ${operator} ${y} ${operationName} ${output}`);

}else{

showOutput("Please enter valid number or Fill input box")

}

</script>

</body>

</html>

Enter first number
Enter second number
Addition (+)
Calculate

Enter first number
12
Enter second number
2
Addition (+)
Calculate
12 + 2 = 14

Expert Solution

Step by step

Solved in 3 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.