<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>online calculator</title>
<style type="text/css" media="all">
@import url('https://fonts.googleapis.com/css2?family=Quantico:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@800&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Quantico', sans-serif;
}
body {
margin: 0;
background: linear-gradient(45deg, #3498db, #2980b9, #27ae60, #e67e22);
background-size: cover;
background-attachment: fixed;
height: 280vh;
}
.calculator {
display: flex;
margin: 0 50px;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 50px;
font-size: 20px;
}
fieldset {
padding: 50px 50px;
background-color: rgba(29, 135, 255, 0.582);
border-radius: 20px;
}
#answer {
background-color: #5dcae6;
height: 1.25cm;
font-size: 1cm;
border-radius: 10px;
overflow: hidden;
border: 2px solid rgb(51, 145, 233);
width: 200px;
padding: 10px 15px;
text-align: center;
}
.input input {
border: 2px solid rgb(51, 145, 233);
padding: 8px 15px;
width: 200px;
border-radius: 10px;
overflow: hidden;
text-align: center;
}
.submit {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2px;
}
.submit button {
color: white;
width: 3cm;
background: #b98400;
border-radius: 2px;
padding: 5px 10px;
border-style: none;
border: 2px solid #40fc11ec;
}
hr {
height: 5px;
background-color: #00b384;
margin: 10px 0;
}
.submit button:hover {
background-color: white;
color: black;
transition: 1.5s ease;
border-radius: 5px;
}
}
</style>
</head>
<body>
<div class="calculator">
<fieldset>
<legend>Calculator</legend>
<div id="answer">
</div>
<hr />
<div class="input">
<input type="number" id="1st number" placeholder="Enter first number">
</div>
<div class="input 2nd">
<input type="number" id="2nd number" placeholder="Enter second number">
</div>
<br />
<div class="submit">
<button onclick="sum()">Addition</button>
<button onclick="diff()">Substraction</button>
</div>
<div class="submit">
<button onclick="pro()">Product</button>
<button onclick="div()">Division</button>
</div>
<div class="submit">
<button onclick="greater()">Greater</button>
<button onclick="smaller()">Smaller</button>
</div>
<div class="submit">
<button onclick="square()">X <sup>Y</sup> </button>
<button onclick="squareroot()">X <sup>1/Y</sup></button>
</div>
</fieldset>
</div>
<script type="text/javascript" charset="utf-8">
function diff() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a-b;
document.getElementById("answer").innerHTML = c;
}
function div() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a/b;
document.getElementById("answer").innerHTML = c;
}
function sum() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a+b;
document.getElementById("answer").innerHTML = c;
}
function pro() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a*b;
document.getElementById("answer").innerHTML = c;
}
function greater() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = (a > b)?a: b;
document.getElementById("answer").innerHTML = c;
}
function smaller() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = (a < b)?a: b;
document.getElementById("answer").innerHTML = c;
}
function square() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = Math.pow(a, b);
document.getElementById("answer").innerHTML = c;
}
function squareroot() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = Math.pow(a, 1/b);
document.getElementById("answer").innerHTML = c;
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>online calculator</title>
<style type="text/css" media="all">
@import url('https://fonts.googleapis.com/css2?family=Quantico:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@800&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Quantico', sans-serif;
}
body {
margin: 0;
background: linear-gradient(45deg, #3498db, #2980b9, #27ae60, #e67e22);
background-size: cover;
background-attachment: fixed;
height: 280vh;
}
.calculator {
display: flex;
margin: 0 50px;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 50px;
font-size: 20px;
}
fieldset {
padding: 50px 50px;
background-color: rgba(29, 135, 255, 0.582);
border-radius: 20px;
}
#answer {
background-color: #5dcae6;
height: 1.25cm;
font-size: 1cm;
border-radius: 10px;
overflow: hidden;
border: 2px solid rgb(51, 145, 233);
width: 200px;
padding: 10px 15px;
text-align: center;
}
.input input {
border: 2px solid rgb(51, 145, 233);
padding: 8px 15px;
width: 200px;
border-radius: 10px;
overflow: hidden;
text-align: center;
}
.submit {
display: flex;
align-items: center;
justify-content: space-between;
margin: 2px;
}
.submit button {
color: white;
width: 3cm;
background: #b98400;
border-radius: 2px;
padding: 5px 10px;
border-style: none;
border: 2px solid #40fc11ec;
}
hr {
height: 5px;
background-color: #00b384;
margin: 10px 0;
}
.submit button:hover {
background-color: white;
color: black;
transition: 1.5s ease;
border-radius: 5px;
}
}
</style>
</head>
<body>
<div class="calculator">
<fieldset>
<legend>Calculator</legend>
<div id="answer">
</div>
<hr />
<div class="input">
<input type="number" id="1st number" placeholder="Enter first number">
</div>
<div class="input 2nd">
<input type="number" id="2nd number" placeholder="Enter second number">
</div>
<br />
<div class="submit">
<button onclick="sum()">Addition</button>
<button onclick="diff()">Substraction</button>
</div>
<div class="submit">
<button onclick="pro()">Product</button>
<button onclick="div()">Division</button>
</div>
<div class="submit">
<button onclick="greater()">Greater</button>
<button onclick="smaller()">Smaller</button>
</div>
<div class="submit">
<button onclick="square()">X <sup>Y</sup> </button>
<button onclick="squareroot()">X <sup>1/Y</sup></button>
</div>
</fieldset>
</div>
<script type="text/javascript" charset="utf-8">
function diff() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a-b;
document.getElementById("answer").innerHTML = c;
}
function div() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a/b;
document.getElementById("answer").innerHTML = c;
}
function sum() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a+b;
document.getElementById("answer").innerHTML = c;
}
function pro() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = a*b;
document.getElementById("answer").innerHTML = c;
}
function greater() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = (a > b)?a: b;
document.getElementById("answer").innerHTML = c;
}
function smaller() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = (a < b)?a: b;
document.getElementById("answer").innerHTML = c;
}
function square() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = Math.pow(a, b);
document.getElementById("answer").innerHTML = c;
}
function squareroot() {
var a,
b,
c;
a = Number(document.getElementById("1st number").value);
b = Number(document.getElementById("2nd number").value);
c = Math.pow(a, 1/b);
document.getElementById("answer").innerHTML = c;
}
</script>
</body>
</html>
Preview:
