Sun. Feb 16th, 2020

Host your Website

Read and learn

tutorial Design a Calculator with accurate result using Html,CSS and JavaScript

1 min read

2 thoughts on “tutorial Design a Calculator with accurate result using Html,CSS and JavaScript

  1. Help: Don't work

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>

    body {

    margin: 0;

    padding: 0;

    background-image: -moz-radial-gradient(center, circle closest-corner, #353863 0%, #000 100%);

    background-image: -o-radial-gradient(center, circle closest-corner, #353863 0%, #000 100%);

    background-image: -webkit-radial-gradient(center, circle closest-corner, #353863 0%, #000 100%);

    -webkit-user-select: none;

    -ms-user-select: none;

    -moz-user-select: none;

    -o-user-select: none;

    user-select: none;

    }

    .calculator {

    width: 240px;

    height: auto;

    margin: 3%auto;

    background: #ccc;

    border-radius: 20px;

    -moz-box-shadow: inset 0 0 12px #fff,

    inset 0px 1px #e6e6e6, 0 1px 1px #323643,

    inset 0px 1px #7b839b, 0 2px 5px rgba(0, 0, 0, 0.5);

    -webkit-box-shadow: inset 0 0 12px #fff,

    inset 0px 1px #e6e6e6, 0 1px 1px #323643,

    inset 0px 1px #7b839b, 0 2px 5px rgba(0, 0, 0, 0.5);

    box-shadow: inset 0 0 12px #fff,

    inset 0px 1px #e6e6e6, 0 1px 1px #323643,

    inset 0px 1px #7b839b, 0 2px 5px rgba(0, 0, 0, 0.5);

    }

    .screen {

    margin: 20px 0px 0px 12px;

    padding-right: 9px;

    height: 54px;

    width: 83%;

    background: #858585;

    text-align: right;

    border-radius: 6px;

    border: 1px solid #6b6b6b;

    font-size: 26px;

    font: "Trebuchet MS", arial, helvetica, sans-serif;

    -webkit-box-shadow: inset 0 0 10px #333,

    inset 0px 1px 1px #0a0b0d, 0 1px #e6e6e6;

    -moz-box-shadow: inset 0 0 10px #333,

    inset 0px 1px 1px #0a0b0d, 0 1px #e6e6e6;

    box-shadow: inset 0 0 10px #000,

    inset 0px 1px 1px #0a0b0d, 0 1px #e6e6e6;

    }

    .screen:focus {

    outline: none;

    }

    .buttons {

    width: 220px;

    margin: 12px;

    }

    .buttons button {

    height: 45px;

    width: 45px;

    padding: 0;

    margin: 0px 0px 10px 5px;

    border: 1px solid #333;

    border-radius: 6px;

    color: #ccc;

    font: "Trebuchet MS", arial, helvetica, sans-serif;

    line-height: 45px;

    -webkit-box-shadow: inset 0 0 10px #666,

    inset 0px 1px #bcd6ff, 0 1px 1px #323643;

    -moz-box-shadow: inset 0 0 10px #666,

    inset 0px 1px #bcd6ff, 0 1px 1px #323643;

    box-shadow: inset 0 0 10px #666,

    inset 0px 1px #bcd6ff, 0 1px 1px #323643;

    background: #333

    }

    .buttons:button:active {

    color: #fff;

    border: 1px solid #333;

    -moz-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    -webkit-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    font-size: 16px;

    font-weight: bold;

    }

    #clear {

    background: #d02200;

    border: 1px solid #d02200;

    -moz-box-shadow: inset 0 0 10px #f63,

    inset 0px 1px #bcd6ff, 0 1px 1px #323643;

    -webkit-box-shadow: inset 0 0 10px #f63,

    inset 0px 1px #bcd6ff, 0 1px 1px #323643;

    box-shadow: inset 0 0 10px #f63,

    inset 0px 1px #bcd6ff, 0 1px 1px #323643;

    font-size: 16px;

    font-weight: bold;

    }

    #clear:active {

    border: 1px solid #d02200;

    -moz-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    -webkit-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    }

    #equal {

    width: 100px;

    background: #026;

    border: 1px solid #026;

    -moz-box-shadow: inset 0 1px 1px #069, 0px 1px #E6E6E6;

    -webkit-box-shadow: inset 0 1px 1px #069, 0px 1px #E6E6E6;

    box-shadow: inset 0 1px 1px #069, 0px 1px #E6E6E6;

    font-size: 16px;

    font-weight: bold;

    }

    #equal:active {

    border: 1px solid #039;

    -moz-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    -webkit-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    }

    #minus,

    #plus,

    #divide,

    #multiply {

    background: #036;

    border: 1px solid #036;

    -moz-box-shadow: inset 0 1px 1px #069, 0px 1px #E6E6E6;

    -webkit-box-shadow: inset 0 1px 1px #069, 0px 1px #E6E6E6;

    box-shadow: inset 0 1px 1px #069, 0px 1px #E6E6E6;

    font-size: 16px;

    font-weight: bold;

    }

    #minus:active,

    #plus:active,

    #divide:active,

    #multiply:active {

    border: 1px solid #039;

    -moz-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    -webkit-box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    box-shadow: inset 0 1px 1px #0A0B0D, 0px 1px #E6E6E6;

    }

    </style>

    <title>Document</title>

    </head>

    <body>

    <div class="calculator">

    <input class="screen" id="screen" value="0" />

    <div class="buttons">

    <button id="clear" value="0">C</button>

    <button id="backspace" value="◄">&#8592;</button>

    <button id="sign" value="-+">-+</button>

    <button id="divide" value="/">/</button>

    <button class="digit" value="7">7</button>

    <button class="digit" value="8">8</button>

    <button class="digit" value="9">9</button>

    <button id="multiply" value="*">X</button>

    <button class="digit" value="4">4</button>

    <button class="digit" value="5">5</button>

    <button class="digit" value="6">6</button>

    <button id="minus" value="-">-</button>

    <button class="digit" value="1">1</button>

    <button class="digit" value="2">2</button>

    <button class="digit" value="3">3</button>

    <button id="plus" value="+">+</button>

    <button class="digit" value="0">0</button>

    <button class="digit" value=".">.</button>

    <button id="equal" value="=">=</button>

    </div>

    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script&gt;

    <script>

    var memory = 0;

    var memorycalc;

    var c = false;

    var flag = false;

    var screen = function (p) {

    if (p == '.' && flag == true) {

    return;

    }

    if (c == true) {

    $('#screen').val('');

    c = false

    }

    var r = $('#screen').val('') + p;

    if (p == '.') {

    flag = true;

    } else {

    r = r * 1;

    }

    $('#screen').val('');

    }

    var calculate = function (p) {

    if (memory) {

    result();

    }

    flag = false;

    c = true;

    memory = $('#screen').val('');

    memorycalc = p;

    }

    $('#clear').click(function () {

    memory = 0;

    $('#screen').val('');

    });

    $('#sign').click(function () {

    $('#screen').val($('#screen').val() * -1);

    });

    $('#backspace').click(function () {

    var len = $('#screen').val().length;

    $('#screen').val($('#screen').val().substring(0, len – 1));

    if ($('#screen').val().length == 0)

    $('#screen').val(0);

    });

    var result = function () {

    if (memory == 0)

    return;

    c = true

    var r;

    switch (memorycalc) {

    case '+':

    r = memory + $('#screen').val();

    break;

    case '-':

    r = memory – $('#screen').val();

    break;

    case '*':

    r = memory * $('#screen').val();

    break;

    case '/':

    r = memory / $('#screen').val();

    break;

    }

    screen(r);

    c = true;

    flag = false;

    memory = 0;

    };

    $('.digit').click(function (e) {

    screen(e.target.value);

    });

    $('#divide, #multiply, #minus, #plus').click(function (e) {

    calculate(e.target.value);

    });

    $('#equal').click(function () {

    result();

    });

    </script>

    </body>

    </html>

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.