Portfolio Project: Solar-Powered Calculator (Advanced Version)

v3.0 Final

by J. Jones

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertify.js/0.3.11/themes/alertify.core.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/alertify.js/0.3.11/themes/alertify.default.css">
<script src="https://l2.io/ip.js?var=userip"></script>
<link rel="stylesheet" href="https://rawgit.com/premasagar/cleanslate/master/cleanslate.css">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>

<script type="text/javascript" src="https://l2.io/ip.js?var=userip"></script>
<!-- SCRIPT TO GRAB IP CAN BE INTERGRATED INTO COOKIES -->


<div id="container">

    <div id="calculator">

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

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


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

            <div class="onState"><span class="screenText"></span></div>
        </div>

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

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

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

        ...

CSS

/*******************************************/
/* GUI INSPIRED BY FREECODECAMP CALCULATOR */
/* BUILD CHALLENGE                         */
/*******************************************/
/* http://www.freecodecamp.com/challenges/ */
/* build-a-javascript-calculator           */
/*******************************************/

#alertify {
  position: absolute;
  top: 25px;
}

body {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    background: #9B8F89;
    height: 100%;
    width: 100%;
}

#calculator {
    box-shadow: inset 2px 0 10px -5px #635e61, inset 5px 0 10px -5px #635e61, inset -5px 0 8px -5px #635e61, inset 0px -5px 10px -2px #635e61, 0 0 1px 2px #635e61, 0 10px 20px 0 #494547;
    height: 440px;
    width: 304px;
    margin: 0 auto;
    margin-top: 23px; //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: 260px;
    height: 45px;
    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: 260px;
    height: 45px;
    background: rgb(198, 198, 174);
    margin: 0 auto;
    position: relative;
    top: -56px;
    opacity: 0;
    border-radius: 5px;
    box-shadow: inset 0px -2px 10px #b2b292;
    text-align: right;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.75em;
    transition: 125ms;
}

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

JavaScript

var power = "off"; //Initial state of machine
var lights = "on"; //Initial state of environment

var first = ""; //First number in the equation goes here
var opp = ""; //Operator in same equation goes here
var opp2 = false; //If true, then chain new number onto accumulating stack
var second = ""; //Second number in said equation goes here

var counter = 0; //To be used for limiting user input to 8 numbers, per
var needsRefresh = false; //State check w/ boolean to reset function
var equals = false; //Check if equals has been pressed or not
var savedToMem = "0";
var res;
var piPressed = false;
var mixedFracSet = false;
var xyPressed = false;
var storage;
var storage2;
/*
END OF INITIAL GLOBAL VARIABLES
*/
//
//
//
/*
BEGIN CALCULATOR FUNCTIONS
*/
function init() { //Simulate turning on the calculator here:
    if (lights === "on") { //Lights must be on for calculator to work, of course
        if (power === "off") { //If it's off already, then:
            power = "on"; //Setting power to on...
            $(".onState").css('opacity', '1'); //Power is now visibly on!
            counter = 0; //Ready to count user button-presses
            $(".screenText").html("0"); //And we here set screen to "0"
        } else { //Or, if calc is already on already, then sisply clear everything from memory for user:
            AC(); //Kill them all with fire!
        }
    }
}


function AC() { //Clear all the things:
    first = "";
    opp = "";
    second = "";
    counter = 0;
    equals = false;
    opp2 = false;
    piPressed = false;
    mixedFracSet = false;
    storage = "";
    storage2 = "";
    removeScrollbar();
    $(".screenText").html("0");
}


function powerOff() {
    power = "off"; //*blink* -- Power set to off
    AC(); //Wiping all variables from memory behind the scenes....
    $(".onState").css('opacity', '0'); //Hiding the screen itself, lastly
}


function ecFunc() {
    if (second !== "") { //If both first and second vars are in use, then wipe second...