Designing a calculator using HTML and JavaScript
/*
- Set up the HTML structure: Create a basic HTML structure for your calculator, including a container element and elements for the display screen, buttons, and other elements.
- Style the calculator: Use CSS to style the calculator and give it a visually appealing appearance. You can use a framework like Bootstrap or create your own styles.
- Add functionality with JavaScript: Use JavaScript to add functionality to the calculator. You can do this by using event listeners to listen for clicks on the buttons, and using JavaScript functions to perform the calculations.
- Implement the calculator's logic: Write the logic for the calculator's operations, such as addition, subtraction, multiplication, and division. You can use JavaScript's built-in math functions to perform these operations.
- Test and debug the calculator: Test the calculator to make sure it is working correctly and fix any errors or bugs you encounter.
*/
Program:
<div id="calculator">
<div id="display">0</div>
<button class="number" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>
<button class="operator" value="/">÷</button>
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="operator" value="*">×</button>
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="operator" value="-">-</button>
<button class="number" value="0">0</button>
<button class="operator" value=".">.</button>
<button class="operator" value="=">=</button>
<button class="operator" value="+">+</button>
</div>
<style>
#calculator {
width: 300px;
margin: 0 auto;
text-align: center;
}
#display {
width: 100%;
background: #ddd;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
font-size: 2em;
}
button {
width: 25%;
height: 60px;
background: #fff;
border: none;
font-size: 1.5em;
float: left;
margin: 0;
padding: 0;
cursor: pointer;
}
button.operator {
background: #eee;
}
</style>
<script>
const calculator = document.getElementById('calculator');
const display = document.getElementById('display');
let firstNumber = null;
let operator = null;
let secondNumber = null;
let result = null;
calculator.addEventListener('click', event => {
const { target } = event;
if (target.matches('.number')) {
inputNumber(target.value);
} else if (target.matches('.operator')) {
inputOperator(target.value);
}
});
function inputNumber(number) {
if (operator) {
secondNumber = secondNumber === null ? number : secondNumber + number;
display.textContent = secondNumber;
} else {
firstNumber = firstNumber === null ? number : firstNumber + number;
display.textContent = firstNumber;
}
}
function inputOperator(op) {
if (op === '.') {
if (operator) {
secondNumber += '.';
} else {
firstNumber += '.';
}
display.textContent = operator ? secondNumber : firstNumber;
} else if (op === '=') {
if (operator && secondNumber) {
result = eval(firstNumber + operator + secondNumber);
display.textContent = result;
firstNumber = result;
secondNumber = null;
operator = null;
}
} else {
if (firstNumber && operator && secondNumber) {
result = eval(firstNumber + operator + secondNumber);
firstNumber = result;
secondNumber = null;
}
operator = op;
display.textContent = operator;
}
}
</script>
Output:
Comments
Post a Comment