Building a Simple Scientific Calculator with JavaScript

Creating your own scientific calculator can be a fun way to sharpen your JavaScript skills. Instead of just handling addition or subtraction, we’ll expand it to include advanced operations like trigonometry, exponentiation, and logarithms.

Why Build a Calculator?

Calculators are one of the most common projects for learning programming. They combine basic concepts like:

1. Event handling
2. Mathematical functions
3. User input/output
4. UI design

By turning it into a scientific calculator, you also get exposure to Math methods in JavaScript that many developers overlook.

Setting up the HTML

Here’s a very simple structure:

<div class="calculator">
<input type="text" id="display" readonly />
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendValue('sin(')">sin</button>
<button onclick="appendValue('cos(')">cos</button>
<button onclick="appendValue('tan(')">tan</button>
<button onclick="appendValue('Math.log(')">log</button>
<button onclick="appendValue('Math.pow(')">xʸ</button>
<button onclick="appendValue('Math.sqrt(')">√</button>
<button onclick="appendValue('Math.PI')">π</button>
<button onclick="appendValue('Math.E')">e</button>
<button onclick="calculate()">=</button>
</div>
</div>


JavaScript Logic

`const display = document.getElementById('display');

function appendValue(val) {
display.value += val;
}

function clearDisplay() {
display.value = '';
}

function calculate() {
try {
display.value = eval(display.value);
} catch {
display.value = 'Error';
}
}`

Styling with CSS (Optional)

`.calculator {
width: 250px;
margin: 20px auto;
padding: 15px;
background: #1e1e2f;
border-radius: 10px;
color: #fff;
}

display {

width: 100%;
height: 40px;
font-size: 18px;
margin-bottom: 10px;
}

button {
margin: 5px;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
cursor: pointer;
}`