StudentCodingHUB

Use programming to create innovative things.

    • new post

    Wednesday, 13 November 2019

    Home css html javascript Mini Calculator

    Mini Calculator

    , ,


    <html>
    <head>
    <style>
    .btn{
    border:2px solid #6699ff;
    width:30%;
    padding:40px 40px;
    }
    button{
    margin:10px;
    padding:8px 10px;
    border-color:#66ffff;
    cursor:pointer;
    }
    input{
    border-radius:10px;
    height:20px;
    background-color:#ccffff;
    }
    </style>
    </head>
    <body>
    Number1:<input id="num1"><br><br>
    Numbre2:<input id="num2"><br><br>
    <b>Result:</b>&nbsp&nbsp&nbsp<span id="r1">  ........</span><br><br>
    <div class="btn">
    <button onclick="sum()">+</button>
    <button onclick="sub()">-</button>
    <button onclick="div()">/</button><br><br>
    <button onclick="mul()">*</button>
    <button onclick="mood()">%</button>
    <button onclick="comp()">==</button>
    </div>
    <script>
    function sum()
    {
    var a,b,c;
    a=Number(document.getElementById("num1").value);
    b=Number(document.getElementById("num2").value);
    c=a+b;
    document.getElementById("r1").innerHTML=c;
    }
    function sub()
    {
    var a,b,c;
    a=Number(document.getElementById("num1").value);
    b=Number(document.getElementById("num2").value);
    c=a-b;
    document.getElementById("r1").innerHTML=c;
    }
    function div()
    {
    var a,b,c;
    a=Number(document.getElementById("num1").value);
    b=Number(document.getElementById("num2").value);
    c=a/b;
    document.getElementById("r1").innerHTML=c;
    }
    function mul()
    {
    var a,b,c;
    a=Number(document.getElementById("num1").value);
    b=Number(document.getElementById("num2").value);
    c=a*b;
    document.getElementById("r1").innerHTML=c;
    }
    function mood()
    {
    var a,b,c;
    a=Number(document.getElementById("num1").value);
    b=Number(document.getElementById("num2").value);
    c=a%b;
    document.getElementById("r1").innerHTML=c;
    }
    function comp()
    {
    var a,b,c;
    a=Number(document.getElementById("num1").value);
    b=Number(document.getElementById("num2").value);
    c=a==b;
    document.getElementById("r1").innerHTML=c;
    }
    </script>
    </body>
    </html>
    Read more
    Labels: , ,

    No comments:

    Post a Comment