#DailyCSSImages2.0 : Functional Calculator ( HTML+CSS+JS )

dailycssimages2-0-functional-calculator-html-css-js.markdown

#DailyCSSImages2.0 : Functional Calculator ( HTML+CSS+JS )

A Pen by ZaynahGiti on CodePen.

License.

index.html

<!-- main-container -->
<div id="container">
  
  <div class="title">
    <h1>Functional Calculator</h1>
  </div>
  
     <!-- main-calculator -->
  <div id="main-calculator">
        <!-- main-display -->
    <div id="main-display">
      <form name="calculator">
        <span id="total">0</span>
      </form>
    </div>
    
    <!-- calculators buttons -->
    <div id="calc-buttons">
      <div class="button-row clearfix">
        <button id="calc_clear" value="C" >C</button>
        <button id="calc_back" value="&larr;" >&larr;</button>
        <button id="calc_neg" value="-/+" >-/+</button>
        <button class="calc_op" value="/" >&divide;</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="7" >7</button>
        <button class="calc_int" value="8" >8</button>
        <button class="calc_int" value="9" >9</button>
        <button class="calc_op" value="*" >&times;</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="4" >4</button>
        <button class="calc_int" value="5" >5</button>
        <button class="calc_int" value="6" >6</button>
        <button class="calc_op" value="-" >-</button>
      </div>
      <div class="button-row clearfix">
        <button class="calc_int" value="1" >1</button>
        <button class="calc_int" value="2" >2</button>
        <button class="calc_int" value="3" >3</button>
        <button class="calc_op" value="+" >+</button>
      </div>
      <div class="button-row clearfix">
        <button id="calc_zero" class="calc_int" value="0" >0</button>
        <button id="calc_decimal" value="." >.</button>
        <button id="calc_eval" value="=" >=</button>
      </div>
    
    </div>
  </div>
  <div class="text-credit">
    <h5>@ZeinaChallenges</h5>
  </div>
</div>

script.js

/*
** assign variables in global scope
*/

var a = 0,
  b = 0,
  is_a = true,
  is_b = false,
  o = 'null',
  answer = 0,
  first_a = true,
  first_b = true,
  is_submission = false,
  format_sub = false,
  display = jQuery('#total');



/*
** Calculator main Functions 
*/

// console.log
function write(x) {
  console.log(x);
}
// add int to current display value
function changeDisplayVal(i) {
  display.text(display.text() + i);
}
// make * into ×
function  changeOperand(x) {
  if ( x === '*' ) {
 
    return '×';
  } else if ( x === '/' ) {
 
    return '÷';
  } else {
    return x;
  }
}
// set display value
function setDisplayVal(x) {
  display.text( changeOperand(x));
}
// type of animation
function animateButton(obj) {
  var button = obj.addClass('hovering');
  setTimeout(function() {
      button.removeClass('hovering');
  }, 100);
}



/*
** operation functions
*/

// setting a
function set_a(i) {
  if ( is_a ) {
    // nothing if a duplicate decimal
    if ( i === '.' && a.toString().indexOf('.') !== -1 ) {
      write('Duplicate Decimal');
      i = '';
    } else if ( i === '.' && first_a ) {
      i = '0.';
    }
    // first_a time, we need to clear the display
    if ( first_a === true ) {
      if ( i === '0' ) {
        i = '';
      } else {
        // set display value
        setDisplayVal(i);
        // no longer first_a
        first_a = false;
      }
    } else {
      // add int to current display value
      changeDisplayVal(i);
    }

    a = display.text();

    write('Set "a" to ' + a);
  }
}

// setting b
function set_b(i) {
  if ( !is_a ) {
    // nothing if a duplicate decimal
    if ( i === '.' && b.toString().indexOf('.') !== -1 ) {
      write('Duplicate Decimal!');
      i = '';
    } else if ( i === '.' && first_b ) {
      i = '0.';
    }
    // first_b time, we need to clear the display
    if ( first_b === true ) {
      if ( i === '0' ) {
        i = '';
      } else {
        // set display value
        setDisplayVal(i);
        // no longer first_b
        first_b = false;
      }
    } else {
      // add int to current display value
      changeDisplayVal(i);
    }
    // set b to current display Value
    b = display.text();

    write('Set "b" to ' + b);
  }
}

// looping calculator
function loop_calc(answer) {
  write('Loop Calculator');

  a = answer;
  b = 0;
  answer = 0;
  // set display value
  setDisplayVal(a);
}

