Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
CSS not working, Figure 1 is my output, and Figure 2 is the desired output. What's wrong

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

Database System Concepts
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
See similar textbooks
icon
Related questions
Question
100%

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

<!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">


    <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">
        <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">
                <div class="select">
                    <select id="operator">
                      <option value="+">Addition (+)</option>
                      <option value="-">Subtraction (-)</option>
                      <option value="*">Multiple (*)</option>
                      <option value="/">Divide (/)</option>
                    </select>
                  </div>
            </div>
            <br>
            <button onclick="operation('=')"> Calculate </button>
        </div>
        <div class="result">
            <h1 id="resultHere"></h1>
        </div>
    </div>

    <script>
        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
Transcribed Image Text:Enter first number Enter second number Addition (+) Calculate
Enter first number 12 Enter second number 2 Addition (+) Calculate 12 + 2 = 14
Transcribed Image Text:Enter first number 12 Enter second number 2 Addition (+) Calculate 12 + 2 = 14
Expert Solution
steps

Step by step

Solved in 3 steps with 1 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Search Engine
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.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
Database System Concepts
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education
SEE MORE TEXTBOOKS