Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

Building a Responsive Calculator Interface with HTML and CSS

October 18, 2024

HTML(calculator.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator using HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" class="calculator-screen" id="calculator-screen" disabled />

CSS(styles.css)

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}

.calculator {
width: 360px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.calculator-screen {
width: 100%;
height: 80px;
border: none;
background-color: #91bcf3;
color: #fff;
font-size: 2.4rem;
text-align: right;
padding: 0 20px; /* Combining left and right padding */
border-radius: 8px;
margin-bottom: 20px;
}

.calculator-keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

button {
height: 60px;
font-size: 1.6rem;
border: none;
border-radius: 8px;
background-color: #e0e0e0;
color: #000;
cursor: pointer;
transition: background-color 0.3s ease;
}

button.operator {
background-color: #f57c00;
color: white;
}

button.equal-sign {
background-color: #4caf50;
color: white;
grid-column: span 2;
}

button.all-clear {
background-color: #d32f2f;
color: white;
}

button:hover {
background-color: #d4d4d4;
}

button.operator:hover {
background-color: #ef6c00;
}

button.equal-sign:hover {
background-color: #388e3c;
}

button.all-clear:hover {
background-color: #c62828;
}

Explanation:

HTML:

Calculator Layout:
- The calculator is wrapped in a div with the class "calculator."
- Inside it, there's an input field (<input>) with the class calculator-screen, which displays the current calculation.
- Buttons are created using <button> elements inside a div with the class calculator-keys.
Buttons:
- The calculator has number buttons (0–9), operation buttons (+, -, *, /), an "AC" button (for clearing), a decimal button (.), and an equal (=) button.
- The buttons have different classes like operator, equal-sign, and all-clear for styling purposes.

CSS:

Layout and Centering:
- The body uses Flexbox to center the calculator both vertically and horizontally in the browser window (display: flex, justify-content: center, align-items: center).
- The calculator has a fixed width and is styled with padding and a slight shadow for a modern look.
Calculator Screen:
- The input field (.calculator-screen) is styled to have a dark background with white text, mimicking the display of a real calculator.
- The text is right-aligned so numbers appear to the right as you type.
Buttons:
- All buttons are styled to have rounded corners and a light grey background.
- Operator buttons (+, -, *, /) have an orange background (.operator).
- The equal button (=) is green and spans two columns for emphasis.
- The "AC" (all-clear) button is red to indicate it's for resetting the calculator.
- Buttons also change color when hovered to give visual feedback to the user.