// setting operator
function set_o(op) {
  
  if ( is_submission ) {
    loop_calc(display.text());
    is_submission = false;
  }
  // if new op is submitting calc
  if ( !first_b ) {
    format_submit_calc();
  }


  setDisplayVal(op);
  
  o = op;

  if ( is_a ) { is_a = false; }
  if ( !is_b ) { is_b = true; }

  write('Set "o" to ' + o);
}

// format submit calc
function format_submit_calc() {
  // evaluate equation
  var preCalc = eval(a + '' + o + '' + b);
  
  answer = parseFloat(preCalc.toPrecision(12));

  // submit answer to display
  display.text(answer);

  // reset first_b to true
  first_b = true;

  // post result
  newResult(a,o,b,answer);

  write(a + ' ' + o + ' ' + b + ' = ' + answer);

  a = answer;
  b = 0;
  o = o;
  // set display value
  setDisplayVal(o);
  is_a = false;
  is_b = true;

  first_b = true;

  format_sub = true;

  write(' Submission');
}

// submit calculator
function submit_calc() {
  write('Submission');
  if ( first_b === false ) {
    var preCalc = 0;
    if ( o === "^" ) {
        // evaluate equation
        preCalc = Math.pow(a,b);
    } else {
        // evaluate equation
        preCalc = eval(a + '' + o + '' + b);
    }
    // parse float to 12
    answer = parseFloat(preCalc.toPrecision(12));

    // submit answer to display
    display.text(answer);
    // display is now the answer
    is_submission = true;
    // reset first_b to true
    first_b = true;

    // post result
    newResult(a,o,b,answer);

    write(a + ' ' + o + ' ' + b + ' = ' + answer);
  } else {
    write("Oops! we could not format this submission");
  }
}

// negging value
function neg() {
  display.text(display.text() * -1);
  if ( is_submission ) {
    a = a * -1;
  } else {
    if ( is_a ) {
      a = a * -1;
      setDisplayVal(a);
    } else {
      b = b * -1;
      setDisplayVal(b);
    }
  }
}

// resetting calculator
function reset_calc() {
  a = 0;
  b = 0;
  o = 'null';
  answer = 0;
  is_a = true;
  is_b = false;
  first_a = true;
  first_b = true;
  is_submission = false;
  format_sub = false;
  display.text(0);

  // reset display value
  setDisplayVal(0);

  write('Calculator Reset');
}

// backspacing value
function backspace() {
  if ( display.text() !== '' && display.text() !== '0' ) {
    display.text( display.text().substring(0, display.text().length - 1) );
    if ( is_a === true ) {
        a = parseFloat(a.toString().substring(0, a.toString().length - 1 ));
    } else {
        b = parseFloat(b.toString().substring(0, b.toString().length - 1 ));
    }
  } else {
    write('Nothing Left to Backspace');
  }
}

/*
**  Events
*/

// clicks
jQuery('.calc_int, #calc_decimal').each(function() {
  jQuery(this).click(function() {
    var value = jQuery(this).val();
    if ( is_submission === false ) {
      if ( is_a === true ) {
        set_a(value);
      } else {
        set_b(value);
      }
    } else {
      reset_calc();
      set_a(value);
    }
  });
});

// click operators
jQuery('.calc_op').each(function() {
  jQuery(this).click(function() {
    var value = jQuery(this).val();
    set_o(value);
  });
});

// click equals
jQuery('#calc_eval').click(function() {
  submit_calc();
});

// click clear
jQuery('#calc_clear').click(function() {
  reset_calc();
});

// click neg
jQuery('#calc_neg').click(function() {
  neg();
});

// click backspace
jQuery('#calc_back').click(function() {
  backspace();
});





/*
** Key Events
*/

// key press for integers and operators
jQuery(document).keypress(function (e) {
  // the character code
  var charCode = e.which;
  // the key
  var key = String.fromCharCode(charCode);

  // key integers & decimal
  if ( charCode >= 46 && charCode <= 58 && charCode !== 47 ) {
    if ( !is_submission ) {
      if ( is_a ) {
        set_a(key);
      } else {
        set_b(key);
      }
    } else if ( format_sub ) {
      set_b(key);
    } else {
      reset_calc();
      set_a(key);
    }
  }

  // operators
  if ( charCode >= 42 && charCode <= 45 && charCode !== 44 || charCode === 47 ) {
    set_o(key);
  }

  // key equals
  if ( charCode === 61 ) {
    submit_calc();
  }

  // animate the corrosponding button
  jQuery('button').each(function() {
    var value = jQuery(this).val();
    if ( value === key ) {
      animateButton(jQuery(this));
    }
  });

});

