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
Table Responsive with css 01

Table Responsive with css 01

Pie Charts

Pie Charts

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Menu aside style01 slide out

Menu aside style01 slide out

Input file style01

Input file style01

Image hover 05

Image hover 05

Image hover 03

Image hover 03

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Create icon animate with svg

Create icon animate with svg

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table