Anja Basubas

Creator, Learner, Dreamer, Doer.

204

2

Calculator Project

JS:

function calculate() {
var num1 = Number(document.querySelector('#num1').value);
var num2 = Number(document.querySelector('#num2').value);
var operator = document.querySelector('select').value;
var show = document.querySelector('#answer');

if (operator == 'add') {
var answer = num1 + num2;
} else if (operator == 'minus') {
var answer = num1 - num2;
} else if (operator == 'multiply') {
var answer = num1 * num2;
} else {
var answer = num1 / num2;
}

show.innerHTML = answer;

};

HTML & CSS:

<!DOCTYPE html>
<html>

<head>
<title>Basic Calculator</title>
<style media="screen">

div.container {
background: #585858;
width: 500px;
padding: 20px 50px;
border-radius: 20px;
border-style: groove;
}
div#answer {
border:1px ridge #9EA3A2;
padding: 20px 50px;
width: 340px;
margin: 10px 0px;
text-align: center;
font-size: 40px;
background: #CEDFCD;
border-radius: 8px;
}

#num1, #num2 {
color: #9EA3A2;
padding: 5px;
border-radius: 8px;
border:1px ridge;
}

h1 {
text-align: center;
padding:0;
margin: 0;
}

button {
background-color: #DE722D;
padding: 1px 20px;
border-radius: 10px;
border-style: inset;
color: white;
font-size: 20px;
text-align: center;
margin: 0px;

}

</style>
</head>

<body>
<div class="container">
<h1>Basic Calculator</h1>
<br>
<input type="text" id="num1">
<select>
<option value="add">Plus</option>
<option value="minus">Minus</option>
<option value="multiply">Multiplied by</option>
<option value="divide">Divided by</option>
</select>
<input type="text" id="num2" style="color: #9EA3A2;">

<button type="button" onclick="calculate()">=</button>
<div id="answer">

</div>
</div>

<script src="calculatorMain.js" charset="utf-8"></script>
</body>

</html>

Comments

Please sign in or sign up to comment.