Portfolio: Electronic Calculator

Please note the temporary GUI

by rohanbhangui

HTML

<script src="https://fonts.googleapis.com/css?family=Pacifico&#39; "></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>



<div id="container">

  <div id="calculator">

    <div id="topBlock">
      <p id="title">NytekSF</p>

      <p id="header">
        ELECTRONIC CALCULATOR <sup>v2.0</sup>
      </p>
    </div>


    <div class="screen">
      <div id="offState"></div>

      <div id="onState">
        <div id="screenText"></div>
      </div>
    </div>

    <div id="allButtons">
      <div id="column">

        <div id="firstRow">
          <button class="genButton redButton" id="onButton">
            <p id="pElement"><sup>ON</sup><big>/</big><sub>AC</sub>
            </p>
          </button>

          <div id="solarPanel">
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
            <div class="panel"></div>
          </div>
        </div>

        <div id="break"></div>
      </div>

      <div class="row">
        <button class="genButton redButton" id="offButton">OFF</button>

        <button class="genButton redButton" id="ecButton">EC</button>
        <button class="genButton operators">%</button>
        <button class="genButton operators">÷</button>
      </div>


      <div class="row">
        <input type="button" class="genButton" value="7" />
        <input type="button" class="genButton" value="8" />
        <input type="button" class="genButton" value="9" />
        <input type="button" class="genButton operators" value="×" />
      </div>


      <div class="row">
        <input...

CSS

@charset "utf-8";

/* CSS Document */

body {
  background: #9B8F89;
  height: 100%;
  width: 100%;
}

#calculator {
  box-shadow: inset 2px 0 10px -5px #635e61, inset -5px 0 10px -5px #635e61, inset 0px -5px 10px -2px #635e61, 0 0 1px 2px #635e61, 0 10px 20px 0 #494547;
  height: 386px;
  width: 265px;
  margin: 0 auto;
  margin-top: 17px; //or 70px from header
  position: relative;
  background: rgb(243, 238, 231);
  border-top-left-radius: 80% 20px;
  border-top-right-radius: 80% 20px;
  border-bottom-left-radius: 80% 20px;
  border-bottom-right-radius: 80% 20px;
}

#title {
  font-family: 'Pacifico', cursive;
  padding-top: 10px;
  margin: 0 auto;
  text-align: center;
  color: #7d777b;
}

#header {
  font-family: 'Open-Sans', sans-serif;
  font-size: 0.7em;
  text-align: center;
  position: relative;
  top: -11px;
  color: #7d777b;
}

#offState {
  width: 210px;
  height: 40px;
  background: rgb(175, 175, 146);
  margin: 0 auto;
  position: relative;
  top: -12px;
  color: #000000;
  border-radius: 5px;
  box-shadow: inset 0px -2px 10px #b2b292;
}

#onState {
  width: 210px;
  height: 40px;
  background: rgb(198, 198, 174);
  margin: 0 auto;
  position: relative;
  top: -52px;
  visibility: hidden;
  border-radius: 5px;
  box-shadow: inset 0px -2px 10px #b2b292;
  text-align: right;
  font-family: 'Press Start 2P', cursive;
  font-size: 1.50em;
}

#screenText {
  position: relative;
  top: 9px;
  right: 7px;
  display: inline;
}

#solarPanel {
  height: 25px;
  width: 121px;
  margin-right: 20px;
  background: #4C302C; //#192018;
  float: right;
  position: relative;
  top: 0px;
  left: 23px;
  border-radius: 2px;
  box-shadow: inset 0px 1px 2px rgb(69, 39, 44);
  padding-right: 8px;
}

.panel {
  border-right: 1px solid #805F4C;
  height: 25px;
  width: 31.35px;
  float: left;
}

.panel:last-child {
  border-right: 0;
  height: 25px;
  width: 28.5px;
  float: left;
}

.genButton {
  margin-right: 10px;
  height: 25px;
  width: 40px;
  color: #FFFFFF;
 ...

JavaScript

var power = "off"; //Initial state of machine

var first = ""; //First number in the equation
var opp = ""; //Operator in same equation
var second = ""; //Second number in said equation

var counter = 0; //For limiting input to 8 numbers, per
var decimal = false;

function init() { //Simulate turning on the calculator
  if (power === "off") {
    power = "on";
    $("#onState").css('visibility', 'visible'); //Power on!
    $("#screenText").html("0"); //And ready to go.
  } else { //Or, if on already & pressed, simply clear everything:
    AC(); //Kill them all with fire!
  }
}

function AC() { //Wash all variables and reset screen
  first = "";
  opp = "";
  second = "";
  counter = 0;
  decimal = false;
  $("#screenText").html("0");
}

function powerOff() {
  power = "off"; //*blink*
  AC(); //Wiping variables....
  $("#onState").css('visibility', 'hidden');
}

function ecFunc() {
  if (second !== "") { //If both vars are used, wipe second var
    second = ""; //Then reset relevant vars, and print to screen
    counter = 0;
    decimal = false;
  } else { //Or return first letter 
    first = "";
    operator = "";
    counter = 0;
    decimal = false;
    AC();
  }
}

function buttonPress() {

  if (power === "on") {
    counter++; //Count one keystroke per press
    
    var testing = $(this).val();
    
    if(counter == 1) {
    	$("#screenText").html(testing);
    }
   	else if(counter > 1 && counter <= 8) {
   	 
      $("#screenText").html($("#screenText").html() + testing); //Failed...
   }

    if (counter == 1) {
      

      //$("#screenText").html(testing) = this.text(); //This line failed to work.
      //$("#screenText").html(this.text()); //As did this recent one fail me.
    } else if (counter > 1 && counter <= 8) { //For a max. of 8 presses total
      $("#screenText").html($("#screenText").html() + this.text());
      var buttonValue = this.text(); //Checking the value here...
      alert(buttonValue); //...also fails. :(
    }
  }
  //THINGS...