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
Timeline style03

Timeline style03

Timeline style01

Timeline style01

SwiperJS style01

SwiperJS style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Image hover Inspiration styles

Image hover Inspiration styles

Image hover 07

Image hover 07

Form contact avec validation en css

Form contact avec validation en css

Carousel Bootstrap3

Carousel Bootstrap3

Card 4 Product Style01

Card 4 Product Style01

Bootstrap4 datepicker

Bootstrap4 datepicker

Background overlay

Background overlay

Alert Bootstrap4 style01

Alert Bootstrap4 style01