8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Blog

Blog Details

Building a Responsive Calculator Interface with HTML and CSS

Building a Responsive Calculator Interface with HTML and CSS

October 15, 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 />

 

        <div class="calculator-keys">

            <button type="button" class="operator" value="+">+</button>

            <button type="button" class="operator" value="-">-</button>

            <button type="button" class="operator" value="*">&times;</button>

            <button type="button" class="operator" value="/">&divide;</button>

 

            <button type="button" value="9">9</button>

            <button type="button" value="8">8</button>

            <button type="button" value="7">7</button>

 

            <button type="button" value="6">6</button>

            <button type="button" value="5">5</button>

            <button type="button" value="4">4</button>

 

            <button type="button" value="3">3</button>

            <button type="button" value="2">2</button>

            <button type="button" value="1">1</button>

 

            <button type="button" value="0">0</button>

            <button type="button" value=".">.</button>

            <button type="button" class="all-clear" value="all-clear">AC</button>

            <button type="button" class="equal-sign operator" value="=">=</button>

        </div>

    </div>

</body>

</html>

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-right: 20px;

    padding-left: 20px;

    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:

  1. 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.

  2. 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:

  1. 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.

  2. 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.

  3. 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.

Categories

Recent post

Building a Responsive Calculator Interface with HTML and CSS
October 15, 2024
Building a Responsive Calculator Interface with HTML and CSS
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
October 14, 2024
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
How I Designed My Resume: A Project in HTML and CSS
October 14, 2024
How I Designed My Resume: A Project in HTML and CSS
Inserting and Styling Images in HTML: Best Practices for Beginners
October 14, 2024
Inserting and Styling Images in HTML: Best Practices for Beginners

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Building a Responsive Calculator Interface with HTML and CSS
Mastering SDET Skills: Your Career Guide with ParamClasses in Raipur
How I Designed My Resume: A Project in HTML and CSS
Inserting and Styling Images in HTML: Best Practices for Beginners

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO