Calculatrice style01

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4 and CCS3 Product Cards with Transition  | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class='container'>
        <div id='calculator'>
      
          <!-- TITLE -->
      
          <div id='title' class='text-center'>
            <h5><b>ELECTRONIC CALCULATOR</b></h5>
          </div>
      
          <!-- ENTRY BOX -->
      
          <div id='entrybox' class='text-right'>
            <div id='entry'>
              <p id='answer'>0</p>
            </div>
            <div id='history'>
              <p>0</p>
            </div>
          </div>
      
          <!-- BUTTONS -->
      
          <div id='buttons'>
      
            <button class='red' value='ac'>AC</button>
            <button class='red' value='ce'>CE</button>
            <button value='/'>&divide;</button>
            <button value='*'>x</button>
      
            <button value='7'>7</button>
            <button value='8'>8</button>
            <button value='9'>9</button>
            <button value='-'>-</button>
      
            <button value='4'>4</button>
            <button value='5'>5</button>
            <button value='6'>6</button>
            <button value='+'>+</button>
      
      
            <button value='1'>1</button>
            <button value='2'>2</button>
            <button value='3'>3</button>
            <button class='invisible'>N</button>
      
            <button id='zeroButton' value='0'>0</button>
            <button value='.'>.</button>
            <button id='equalButton' value='='>=</button>
      
          </div>
          <!-- end buttons -->
          <div id='tester'></div>
        </div>
        <!-- end calculator -->
      </div>
      <!-- end container -->



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
  <script src="script.js"></script>  
</body>
</html>

body {
    font-family: 'Orbitron', sans-serif;
    background-color: #818181;
  }
  
  #calculator {
    height: 410px;
    width: 300px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    background-color: #dfd8d0;
    border: 2px solid #908b85;
    border-radius: 20px;
    box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
  }
  
  #title {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  #entrybox {
    width: 85%;
    height: 65px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #b4b39d;
    border-radius: 6px;
    background-color: #c3c2ab;
  }
  
  #entry {
    margin-right: 10px;
    font-size: 35px;
  }
  
  #buttons {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    display: inline-block;
    width: 280px;
    height: auto;
    margin-top: 15px;
    margin-left: 15px;
  }
  
  button {
    border-radius: 8px;
    border: none;
    background-color: #3a3a3a;
    margin: 0 4px 10px 8px;
    height: 40px;
    width: 50px;
    box-shadow: 0px 3px 0px 0px #222121, inset -1px -3px 10px 1px #515151;
  }
  
  button:active {
    transform: translate(0px, 3px);
    box-shadow: none;
  }
  
  .row {
    margin-top: 20px
  }
  
  #topAdjust {
    margin-top: -52px;
  }
  
  #equalButton {
    position: absolute;
    margin-left: 12px;
    margin-top: -50px;
    height: 90px;
  }
  
  #zeroButton {
    width: 117px;
  }
  
  .red {
    font-size: 14px;
    background-color: #a72d45;
    box-shadow: 0px 3px 0px 0px #671c2a;
  }
 
  
  button,
  button:hover,
  button:active,
  button:visited {
    text-decoration: none !important;
    outline: none !important;
  }
  
  a,
  a:hover,
  a:active,
  a:visited {
    color: #922031;
    text-decoration: none !important;
    outline: none !important;
  }
  
  #history {
    /*transform: translate(-13px, -17px);*/
    position: relative;
    height: 10px;
    bottom: 17px;
    margin-right: 14px;
    color: #8b8b7b;
    font-size: 12px;
  }

