Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Assingment 7
</title>
    <style>
        body{background-color:lightcoral;
        font-size:24px;}

        input{font-size:24px;}

        input:hover{background-color:aquamarine;}
    </style>


</head>
<body>
    <h1>Math with JavaScript</h1>
<input type="text" size="5" id="box1">

<span id="sign">
&nbsp;
</span>

<input type="text" size="5" id="box2">

=

<span id="output">
&nbsp;
</span>
<br><br>

<input type="button" value="Add"
onclick="addNumbers()";>

<input type="button" value="Subtract"
onclick="subtractNumbers()";>

<input type="button" value="Multiply"
onclick="multiplyNumbers()";>

<input type="button" value="Divide"
onclick="divideNumbers()";>


<script>
function addNumbers(){
    //make a variable for the value of box1
    var value1=parseFloat(document.getElementById("box1").value);
    //make a variable for the value of box2
    var value2=parseFloat(document.getElementById("box2").value);
    //make a variable for total
    var total= value1+value2;
    //put total and output span, show the total
    document.getElementById("output").innerHTML=total;
    //put a + sign in the sign span
    document.getElementById("sign").innerHTML="+"
}

function subtractNumbers(){
    //make a variable for the value of box1
    var value1=parseFloat(document.getElementById("box1").value);
    //make a variable for the value of box2
    var value2=parseFloat(document.getElementById("box2").value);
    //make a variable for total
    var total= value1-value2;
    //put total and output span, show the total
    document.getElementById("output").innerHTML=total;
    //put a + sign in the sign span
    document.getElementById("sign").innerHTML="-"
}

function multiplyNumbers(){
    //make a variable for the value of box1
    var value1=parseFloat(document.getElementById("box1").value);
    //make a variable for the value of box2
    var value2=parseFloat(document.getElementById("box2").value);
    //make a variable for total
    var total= value1*value2;
    //put total and output span, show the total
    document.getElementById("output").innerHTML=total;
    //put a + sign in the sign span
    document.getElementById("sign").innerHTML="X"
}

function divideNumbers(){
    //make a variable for the value of box1
    var value1=parseFloat(document.getElementById("box1").value);
    //make a variable for the value of box2
    var value2=parseFloat(document.getElementById("box2").value);
    //make a variable for total
    var total= value1/value2;
    //put total and output span, show the total
    document.getElementById("output").innerHTML=total;
    //put a + sign in the sign span
    document.getElementById("sign").innerHTML="<span>&#247;</span>"
}

function clear(){
    document.getElementById("")


}


</script>


</body>
</html>