Java Script calculator
Task: make a simple calculator
Java Script code:
function getValues() {
let firstValue = document.getElementById("first").value;
let secondValue = document.getElementById("second").value;
return ({ firstValue, secondValue });
}
function plus() {
const { firstValue, secondValue } = getValues();
document.getElementById("plus").innerHTML = Number(firstValue) + Number(secondValue);
}
function multiplication() {
const { firstValue, secondValue } = getValues();
document.getElementById("multiplication").innerHTML = Number(firstValue) * Number(secondValue);
}
function subtraction() {
const { firstValue, secondValue } = getValues();
document.getElementById("subtraction").innerHTML = Number(firstValue) - Number(secondValue);
}
function division() {
const { firstValue, secondValue } = getValues();
if (firstValue !== "" && secondValue !== "") {
document.getElementById("division").innerHTML = Number(firstValue) / Number(secondValue);
}
}
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrapper">
<div class="form-wrapper">
<div class="row">
<div class="text-item" style="width: 100px;">First number:</div>
<input class="styled-input" id="first" type="number" value="">
</div>
<div class="row">
<div class="text-item">Second number:</div>
<input class="styled-input" id="second" type="number" value="">
</div>
<div class="divider"></div>
<div class="row">
<button class="btn" onclick="plus()">Plus</button>
<div class="result-item" id="plus"></div>
</div>
<div class="row">
<button class="btn" onclick="subtraction()">Minus</button>
<div class="result-item" id="subtraction"></div>
</div>
<div class="row">
<button class="btn" onclick="multiplication()">Multiply</button>
<div class="result-item" id="multiplication"></div>
</div>
<div class="row">
<button class="btn" onclick="division()">Divide</button>
<div class="result-item" id="division"></div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>Result
