Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
  <div id='root'></div>

              
            
!

CSS

              
                body {
  margin-left: 50%;
  margin-top: 10%;
  backround-color: lightblue;
  height: 100px;
  justify-content: center;
  align-items: center;
  width: 216px;
}

.topLine {
  display: inline-block;
  width: 300px;
}

button {
    text-align: center;
    width: 50px;
    height: 50px;
    margin: 2px;
    background: DarkGrey;
}

#equals {
  height: 104px;
  float: right;
  position: flex;
}

#clear, #zero {
  width: 104px;
}

#result {
  position: relative;
  text-align: right;
  border-style: inset;
  color: DarkBlue;
  background-color: lightblue;
  height: 60px;
  width: 205px;
  margin-bottom: 2px;
  padding-right: 5px;
}

p#numbers {
}

#display {
  margin-top: 5px;
  vertical-align: top;
  height: 10px;
  width: 205px;
  font-size: 20px;
}
#displayF {
  margin-top: 5px;
  vertical-align: top;
  height: 10px;
  width: 205px;
  font-size: 20px;
}

              
            
!

JS

              
                
import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";

let myArr = [];
let myFnum;
let a = '';
let myArrN; // used in equals calc
let myArrO; // // used in equals calc
let myCnum; // used in equals calc
let myResult; // used in equals calc
let y = '';
let x = 0;
let w = 0;
let z = 0;
let d = '';

let myfNum = '';
let mysNum = [];
let curNum; 
let curArr = [];
let myDisp = '';
let myNegOn = false;
let myDisplay = '';

