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
page scroll progress bar

page scroll progress bar

Titre section avec une bande style01

Titre section avec une bande style01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Input range slider HTML style05

Input range slider HTML style05

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form login with background image changed style01

Form login with background image changed style01

Elastic Content Slider

Elastic Content Slider

Comment intégrer yamli dans une input

Comment intégrer yamli dans une input

ChartJS style01

ChartJS style01

Card Bootstrap4 01

Card Bootstrap4 01

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau