Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Calcuuu

    Uploaded by

    hamadrasool168
    The document describes how to build an HTML calculator using HTML and CSS. HTML is used to define the basic structure of the calculator by creating a table with input buttons for numbers and operations. CSS styles the calculator by setting properties like colors, sizes and layout. The calculator allows performing basic math operations through clicking the buttons, and displays the result in an input field.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Calcuuu

    Uploaded by

    hamadrasool168
    5 views4 pages
    The document describes how to build an HTML calculator using HTML and CSS. HTML is used to define the basic structure of the calculator by creating a table with input buttons for numbers and operations. CSS styles the calculator by setting properties like colors, sizes and layout. The calculator allows performing basic math operations through clicking the buttons, and displays the result in an input field.

    Original Description:

    Original Title

    calcuuu

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes how to build an HTML calculator using HTML and CSS. HTML is used to define the basic structure of the calculator by creating a table with input buttons for numbers and operations. CSS styles the calculator by setting properties like colors, sizes and layout. The calculator allows performing basic math operations through clicking the buttons, and displays the result in an input field.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    5 views4 pages

    Calcuuu

    Uploaded by

    hamadrasool168
    The document describes how to build an HTML calculator using HTML and CSS. HTML is used to define the basic structure of the calculator by creating a table with input buttons for numbers and operations. CSS styles the calculator by setting properties like colors, sizes and layout. The calculator allows performing basic math operations through clicking the buttons, and displays the result in an input field.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 4

    Open In App

    GEEKSFORGEEKS

    HTML Calculator

    HTML calculator is used for performing basic mathematical operations like Addition,
    subtraction, multiplication, and division.

    You can find the live preview below, try it:

    To design the HTML calculator, we will use HTML, and CSS. HTML is used to design
    the basic structure of the calculator. CSS styles are used to apply styles on the
    calculator.

    Approach:

    Created the design with the HTML Table where first is holding the input field
    with id=”result” and the rest are filled with input button.

    With every click of the button, it displays the respective value of the button to
    the input field by using the function dis().

    myFunction() is used to set the value pressed from the keyboard to the same input
    field.

    Note: Please check this JavaScript Calculator for the complete calculator code
    including JavaScript. In this article, we have only added HTML and CSS code to
    design the calculator.

    Example:

    <!DOCTYPE html>

    <html>

    <head>

    <title>HTML Calculator</title>

    <!-- For styling -->

    <style>

    table {

    border: 1px solid black;

    margin-left: auto;

    margin-right: auto;
    }

    input[type="button"] {

    width: 100%;

    padding: 20px 40px;

    background-color: green;

    color: white;

    font-size: 24px;

    font-weight: bold;

    border: none;

    border-radius: 5px;

    input[type="text"] {

    padding: 20px 30px;

    font-size: 24px;

    font-weight: bold;

    border: none;

    border-radius: 5px;

    border: 2px solid black;

    </style>

    </head>

    <body>

    <!-- Create table -->

    <table id="calcu">

    <tr>
    <td colspan="3">

    <input type="text" id="result">

    </td>

    <td><input type="button" value="c"></td>

    </tr>

    <tr>

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

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

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

    <td><input type="button" value="/"></td>

    </tr>

    <tr>

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

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

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

    <td><input type="button" value="*"></td>

    </tr>

    <tr>

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

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

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

    <td><input type="button" value="-"></td>

    </tr>

    <tr>

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

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

    <td><input type="button" value="="></td>

    <td><input type="button" value="+"></td>

    </tr>
    </table>

    </body>

    </html>

    Output:

    

    HTML Calculator

    You might also like