Git Product home page Git Product logo

standard-calculator's Introduction

Design of a Standard Calculator

AIM:

To design a web application for a standard calculator.

DESIGN STEPS:

Step 1:

clone into standard calculator

Step 2:

Create a project inside standard calculator

Step 3:

craete an app inside the standard calculator

Step 4:

create an template folder inside the app

Step 5:

create the app inside the template folder

Step 6:

Validate the HTML and CSS code.

Step 7:

Publish the website in the given URL.

PROGRAM :

<!DOCTYPE html>
<HTML lang="en">
    <head>
        <title>My-Standard Calculator</title>
        <style type="text/css">
        .calc{
            width: 500px;
            height: 400px;
            background-color:forestgreen;
            margin-left:auto;
            margin-right:auto;
        }
        #result{
            background-color:gold;
            text-align:center;
        }  
            
            </style>
        <script type="text/javascript">
        function calculate(args)
        {
            res = document.getElementById("result");
            expression = res.innerText;
            cmd = args.srcElement.innerText;
            if(cmd == "=")
            {
                expression = "" + eval(expression)
            }else if(cmd == "C")
            {
                expression = " "
            }
            else{
                expression = expression + cmd;
            }
            res.innerText = expression;
            // alert("CLICKED"+cmd)

        }
         var x,y,z;
            alert("WELCOME TO JAVASCRIPT PROGRAMMING");
            x = 200;
            y = 400;
            z=x+y;
            console.log("z="+z)
        </script>
    </head>
<body>
    <div class="calc">
        <div class="calc_title"></div>
    <h1>A STANDARD CALCULATOR</h1>
    <div id="result">0</div>
    <button onclick="calculate(event);">1</button>
    <button onclick="calculate(event);">2</button>
    <button onclick="calculate(event);">3</button><br>
    <button onclick="calculate(event);">4</button>
    <button onclick="calculate(event);">5</button>
    <button onclick="calculate(event);">6</button><br>
    <button onclick="calculate(event);">7</button>
    <button onclick="calculate(event);">8</button>
    <button onclick="calculate(event);">9</button><br>
    <button onclick="calculate(event);">+</button>
    <button onclick="calculate(event);">-</button>
    <button onclick="calculate(event);">*</button><br>
    <button onclick="calculate(event);">=</button>
    <button onclick="calculate(event);">C</button>
</body>
</HTML>

OUTPUT:

image

Validator

output cal

Result:

The program exexcuted successfully

standard-calculator's People

Contributors

kishore2o avatar obedotto avatar kishore22008388 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.