// keydown for backspace and return
jQuery(document).keydown(function (e) {

  // the character code
  var charCode = e.which;

  // backspace
  if ( charCode === 8 ) {
    backspace();
    animateButton(jQuery('#calc_back'));
    return false;
  }

  // clear
  if ( charCode === 12 ) {
    reset_calc();
    animateButton(jQuery('#calc_clear'));
    return false;
  }

  // return
  if ( charCode === 13 ) {
    submit_calc();
    animateButton(jQuery('#calc_eval'));
    return false;
  }

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

body {
 background: white;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  width: 620px;
  margin:10% 35%;
  font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
}
.title{
  position:asbolute;
  margin-top:-5%;
  margin-left:-1.5%;
h1{
 font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
 
  }
}

a {
  text-decoration: none;
  color: black;
}

#main-calculator {
  font-size: 1.2em;
  display: block;
  /*width: 400px;*/
  width: 49%;
  float: left;
  margin: 0;
  padding: 20px;
  border: 2px solid rgba(0,0,0,0.125);
 background-image: linear-gradient(to top, #88d3ce 0%, #6e45e2 100%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#main-calculator button,
#main-calculator input,
#main-calculator #total {
  font-size: 1em;
  display: inline-block;
  position: relative;
  padding: 12px;
  font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;

}
#main-calculator button .exponent,
#main-calculator input .exponent,
#main-calculator #total .exponent {
  font-size: 0.6em;
  position: absolute;
}
#main-calculator button .denominator,
#main-calculator input .denominator,
#main-calculator #total .denominator {
  position: relative;
}
#main-calculator button .denominator .denom-top,
#main-calculator input .denominator .denom-top,
#main-calculator #total .denominator .denom-top {
  font-size: 0.75em;
  position: absolute;
  left: -8px;
}
#main-calculator button .denominator .denom-slash,
#main-calculator input .denominator .denom-slash,
#main-calculator #total .denominator .denom-slash {
  padding: 0px 2px;
}
#main-calculator button .denominator .denom-btm,
#main-calculator input .denominator .denom-btm,
#main-calculator #total .denominator .denom-btm {
  font-size: 0.75em;
  position: absolute;
  bottom: 0px;
}
#main-calculator #main-display {
  width: 100%;
}
#main-calculator #main-display #total {
  width: 98%;
  margin: 0 auto 8px;
  display: block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  font-size: 1.2em;
  color: #fa71cd;
  text-shadow: 1px 1px 0px #fff;
  background: #fff;
  text-align: right;
}
#main-calculator #calc-buttons {
  width: 100%;
}
#main-calculator #calc-buttons #extra-buttons {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #fa71cd;
}
#main-calculator #calc-buttons .button-row {
  width: 100%;
  zoom: 1;
}
#main-calculator #calc-buttons .button-row:before,
#main-calculator #calc-buttons .button-row:after {
  content: "";
  display: table;
}
#main-calculator #calc-buttons .button-row:after {
  clear: both;
}
#main-calculator #calc-buttons .button-row:before,
#main-calculator #calc-buttons .button-row:after {
  content: "";
  display: table;
}
#main-calculator #calc-buttons .button-row:after {
  clear: both;
}
#main-calculator #calc-buttons .button-row button {
  width: 22.7%;
  margin: 1.25%;
  float: left;
  border: none;
  background: #6713d2;
  border-style: solid;
  border-color: #333;
  border-width: 0px 1px 1px 0px;
  color: #f0f0f0;
  cursor: pointer;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#main-calculator #calc-buttons .button-row button:last-child {
  margin-right: 0;
  float: right;
}
#main-calculator #calc-buttons .button-row button:hover,
#main-calculator #calc-buttons .button-row button.hovering {
  border-width: 1px 0px 0px 1px;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}
#main-calculator #calc-buttons #calc_zero {
  width: 48%;
}
#main-calculator #calc-buttons #calc_clear {
  background: #6713d2;
}
#main-calculator #calc-buttons #calc_back {
  background: #6713d2;
  
}
#main-calculator #calc-buttons #calc_eval {
  background: #dfdfdf;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cdcdcd), color-stop(1, #dfdfdf));
  background: -ms-linear-gradient(bottom, #cdcdcd, #dfdfdf);
  background: -moz-linear-gradient(center bottom, #cdcdcd 0%, #dfdfdf 100%);
  background: -o-linear-gradient(#dfdfdf, #cdcdcd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#cdcdcd', GradientType=0);
  color: #00544b;
  text-shadow: 1px 1px 0px #fff;
}

.text-credit{
  position:relative;
  margin-top:4%;
  right:35%;
  color:#C7C7CD;
}