JSFiddle - React, Tailwind, and code Playground

by Kiran Dash

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:400,500"></script>
<script src="https://use.fontawesome.com/58bcbed17c.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
        
        <div id="calcbox" class="absolute-center">
            
            <div id="displayer">
                <div id="entry">
                    <p id="display"></p>
                </div>
            </div>
            
            <div id="buttons">
                
                <div id="buttonrow" class="row">
                    <button id="surprise" class="midpink"><i class="fa fa-gift"></i></button>
                    <button class="midpink" id="ac">AC</button>
                    <button class="midpink" id="ce">CA</button>
                    <button class="darkpink operators">/</button>
                </div>
                <div id="buttonrow" class="row">
                    <button class="digits">7</button>
                    <button class="digits">8</button>
                    <button class="digits">9</button>
                    <button class="darkpink operators">x</button>
                </div>
                <div id="buttonrow" class="row">
                    <button class="digits">4</button>
                    <button class="digits">5</button>
                    <button class="digits">6</button>
                    <button class="darkpink operators">-</button>
                </div>
                <div id="buttonrow" class="row">
                    <button...

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto:400,500';

body {
    font-family: 'Roboto', sans-serif;
    background-color: #54433c;
    background-image: url("https://www.transparenttextures.com/patterns/crissxcross.png");
}

.container-fluid {
    padding: 0px !important;
    margin: 0px !important;
}

#calcbox {
    height: 400px;
    width: 300px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.62);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.62);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.62);
    background-color: #F8B8B8;
    
}

#displayer {
    height: 25%;
    background-color: #fee;
}

#buttons {
    font-size: 1.5em;
    color: #424848;
    height: 100%;
}

button {
    padding: 0px !important;
    margin: 0px !important;
    width: 25%;
    display: block;
    float: left;
    background-color: #F8B8B8;
    border: 1px solid #fee;
    border-bottom: none;
    border-left: none;
    height: 100%
}

button:active {
    background-color: #f2b2b1;
}

#buttonrow {
    width: 100%;
    padding: 0px;
    margin: 0px;
    height: 20%;
}

.midpink {
    background-color: #F7A3A3;
    color: #F1DBDB;
}

.midpink:active {
    background-color: #f29c9b;
}


.darkpink {
    background-color: #F28988;
    color: #F1DBDB;
    border-right: none;
}

.darkpink:active {
    background-color: #eb8381;
}

#displayer {
    position: relative;
    overflow: hidden;
}

#entry {
    color: #5A5D5D;
    position: absolute;
    margin-right: 10px;
    padding-top: 25px;
    font-size: 4em;
    right: 0px;
    max-width: 93%;
}

#display {
    overflow-x: auto;
    text-align: right;
}

.twice {
    width: 50%;
}

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0px; left: 0px; bottom: 0px; right: 0px;
}

#colorme {
    display: none;
    margin-top: 10px;
    height: 60px;
    margin-left: 22%;
    margin-right: 20%;
}

#colorme:show {
    display: inline-block;
}

.box {
    margin: 10px;
    float: left;
    height: 40px;
    width:...

JavaScript

"use strict"
//calculator functionality
//animation happens when you click present button
//color scheme changes! 

/**********************************************
* Stores the key categories that can be clicked
***********************************************/
var keyclass = {
    NUM: 1,
    DOT: 2,
    OPERATOR: 3,
    CE: 4,
    EQUALS: 5
}

/*********************
* Stores the states
**********************/
var states = {
    //default state
    START: 1,
    //first number pressed
    FIRST_ARG: 2,
    //first num begins w/ dot or contains dot
    FIRST_ARG_FLOAT: 3,
    //+ or - or * or / added
    OPERATOR: 4,
    //second number pressed
    SECOND_ARG: 5,
    //second num contains dot not at beginning
    SECOND_ARG_FLOAT: 6,
    //second num begins w/ dot
    SEC_ARG_DOT: 7,
    //result!
    EQUALS: 8
}


/****************************************
* Contains functionality of calcultor
*****************************************/
var calc = {
    //monitors current state
    state: states.START,
    //stores current operator
    op: "",
    //monitors current display
    display: "",
    //stores first number for further operations
    num1: "",
    //stores second number for further operations
    num2: "",

    //controls transitions between states 
    //represents the implementation of a FSM
    //takes two arguments - a key's category (key_class) and the particular value of the key that is clicked on (key)
    //switch is used to transition between states, each case represents a particular state
    doStep: function(key_class, key) {
        switch (this.state) {
            case states.START:
                if (key_class === keyclass.NUM) {
                    this.dispSet(key);
                    //move on to next state
                    this.state = states.FIRST_ARG;
                }
                if (key_class === keyclass.DOT) {
                    this.dispSet("0.");
                    this.state = states.FIRST_ARG_FLOAT;
               ...