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
up down tr in table with js

up down tr in table with js

Titre section avec une anmation style01

Titre section avec une anmation style01

Timeline style04

Timeline style04

SwiperJS style01

SwiperJS style01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Image hover 01

Image hover 01

Header Aside Footer Admin

Header Aside Footer Admin

Form login 03

Form login 03

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Background overlay

Background overlay

Background div gradient

Background div gradient