var operators = {
    '+': function(a, b) { return a + b },
    '-': function(a, b) { return a - b },
    'x': function(a, b) { return a * b },
    '/': function(a, b) { return a / b },
};


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dotOn: false, //insures that the dot can't be pressed twice
      fNum: '', //string that stores the top display row 
      sNum: [], //array that stores numbers and operators which will be used at the equals
      eqOn: false, //stops additonal input after equals sign has been pushed
      opOn: false, //stops eq from firing or additional operators from being added when operator is in display
      display: '0', //string that stores the bottom display row
      negOn: false
    }
    this.handleNum=this.handleNum.bind(this)
    this.handleAC=this.handleAC.bind(this)
    this.handleOp=this.handleOp.bind(this)
    this.handleEqual = this.handleEqual.bind(this)
    this.handleDot = this.handleDot.bind(this)
    this.hendleNeg = this.hendleNeg.bind(this)
    
  }
  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }
    componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }
      maxNumbers = () => {
        alert("STAUAUAUP YOU'RE HURTING ME!!!")
      }
      


  handleNum = (e) => {
        console.log('handleNum')
       if(this.state.eqOn === true) {return}
   //escape conditions //
      //too many numbers is fName or display
       if(this.state.display.length > 19 || this.state.fNum.length > 19){
         this.maxNumbers()
        return;
       };
     //
       
    // if bot this e and the e bef
       
       //if no op was passed prior to this itteration then make the op a +... this happens becuase the - sign is now a number so doesn't pass as an operatior to sNum 
        //if the last element in the sNum array is a number then 
     //  console.log('before: sNum = ', this.state.sNum);
       
    //   console.log('after: sNum = ', this.state.sNum);
        
      if (this.state.eqOn === true || this.state.display === '0' || this.state.opOn === true && this.state.negOn === false){
          this.setState({
            display: e.toString(),
            fNum: this.state.fNum += e,
            eqOn: false, 
            opOn: false,
            dotOn: false
        }//,
        // () => console.log('handlNum----------display:', this.state.display, 'fNum:', this.state.fNum, 'sNum:', this.state.sNum,'myArr',myArr, 'eqOn:', this.state.eqOn, 'opOn:', this.state.opOn, 'dotOn: ', this.state.dotOn)
      )
        } else if (this.state.negOn === true){
          this.setState({
            display: this.state.display += e.toString(), //this updates with the neg in front
            //snum: '', //this has to update with a +
            fNum: this.state.fNum += e, //this doesn't update
            eqOn: false, 
            opOn: false,
            dotOn: false,
            negOn: false
        }//,
        // () => console.log('handlNum----------display:', this.state.display, 'fNum:', this.state.fNum, 'sNum:', this.state.sNum,'myArr',myArr, 'eqOn:', this.state.eqOn, 'opOn:', this.state.opOn, 'dotOn: ', this.state.dotOn)
      )
        } else {
        this.setState({
          display: this.state.display += e.toString(),
          fNum:  this.state.fNum += e.toString(),
          eqOn: false,
          opOn: false
        }//,
        // () => console.log('handleNum2----------display:', this.state.display, 'fNum:', this.state.fNum, 'sNum:', this.state.sNum,'myArr',myArr, 'eqOn:', this.state.eqOn, 'opOn:', this.state.opOn, 'dotOn: ', this.state.dotOn)
       )
      };
    curNum = e;
    }
  
      handleDot = (e) => {
        console.log('handleDot')
       if(this.state.dotOn === true || this.state.opOn === true){return};
       if(this.state.fNum.length > 19){
         this.maxNumbers()
        return;
       }
       if(this.state.eqOn === true) {return}
        this.setState ({
          fNum:  this.state.fNum += e.toString(),
          //sNum: [...this.state.sNum, parseFloat(this.state.display), e],
          display: this.state.display += e.toString(),
          //opOn: true,
          dotOn: true
        })
      }          
      
      hendleNeg = (e) => {
        console.log('handleNeg')
        
        if (this.state.opOn === false && e === '-' && this.state.negOn === false){
        
            console.log('this.state.opOn === false && e === "-" &&this.state.negOn === false')
         this.setState ({
            fNum: this.state.fNum += this.state.display,   //string that stores the top display row 
            sNum: [...this.state.sNum, this.state.display],   //array that stores numbers and operators which will be used at the equals
            eqOn: false,   //stops additonal input after equals sign has been pushed
            opOn: true,   //stops eq from firing or additional operators from being added when operator is in display
            display: e, //string that stores the bottom display row
            dotOn: false, //insures that the dot can't be pressed twice
            negOn: true
         })
          /*
            myfNum = this.state.fNum + this.state.display; //will not update
            mysNum = [...this.state.sNum, this.state.display]; //will not update
            myeqOn = false;  // eq was not pressed
            myopOn = false;   // '-' is an operator and can change if another operator is selected next
            myDisplay = e;   // updates to just the "-" sign
            myDotOn = false; // will not update
            myNegOn = true;  // meaning that a - has been passed just before this        

         this.setState ({
            fNum: myfNum,   //string that stores the top display row 
            sNum: mysNum,   //array that stores numbers and operators which will be used at the equals
            eqOn: myeqOn,   //stops additonal input after equals sign has been pushed
            opOn: myopOn,   //stops eq from firing or additional operators from being added when operator is in display
            display: myDisplay, //string that stores the bottom display row
            dotOn: myDotOn, //insures that the dot can't be pressed twice
            negOn: myNegOn
         })
         */
       
          return;
          
        } else if (this.state.opOn === true) {
            
            this.hendleOp(e)
          
        } else if (this.state.negOn === true) {
            
            return
          
        }
        
      }


      
      handleOp = (e) => {
        console.log(handleOp)
        //error test
       // console.log('handleOp START/ e= ', e, 'negOn = ', this.state.negOn, 'opOn = ', this.state.opOn, 'e is not a number: ', isNaN(e), 'e != -', e != '-')
        //error test
        
        if(this.state.opOn === true && isNaN(e)){
          
          console.log('this.state.opOn === true && isNaN(e))')
 //when a 2nd opperator is passed in a row but it's not '-'
 //the calculator must use the most recent operator
            //set myfNum to current state.fNum
            myfNum = 'this is working' //this.state.fNum;
            //remove the last element in the fNum string. This is the original operator
          //  myfNum = myfNum.slice(0, myfNum.length-1);
            //add the new operator to the fNum string
         //   myfNum = myfNum + e;
            //set sNum to current state.sNum
            mysNum = [...this.state.sNum];
            //remove the last element from the sNum array
            mysNum = mysNum.splice(0, mysNum.length-1);
            //add the new operator being passed to the sNum arry
            mysNum = [...mysNum, e];
            //eq is not on //will not update
            myeqOn = false;
            //opOn remains true
            myopOn = true;
            //a '-' was not the last operator to be passed
            //updates state.display to the new operator 
            myDisplay = e;
            myDotOn = false;
            myNegOn = false;
                    
          this.setState ({
            fNum: myfNum, // myfNum,   //string that stores the top display row 
            sNum: mysNum,   //array that stores numbers and operators which will be used at the equals
            eqOn: myeqOn,   //stops additonal input after equals sign has been pushed
            opOn: myopOn,   //stops eq from firing or additional operators from being added when operator is in display
            display: myDisplay, //string that stores the bottom display row
            dotOn: myDotOn, //insures that the dot can't be pressed twice
            negOn: myNegOn
         })
          
          
        } else if (isNaN(e) && e != '-' && this.state.opOn === false && this.state.negOn === false){
          console.log('isNaN(e) && e != '-' && this.state.opOn === fals')
          
          
            //when an operator other then '-' for the first time
            myfNum = this.state.fNum + e;
            mysNum = [...this.state.sNum, parseFloat(this.state.display), e]
            myeqOn = false;  //eq was not pressed
            myopOn = true;   //'-' is an operator and can change if another operator is selected next
            myDisplay = e;   // updates to just the "-" sign
            myDotOn = false; //will not update
            myNegOn = false;        
            
          this.setState ({
              fNum: myfNum,   //string that stores the top display row 
              sNum: mysNum,   //array that stores numbers and operators which will be used at the equals
              eqOn: myeqOn,   //stops additonal input after equals sign has been pushed
              opOn: myopOn,   //stops eq from firing or additional operators from being added when operator is in display
              display: myDisplay, //string that stores the bottom display row
              dotOn: myDotOn, //insures that the dot can't be pressed twice
              negOn: myNegOn
         })
          
        
        } 
       // cosole.log('handleOp END')
        
      }
      
  

      handleEqual = () => {
        console.log('handleEqual')
        this.setState({
          sNum: [...this.state.sNum, parseFloat(this.state.display)]
        })
      if(this.state.opOn === true){return};
      myArr = [...this.state.sNum, parseFloat(this.state.display)];
      //make sure all items have ops between them
      //i'll try this by adding a + between 2 numbers
      for(let g = 0; g < myArr.length; g++){
        if(!isNaN(myArr[g]) && !isNaN(myArr[g+1])){
          myArr.splice(g+1, 0, "+")
        }
      }
      console.log('this is what we use', myArr)
      if(!isNaN(myArr[myArr.length])){z = 0} else {z = 1};
        for (let i = 0; i < myArr.length - z; i++) {

          if(!isNaN(myArr[i])) {
          x = myArr[i];
        } else if(w === 0) {
            y = myArr[i];
            w = operators[y](x,myArr[i+1])
        } else {
            y = myArr[i];
            w = operators[y](w,myArr[i+1])
      }
}  
        myArr = [],
        y = '';
        x = 0;
        z = 0;
        
        this.setState ({
          fNum: '',
          sNum: [],
          eqOn: false,
          display: w 
        }
      )
        w = 0;
     }

      handleAC = () => {
        console.log('handleAC')
        curArr = [];
        this.setState ({
          fNum: '',
          sNum: [],
          eqOn: false,
          opOn: false,
          display: '0'
        }
        )
     }


  render() {
   
    return (
      <body class='container'>
        <div id='result'>
          <p id='displayF'>{this.state.fNum}</p>
          <p id='display'>{this.state.display}</p>
        </div>
        <div class='topLine'>
          <button class="keyPad" id="clear" onClick={() => this.handleAC('AC')} >AC</button>
          <button class="keyPad" id="divide" onClick={() => this.handleOp('/')}>/</button>
          <button class="keyPad" id="multiply" onClick={() => this.handleOp('x')}>X</button>
        </div>
        <div class='lineTwo'>
          <button class="keyPad" id="seven" onClick={() => this.handleNum(7)} >7</button>
          <button class="keyPad" id="eight" onClick={() => this.handleNum(8)}>8</button>
          <button class="keyPad" id="nine" onClick={() => this.handleNum(9)}>9</button>
          <button class="keyPad" id="subtract" onClick={() => this.hendleNeg('-')}>-</button>
        </div>
        <div class='lineThree'>
          <button class="keyPad" id="four" onClick={() => this.handleNum(4)}>4</button>
          <button class="keyPad" id="five" onClick={() => this.handleNum(5)}>5</button>
          <button class="keyPad" id="six" onClick={() => this.handleNum(6)}>6</button>
          <button class="keyPad" id="add" onClick={() => this.handleOp('+')}>+</button>
        </div>
        <div class='lineFour'>
          <button class="keyPad" id="one" onClick={() => this.handleNum(1)}>1</button>
          <button class="keyPad" id="two" onClick={() => this.handleNum(2)}>2</button>
          <button class="keyPad" id="three" onClick={() => this.handleNum(3)}>3</button>

          <button class="keyPad" id="equals" onClick={() => this.handleEqual('=')}>=</button>

        </div>
        <div class='lineFive'>
          <button class="keyPad" id="zero" onClick={() => this.handleNum(0)}>0</button>
          <button class="keyPad" id="decimal" onClick={() => this.handleDot('.')}>.</button>
        </div>
      </body>
    );
  }
};


ReactDOM.render(<App />, document.getElementById("root"))


              
            
!
999px

Console