// final draft
$(document).ready(function() {

    var entry = '';
    var ans = '';
    var current = '';
    var log = '';
    var decimal = true;
    var reset = '';
  
    // round function if answer includes a decimal
    function round(val) {
      val = val.toString().split('');
      if (val.indexOf('.') !== -1) {
        var valTest = val.slice(val.indexOf('.') + 1, val.length);
        val = val.slice(0, val.indexOf('.') + 1);
        var i = 0;
        while (valTest[i] < 1) {
          i++
        }
        valTest = valTest.join('').slice(0, i + 2);
        if (valTest[valTest.length-1] === '0') {
          valTest = valTest.slice(0, -1);
        }
        return val.join('') + valTest;
      } else {
        return val.join('');
      }
    }
  
    $('button').click(function() {
  
      entry = $(this).attr("value");
      console.log('entry: ' + entry);
  
      //reset for log after answer to equation.
      if (reset) {
        if (entry === '/' || entry === '*' || entry === '-' || entry === '+') {
          log = ans;
        } else {
          ans = '';
        }
      }
      reset = false;
  
      // All clear or Clear Entry
      if (entry === 'ac' || entry === 'ce' && current === 'noChange') {
        ans = '';
        current = '';
        entry = '';
        log = '';
        $('#history').html('0');
        $('#answer').html('0');
        decimal = true;
      } else if (entry === 'ce') {
        $('#history').html(log.slice(0, -current.length));
        log = log.slice(0, -current.length);
        ans = ans.slice(0, -current.length);
        current = ans;
        if (log.length === 0 || log === ' ') {
          $('#history').html('0');
        }
        $('#answer').html('0');
        entry = '';
        decimal = true;
      }
  
      // prevents more than one deciminal in a number
      if (entry === '.' || entry === '0.') {
        if (!decimal) {
          entry = '';
        }
      }
  
      // prevents improper use of first digit
      if (ans.length === 0 && isNaN(entry) && entry !== '.' || ans.length === 0 && entry === '0') {
        entry = '';
        ans = '';
      }
  
      // prevents extra operators
      if (current !== 'noChange') {
        if (current === '' && isNaN(entry) && entry !== '.' || isNaN(current) && isNaN(entry) && entry !== '.') {
          entry = '';
        }
      }
  
      // digit combining
      while (Number(entry) || entry === '0' || current === '.') {
  
        if (isNaN(current) && entry === '0' && current !== '.') {
          entry = '';
        } else if (isNaN(current) && Number(entry) && current !== '.') {
          current = '';
        }
        if (entry === '.') {
          decimal = false;
        }
        if (current === '0.' && isNaN(entry)) {
          entry = '';
        } else {
          if (current[current.length - 1] === '.') {
            current = current.concat(entry);
          } else {
            current += entry;
          }
          ans += entry;
          $('#answer').html(current);
          log += entry;
          $('#history').html(log);
          entry = '';
        }
      }
  
      // Operation list
  
      if (entry === '.') {
        if (current === '' || isNaN(current[current.length - 1])) {
          current = '0.';
          ans += entry;
          $('#answer').html('0.');
          log += current;
          $('#history').html(log);
  
        } else {
          current = current.concat('.');
          ans = ans.concat('.');
          log = ans;
          $('#history').html(ans);
          $('#answer').html(current);
        }
        entry = '';
        decimal = false;
  
      } else if (entry === '/') {
        current = '/';
        ans = round(eval(ans)) + current;
        log += current;
        $('#history').html(log);
        $('#answer').html('/');
        entry = '';
        decimal = true;
  
      } else if (entry === '*') {
        current = '*';
        ans = round(eval(ans)) + current;
        log += 'x';
        $('#history').html(log);
        $('#answer').html('x');
        entry = '';
        decimal = true;
  
      } else if (entry === '-') {
        current = '-';
        ans = round(eval(ans)) + current;
        log += current;
        $('#history').html(log);
        $('#answer').html('-');
        entry = '';
        decimal = true;
  
      } else if (entry === '+') {
        current = '+';
        ans = round(eval(ans)) + current;
        log += current;
        $('#history').html(log);
        $('#answer').html('+');
        entry = '';
        decimal = true;
  
      } else if (entry === '=') {
        if (current[current.length - 1] === '.') {
          entry = '';
        } else {
          current = eval(ans).toString();
          $('#answer').html(round(eval(ans)));
          ans = round(eval(ans));
          log += entry + ans;
          $('#history').html(log);
          log = ans;
          entry = '';
          reset = true;
          decimal = true;
        }
        current = 'noChange';
      }
      entry = '';
  
      if (reset) {
        log = '';
      }
  
      // max digits on screen
      if ($('#entry').children().text().length > 8 || $('#history').text().length > 22) {
        $('#answer').html('0');
        $('#history').html('Digit Limit Met');
        current = '';
        ans = '';
        log = '';
        decimal = true;
      }
  
      console.log('decimal: ' + decimal);
      console.log('current: ' + current);
      console.log('answer: ' + ans);
      console.log($('#history').text().length);
    });
  }); // end doc ready function