In this article, we will explore the creation of a visually appealing and functional 3D calculator using HTML, CSS, and JavaScript. The calculator features a sleek design with vibrant colors and a user-friendly interface, all set against a black background for enhanced aesthetics.
Design and Layout
The calculator’s layout is structured using HTML and styled with CSS to achieve its modern look. Here are the key design elements:
- Background: The calculator is placed on a black background to emphasize its vibrant buttons and display.
- Display: The calculator’s display is a rectangular box at the top, styled with a gradient and subtle shadows to give it a 3D effect.
- Buttons: The buttons are arranged in a grid layout and come in four colors: red, blue, yellow, and green. Each button has a gradient background and shadow effects to enhance the 3D appearance.
Functionality
The calculator supports basic arithmetic operations such as addition, subtraction, multiplication, and division. Below is an overview of how the functionality is implemented:
- Input Handling: Users can input numbers and operators by clicking the buttons. The display updates dynamically to reflect the current input.
- Operations: When an operator is selected, the calculator stores the current input and waits for the next number. Once the “=” button is pressed, the result is calculated and displayed.
- Clear and Delete: The “C” button clears all inputs, while the “←” button removes the last digit or operator entered.
Code Breakdown
The code has three main parts: HTML for structure, CSS for styling, and JavaScript for functionality. Below is a snippet of the code:
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<button class="button btn-gray" onclick="clearDisplay()">C</button>
<button class="button btn-gray" onclick="deleteLast()">←</button>
<button class="button btn-gray" onclick="appendOperator('/')">÷</button>
<button class="button btn-red" onclick="appendOperator('*')">x</button>
<!-- Additional buttons omitted for brevity -->
</div>
</div>
<script>
let currentInput = '';
let previousInput = '';
let operator = null;
function appendNumber(number) {
if (number === '.' && currentInput.includes('.')) return;
currentInput += number;
updateDisplay();
}
function calculateResult() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operator) {
case '+': result = prev + current; break;
case '-': result = prev - current; break;
case '*': result = prev * current; break;
case '/': result = prev / current; break;
default: return;
}
currentInput = result.toString();
operator = null;
previousInput = '';
updateDisplay();
}
</script>Conclusion
This 3D calculator combines aesthetics with functionality, providing users an engaging experience. By leveraging HTML, CSS, and JavaScript, developers can create interactive web applications that are both visually appealing and practical. Whether you’re a beginner or an experienced developer, this project is an excellent example of blending design and functionality seamlessly.
