Scribd Logo
Upload

Welcome to Scribd!

  • Calculator

    Uploaded by

    lenovoiris3
    4 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

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

    Calculator

    Uploaded by

    lenovoiris3

    Copyright:

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

    DEPARTMENT OF INFORMATION COMMUNICATION &

    TECHNOLOGY

    Project Title: Calculator


    SUBJECT : Web Technology
    Session: 2023-24
    Submitted to: shikha ma’am
    Program & Semester BCA 1st Semester
    Group
    Members :
    Software Used: Notepad

    ABSTRACT:
    Our project name is Calculator. It is a machine which allows people to do
    math operations more easily. For example, most calculators will add,
    subtract, multiply, and divide. Some also do square roots, and more complex
    calculators can help with calculus and draw function graphs. Calculators are
    found everywhere.

    Features of the Calculator: -


    In this project, you are going to develop a calculator that will have the
    following features:

     It will perform basic arithmetic operations like addition, subtraction,


    division, and multiplication.
     It will perform decimal operations.
     The calculator will display Infinity if you try to divide any number by
    zero.
     It will not display any result in case of an invalid expression. For
    example, 5++9 will not display anything.
     Clear screen feature to clear the display screen anytime you want.
    Components of the Calculator
    The calculator consists of the following components:

     Mathematical operators: Addition (+), Subtraction (-),


    Multiplication (*), and Division (/).
     Digits and decimal button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, .
     Display screen: Displays the mathematical expression and the result.
     Clear screen button: Clears all mathematical values.
     Calculate button (=): Evaluates the mathematical expression and
    returns the result.

    Steps of building a Calculator: -

    Step 1: -

    The journey begins with the creation of the structural foundation of our
    calculator through HTML. HTML, the markup language of the web, gives
    structure to our project. Below is a snippet of the HTML code that sets the
    stage for our calculator.

    Step 2: -

    With the foundation laid, it’s time to add the visual charm that CSS
    provides. CSS brings aesthetics and layout to our calculator, making it
    visually appealing to users. Here’s a snippet of the CSS code that gives life
    to our calculator’s appearance

    Step 3: -

    JavaScript is the magic wand that imparts interactivity to our calculator. It’s
    the powerhouse that makes calculations possible at the click of a button.
    Below, we’ll dissect the code segments that give life to our calculator’s
    functionalities.
    OUTPUT

    >>>>CODE:
    <html>
    <head>
    <style>
    .calculator {
    padding: 10px;
    border-radius: 1em;
    height: 500px;
    width: 600px;
    margin: auto;
    background-color: black;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .display-box {
    font-family: 'Orbitron', sans-serif;
    font-size:20px;
    background-color: white;
    border: solid black 0.5px;
    color: black;
    border-radius: 20px;
    width: 100%;
    height: 95%;
    }

    #btn {
    font-size:20px;
    background-color: red;
    }

    input[type=button] {
    font-size:30px;
    font-family: 'Orbitron', sans-serif;
    background-color: tan;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 90%;
    outline: none;
    }

    input:active[type=button] {
    background: blue;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;

    </style>

    <title>Calculator</title>
    </head>
    <body background="C:\Dev\images\image 1.jpg">

    <table class="calculator" >


    <tr>
    <td colspan="3"> <input class="display-box" type="text" id="result" disabled />
    </td>
    <td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
    </tr>

    <tr>

    <td> <input type="button" value="1" onclick="display('1')" /> </td>


    <td> <input type="button" value="2" onclick="display('2')" /> </td>
    <td> <input type="button" value="3" onclick="display('3')" /> </td>
    <td> <input type="button" value="/" onclick="display('/')" /> </td>
    </tr>

    <tr>
    <td> <input type="button" value="4" onclick="display('4')" /> </td>
    <td> <input type="button" value="5" onclick="display('5')" /> </td>
    <td> <input type="button" value="6" onclick="display('6')" /> </td>
    <td> <input type="button" value="-" onclick="display('-')" /> </td>
    </tr>

    <tr>
    <td> <input type="button" value="7" onclick="display('7')" /> </td>
    <td> <input type="button" value="8" onclick="display('8')" /> </td>
    <td> <input type="button" value="9" onclick="display('9')" /> </td>
    <td> <input type="button" value="+" onclick="display('+')" /> </td>
    </tr>

    <tr>
    <td> <input type="button" value="." onclick="display('.')" /> </td>
    <td> <input type="button" value="0" onclick="display('0')" /> </td>
    <!-- calculate() function evaluates the mathematical expression -->
    <td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
    <td> <input type="button" value="*" onclick="display('*')" /> </td>
    </tr>

    </table>

    <script language="javascript">

    function clearScreen() {
    document.getElementById("result").value = "";
    }

    function display(value) {
    document.getElementById("result").value += value;
    }

    function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
    }

    </script>

    </body>

    </html>
    Learning Outcomes:
    After making this mini project the student will able use the :-
    a) Html
    b) CSS (Cascading Style sheet)
    c) JavaScript
    References:
    a) https://medium.com/@bhageshwaree11/building-a-basic-calculator-using-
    html-css-and-javascript-346ac49a7f58
    b) https://www.geeksforgeeks.org/html-calculator/

    You might also like