Calculator Tools Calculator Tools
Create

Fun Quiz App - Test Your Knowledge!

Nov 5, 2025

About this app

Interactive quiz app to test your knowledge on various topics with engaging UI. Challenge yourself and your friends!

Scientific Calculator - Perform Advanced Calculations! 🔢 Scientific Calculator Calculate Clear

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Scientific Calculator - Perform Advanced Calculations!</title>
<meta name="description" content="An interactive scientific calculator for performing advanced mathematical calculations with an engaging interface.">
<meta name="keywords" content="calculator, scientific, math, mathematics, interactive, evaluate, equations">

<script type="text/javascript">
try {
function calculate() {
const input = document.getElementById("expression").value;
try {
const result = eval(input);
document.getElementById("result").textContent = "Result: " + result;
} catch (error) {
document.getElementById("result").textContent = "Error: Invalid Expression";
}
}

function clearInput() {
document.getElementById("expression").value = "";
document.getElementById("result").textContent = "";
}

} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(135deg, #00c6ff, #0072ff);
color: white;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

#calculator {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

input[type="text"] {
height: 50px;
width: 100%;
font-size: 24px;
text-align: center;
margin-bottom: 20px;
border-radius: 5px;
border: none;
background: #ffffff;
color: #333;
}

button {
width: calc(25% - 10px);
height: 60px;
margin: 5px;
font-size: 20px;
border-radius: 5px;
border: none;
background: #ff4081;
color: white;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background: #ff2b75;
}

#result {
margin-top: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div id="calculator">
<h1>🔢 Scientific Calculator</h1>
<input type="text" id="expression" placeholder="Enter expression (e.g. 2+2)" />
<div>
<button onclick="calculate()">Calculate</button>
<button onclick="clearInput()">Clear</button>
</div>
<div id="result"></div>
</div>
</body>
</html>