Scribd Logo
Upload

Welcome to Scribd!

  • Create A JavaScript Calculator Using The JavaScript

    Uploaded by

    MCC MOTOR
    14 views6 pages
    The document provides code to design a JavaScript calculator using HTML, CSS, and JavaScript. The code includes the HTML structure and CSS styling for the calculator interface, and JavaScript functions to handle number button clicks, the clear button, and evaluating expressions when the equals button is clicked.

    Original Description:

    Original Title

    Create a JavaScript Calculator using the JavaScript

    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
    The document provides code to design a JavaScript calculator using HTML, CSS, and JavaScript. The code includes the HTML structure and CSS styling for the calculator interface, and JavaScript functions to handle number button clicks, the clear button, and evaluating expressions when the equals button is clicked.

    Copyright:

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

    Create A JavaScript Calculator Using The JavaScript

    Uploaded by

    MCC MOTOR
    The document provides code to design a JavaScript calculator using HTML, CSS, and JavaScript. The code includes the HTML structure and CSS styling for the calculator interface, and JavaScript functions to handle number button clicks, the clear button, and evaluating expressions when the equals button is clicked.

    Copyright:

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

    Create a JavaScript Calculator using the JavaScript, HTML and

    CSS programming languages.

    1. <html lang = "en">  
    2. <head>  
    3. <title> JavaScript Calculator </title>  
    4.   
    5. <style>  
    6. h1 {  
    7.     text-align: center;  
    8.     padding: 23px;  
    9.     background-color: skyblue;  
    10.     color: white;  
    11.     }  
    12.   
    13. #clear{  
    14. width: 270px;  
    15. border: 3px solid gray;  
    16.     border-radius: 3px;  
    17.     padding: 20px;  
    18.     background-color: red;  
    19. }  
    20.   
    21. .formstyle  
    22. {  
    23. width: 300px;  
    24. height: 530px;  
    25. margin: auto;  
    26. border: 3px solid skyblue;  
    27. border-radius: 5px;  
    28. padding: 20px;  
    29. }  
    30.   
    31.   
    32.   
    33. input  
    34. {  
    35. width: 20px;  
    36. background-color: green;  
    37. color: white;  
    38. border: 3px solid gray;  
    39.     border-radius: 5px;  
    40.     padding: 26px;  
    41.     margin: 5px;  
    42.     font-size: 15px;  
    43. }  
    44.   
    45.   
    46. #calc{  
    47. width: 250px;  
    48. border: 5px solid black;  
    49.     border-radius: 3px;  
    50.     padding: 20px;  
    51.     margin: auto;  
    52. }  
    53.   
    54. </style>  
    55.   
    56. </head>  
    57. <body>  
    58. <h1> Calculator Program in JavaScript </h1>  
    59. <div class= "formstyle">  
    60. <form name = "form1">  
    61.       
    62.     <!-- This input box shows the button pressed by the user in calculator. -->  
    63.   <input id = "calc" type ="text" name = "answer"> <br> <br>  
    64.   <!-- Display the calculator button on the screen. -->  
    65.   <!-- onclick() function display the number prsses by the user. -->  
    66.   <input type = "button" value = "1" onclick = "form1.answer.value += '1' ">  
    67.   <input type = "button" value = "2" onclick = "form1.answer.value += '2' ">  
    68.   <input type = "button" value = "3" onclick = "form1.answer.value += '3' ">  
    69.    <input type = "button" value = "+" onclick = "form1.answer.value += '+' ">  
    70.   <br> <br>  
    71.     
    72.   <input type = "button" value = "4" onclick = "form1.answer.value += '4' ">  
    73.   <input type = "button" value = "5" onclick = "form1.answer.value += '5' ">  
    74.   <input type = "button" value = "6" onclick = "form1.answer.value += '6' ">  
    75.   <input type = "button" value = "-" onclick = "form1.answer.value += '-' ">  
    76.   <br> <br>  
    77.     
    78.   <input type = "button" value = "7" onclick = "form1.answer.value += '7' ">  
    79.   <input type = "button" value = "8" onclick = "form1.answer.value += '8' ">  
    80.   <input type = "button" value = "9" onclick = "form1.answer.value += '9' ">  
    81.   <input type = "button" value = "*" onclick = "form1.answer.value += '*' ">  
    82.   <br> <br>  
    83.     
    84.     
    85.   <input type = "button" value = "/" onclick = "form1.answer.value += '/' ">  
    86.   <input type = "button" value = "0" onclick = "form1.answer.value += '0' ">  
    87.     <input type = "button" value = "." onclick = "form1.answer.value += '.' ">  
    88.     <!-- When we click on the '=' button, the onclick() shows the sum results on the c
    alculator screen. -->  
    89.   <input type = "button" value = "=" onclick = "form1.answer.value = eval(form1.ans
    wer.value) ">  
    90.   <br>   
    91.   <!-- Display the Cancel button and erase all data entered by the user. -->  
    92.   <input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' " id= 
    "clear" >  
    93.   <br>   
    94.     
    95. </form>  
    96. </div>  
    97. </body>  
    98. </html>  

    Code to design Calculator


    <html>
    <head>
    <script>

    function d(val){
    document.getElementById('result').value+=val;
    }
    function solve(){
    var value1=
    document.getElementById('result').value;
    let res = eval(value1);
    document.getElementById('result').value=res;
    }
    functioncleard(){
    document.getElementById('result').value="";
    }

    </script>

    <style type="text/css">
    body,html{
    matgin:0px;
    }
    input[type="button"]{
    border:none;
    width:100%;
    outline: none;
    }
    #wrap
    {
    margin:10%;
    }
    </style>
    </head>
    <body>
    <div id='wrap'>
    <table border="1">
    <tr>
    <td colspan="3"><input type="text" id="result"
    readonly></td>
    <td><input type="button" value="C"
    onClick="cleard()"></td>
    </tr>
    <tr>
    <td><input type="button" value="1"
    onClick="d('1')"></td>
    <td><input type="button" value="2"
    onClick="d('2')"></td>
    <td><input type="button" value="3"
    onClick="d('3')"></td>
    <td><input type="button" value="+"
    onClick="d('+')"></td>
    </tr>
    <tr>
    <td><input type="button" value="4"
    onClick="d('4')"></td>
    <td><input type="button" value="5"
    onClick="d('5')"></td>
    <td><input type="button" value="6"
    onClick="d('6')"></td>
    <td><input type="button" value="-"
    onClick="d('-')"></td>
    </tr>
    <tr>
    <td><input type="button" value="7"
    onClick="d('7')"></td>
    <td><input type="button" value="8"
    onClick="d('8')"></td>
    <td><input type="button" value="9"
    onClick="d('9')"></td>
    <td><input type="button" value="/"
    onClick="d('/')"></td>
    </tr>
    <tr>
    <td><input type="button" value="*"
    onClick="d('*')"></td>
    <td><input type="button" value="0"
    onClick="d('0')"></td>
    <td><input type="button" value="."
    onClick="d('.')"></td>
    <td><input type="button" value="="
    onClick="solve()"></td>
    </tr>
    </table>
    </div>
    </body>
    </html>

    You might also like