Header Ads

  • Breaking News

    Calculator App code by Abuzar Ghaffari

    Calculator App code by Abuzar Ghaffari

    Today I post calculator app code that I have been design this calculator app code. 
    • First of all create new notepad 
    • Open notepad 
    • Copy the below code and paste into notepad
    • Code is starting
    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <h>Calculator App Design by Abuzar Ghaffari</h>
        <title>Calculator by Abuzar Ghaffari</title>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no' />
        <style>
            body {
                font-family: Verdana, sans-serif;
                font-size: 0.8em;
                margin: 0px;
                background: Green;
            }

            nav, section, article {
                margin: 5px;
                padding: 8px;
            }

            #content {
                text-align: center;
            }

            header, footer {
                background-color: Red;
                color: white;
                padding: 5px;
                margin: 0;
            }

            h1 {
                text-align: center;
            }

            button {
                width: 60px;
                text-align: center;
                font-size: 35px;
                background-color: white;
                color: black;
                border: cornflowerblue solid 1px;
                box-shadow:1px 2px 3px 1px black;
                text-shadow:1px 1px 3px black;
            }

            input {
                width: 250px;
                font-size: 30px;
                background-color: white;
                color: black;
                border: cornflowerblue solid 1px;
                text-align: right;
                box-shadow:1px 2px 3px 1px black;
                text-shadow:1px 1px 3px black;
            }

            nav ul {
                margin: 0;
                padding: 0;
            }

                nav ul li {
                    display: inline;
                    margin: 5px;
                }
        </style>
    </head>
    <body>
        <!-- <header>
           <h1>Calculator App</h1>
        </header> -->
        <nav>
            <!--<ul>
                <li><a href='#'>Navigation 1</a></li>
                <li><a href='#'>Navigation 2</a></li>
                <li><a href='#'>Navigation 3</a></li>
            </ul>-->
        </nav>
        <section>
            <article>
                <div id='content'>
                    <div id='content-app'>
                        <input type='text' id='field1' readonly value='0' />
                        <br /><br />
                        <button onclick='writeNumber(this)' id='n1'>1</button>
                        <button onclick='writeNumber(this)' id='n2'>2</button>
                        <button onclick='writeNumber(this)' id='n3'>3</button>
                        <button onclick='writeNumber(this)' id='n4'>4</button>
                        <br /><br />
                        <button onclick='writeNumber(this)' id='n5'>5</button>
                        <button onclick='writeNumber(this)' id='n6'>6</button>
                        <button onclick='writeNumber(this)' id='n7'>7</button>
                        <button onclick='writeNumber(this)' id='n8'>8</button>
                        <br /><br />
                        <button onclick='writeNumber(this)' id='n9'>9</button>
                        <button onclick='writeNumber(this)' id='n0'>0</button>
                        <button onclick='setDecimal(this,true)' id='dec'>.</button>
                        <button onclick='setOperator(this)' id='sum'>+</button>
                        <br /><br />
                        <button onclick='setOperator(this)' id='sustract'>-</button>
                        <button onclick='setOperator(this)' id='multi'>*</button>
                        <button onclick='setOperator(this)' id='divide'>/</button>
                        <button onclick='cleartxt()' id='C'>C</button>
                        <br /><br />
                        <button onclick='calculate()' id='calcular' style='width:190px'>=</button>
                        <button onclick='removeLastNumber()' id='removeLast'><--</button>
                    </div>
                </div>
                <br />
                <br /><br />
            </article>
        </section>
        <!--   <footer>
               <p>&copy; 2015 App Name . All rights reserved.</p>
           </footer> -->
        <script>
    function writeNumber(elementId){
         var outputValueTo = document.getElementById('field1');
           
            if(outputValueTo.value =='0' || outputValueTo.value =='Syntax error'){
                outputValueTo.value  =elementId.textContent;
            }else{

                outputValueTo.value  +=elementId.textContent;
            }
    }

    function cleartxt(){
        document.getElementById('field1').value='0';
        document.getElementById('dec').disabled=false;
    }

    function setOperator(elementId){
        var outputValueTo = document.getElementById('field1');
        if(outputValueTo.value =='0' || outputValueTo.value =='Syntax error'){
           outputValueTo.value='0';
        }else{
           outputValueTo.value  +=elementId.textContent;
           document.getElementById('dec').disabled=false;
    }
    }
    function setDecimal(elementId,status){
        var outputValueTo = document.getElementById('field1');
        outputValueTo.value  +=elementId.textContent;
        document.getElementById('dec').disabled=status;
    }
    function calculate(){

    try {

        var field1txt=document.getElementById('field1');
        if (field1txt.value !='') {
            var calculateResult=eval(field1txt.value);
            field1txt.value=calculateResult;
        }
    }
    catch(err) {

    field1txt.value='Syntax error';

     }

    }

            function removeLastNumber()
            {

                var field1txt = document.getElementById('field1');

                if (field1txt.value.length == 1 || field1txt.value == '0' || field1txt.value == 'Syntax error')
                {
                    field1txt.value = '0';
                    document.getElementById('dec').disabled = false;
                }
                else {
                    field1txt.value = field1txt.value.substring(0, field1txt.value.length - 1);
                }
     }
        </script>
    <footer>
    Design by Abuzar Ghaffari
     </footer>
    </body>
    </html> 

    Now Click on file in notepad than click on Save As...
    now save this notepad  calculator.html 
    in filename Paste the above red color words and paste it now open ad enjoy..

    No comments

    We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

    Post Top Ad

    Post Bottom Ad