“Excited to share our latest learning project: a scientific calculator! Dive into the world of programming as we explore complex mathematical concepts and build a feature-rich calculator from scratch. Stay tuned for insights, challenges, and lessons learned along the way!”
ScientificCalculator.html
<template>
<div class="calculator">
<lightning-layout>
<lightning-layout-item size="6" padding="around-small">
<lightning-input type="text" label="Result" value={result} disabled></lightning-input>
</lightning-layout-item>
<div class="buttons">
<lightning-layout-item size="6" padding="around-small">
<div class="button-row">
<lightning-button-group>
<lightning-button label="7" onclick={handleButtonClick}></lightning-button>
<lightning-button label="8" onclick={handleButtonClick}></lightning-button>
<lightning-button label="9" onclick={handleButtonClick}></lightning-button>
<lightning-button label="/" onclick={handleButtonClick}></lightning-button>
</lightning-button-group>
</div>
<div class="button-row">
<lightning-button-group>
<lightning-button label="4" onclick={handleButtonClick}></lightning-button>
<lightning-button label="5" onclick={handleButtonClick}></lightning-button>
<lightning-button label="6" onclick={handleButtonClick}></lightning-button>
<lightning-button label="-" onclick={handleButtonClick}></lightning-button>
</lightning-button-group>
</div>
<div class="button-row">
<lightning-button-group>
<lightning-button label="1" onclick={handleButtonClick}></lightning-button>
<lightning-button label="2" onclick={handleButtonClick}></lightning-button>
<lightning-button label="3" onclick={handleButtonClick}></lightning-button>
<lightning-button label="+" onclick={handleButtonClick}></lightning-button>
</lightning-button-group>
</div>
<div class="button-row">
<lightning-button-group>
<lightning-button label="0" onclick={handleButtonClick}></lightning-button>
<lightning-button label="." onclick={handleButtonClick}></lightning-button>
<lightning-button label="C" onclick={clearResult}></lightning-button>
<lightning-button label="=" onclick={calculateResult}></lightning-button>
</lightning-button-group>
</div>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<div class="button-row">
<lightning-button-group>
<lightning-button label="sin" onclick={handleTrigFunction}></lightning-button>
<lightning-button label="cos" onclick={handleTrigFunction}></lightning-button>
<lightning-button label="tan" onclick={handleTrigFunction}></lightning-button>
<lightning-button label="^" onclick={handleButtonClick}></lightning-button>
</lightning-button-group>
</div>
</lightning-layout-item>
</div>
</lightning-layout>
</div>
</template>ScientificCalculator.js
import { LightningElement, track } from 'lwc';
export default class ScientificCalculator extends LightningElement {
@track result = '';
handleButtonClick(event) {
const buttonValue = event.target.label;
this.result += buttonValue;
}
clearResult() {
this.result = '';
}
calculateResult() {
try {
this.result = eval(this.result);
} catch (error) {
this.result = 'Error';
}
}
handleTrigFunction(event) {
const trigFunction = event.target.label;
const angle = parseFloat(prompt(`Enter the angle in degrees for ${trigFunction}`));
if (!isNaN(angle)) {
const radians = (angle * Math.PI) / 180;
switch (trigFunction) {
case 'sin':
this.result = Math.sin(radians).toFixed(1);
break;
case 'cos':
this.result = Math.cos(radians).toFixed(1);
break;
case 'tan':
this.result = Math.tan(radians).toFixed(1);
break;
default:
break;
}
} else {
this.result = 'Invalid input';
}
}
}
ScientificCalculator.css
.calculator {
max-width: 400px;
margin: auto;
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.lightning-input {
margin-bottom: 16px;
font-size: 1.5em;
text-align: right;
}
.buttons {
display: flex;
flex-direction: column;
}
.button-row {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.lightning-button {
font-size: 1.2em;
padding: 15px;
flex: 1;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.lightning-button:hover {
background-color: #ccc;
}
/* Optional: Add styling for different button types */
.lightning-button[onclick*=handleTrigFunction] {
background-color: #4caf50; /* Green */
color: white;
}
.lightning-button[onclick*=handleButtonClick] {
background-color: #008CBA; /* Blue */
color: white;
}
.lightning-button[onclick*=clearResult] {
background-color: #f44336; /* Red */
color: white;
}
.lightning-button[onclick*=calculateResult] {
background-color: #4CAF50; /* Green */
color: white;
}
