๐งฎโจ Simple Calculator Web App ๐ฉโจ
Check out this simple calculator web app that I built using HTML, CSS, and JavaScript! ๐
๐ก Key Features:
- Responsive design for a seamless user experience.
- Basic arithmetic operations (+ and =).
- Clear button (C) to reset the calculator.
๐ How It Works:
- Enter numbers and operators using the provided buttons.
- Press ‘=’ to see the result of your calculation.
- Use ‘C’ to clear the display and start a new calculation.
Feel free to try it out and let me know what you think! Any feedback is appreciated. ๐ค๐ฉโ๐ป
#WebDevelopment #JavaScript #HTML #CSS #CalculatorApp #Coding #Programming #WebDevJourney โจ
Exercise 1: Simple Calculator
HTML (index.html):
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”styles.css”>
<title>Simple Calculator</title>
</head>
<body>
<div class=”calculator”>
<input type=”text” id=”display” readonly>
<div class=”buttons”>
<button onclick=”clearDisplay()”>C</button>
<button onclick=”appendToDisplay(‘1’)”>1</button>
<button onclick=”appendToDisplay(‘2’)”>2</button>
<button onclick=”appendToDisplay(‘+’)”>+</button>
<!– Add more buttons as needed –>
<button onclick=”calculate()”>=</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS (styles.css):
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
text-align: center;
}
input {
width: 200px;
padding: 10px;
font-size: 18px;
}
button {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
}
JavaScript (script.js):
let displayValue = ”;
function appendToDisplay(value) {
displayValue += value;
document.getElementById(‘display’).value = displayValue;
}
function clearDisplay() {
displayValue = ”;
document.getElementById(‘display’).value = displayValue;
}
function calculate() {
try {
displayValue = eval(displayValue);
document.getElementById(‘display’).value = displayValue;
} catch (error) {
document.getElementById(‘display’).value = ‘Error’;
}
}
- let displayValue = ”;
- This line initializes a variable displayValue and assigns an empty string to it. This variable is used to store the input and result displayed on the calculator screen.
function appendToDisplay(value) { … }
- This function is responsible for appending the specified value to the displayValue variable and updating the display on the calculator screen.
- It concatenates the provided value to the existing displayValue.
- Then, it finds the HTML element with the id ‘display’ and sets its value to the updated displayValue.
function clearDisplay() { … }
- This function is used to clear the calculator display.
- It resets the displayValue variable to an empty string.
- Then, it finds the HTML element with the id ‘display’ and sets its value to the empty string.
function calculate() { … }
- This function is responsible for evaluating the mathematical expression stored in displayValue and updating the calculator display with the result.
- It uses a try-catch block to handle any potential errors that may occur during the evaluation.
- Inside the try block, it uses the eval() function to evaluate the expression in displayValue.
- If the evaluation is successful, the result is assigned back to displayValue, and the display is updated with the result.
- If an error occurs during evaluation (e.g., due to an invalid expression), the catch block sets the display to show ‘Error’.
In summary, these functions together form the core functionality of a simple calculator, allowing users to input values, perform calculations, and handle errors gracefully. The displayValue variable acts as a buffer for the input and results, and the functions manipulate it based on user interactions.