JSFiddle - React, Tailwind, and code Playground

by andthatch

HTML

<title> Calculator </title>
		<link rel="stylesheet" type="text/css" href="Calculator.css">

	</head>
	<body>
	<body>
<div id="calculator">
	<!-- Screen and clear key -->
	<div class="top">
		<div class="screen"></div>
	</div>
	
	<div class="keys">
		<span class="clear">C</span>
		<span>+/-</span>
		<span>%</span>
		<span class="operator">/</span>
		<!-- operators and other keys -->
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span class="operator">*</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span class="operator">-</span>
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span class="operator">+</span>
		<span>0</span>
		<span>.</span>
		<span class="rand">RND</span>
		<span class="eval">=</span>

	</div>
</div>

CSS

/* Basic reset
hahaha
*/
6
  margin: 0;
7
  padding: 0;
8
  box-sizing: border-box;
9
  /* Better text styling */
10
  font: 20px Arial, sans-serif;
11
}
12
​
13
​
14
/* Finally adding some IE9 fallbacks for gradients to finish things up */
15
​
16
​
17
/* A nice BG gradient */
18
​
19
html {
20
  height: 100%;
21
  background: white;

 drag

   

Chat

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Better text styling */
  font: 20px Arial, sans-serif;
}


/* Finally adding some IE9 fallbacks for gradients to finish things up */


/* A nice BG gradient */

html {
  height: 100%;
  background: white;
  background-size: cover;
}


/* Using box shadows to create 3D effects */

#calculator {
  width: 326px;
  height: auto;
  margin: 100px auto;
  /*padding: 20px 20px 9px;*/
  background: #DDDDDD;
  box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}


/* Top portion */

.keys span.clear {
  float: left;
}


/* Inset shadow on the screen to create indent */

.top .screen {
  height: 120px;
  width: 326px;
  float: left;
  padding: 0 10px;
  background: rgba(200, 200, 200, 0.8);
  box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
  /* Typography */
  font-size: 60px;
  line-height: 80px;
  font-weight: lighter;
  color: white;
  text-align: right;
  letter-spacing: 1px;
}


/* Clear floats */

.keys,
.top {
  overflow: hidden;
}


/* Applying same to the keys */

.keys span,
.top span.clear {
  float: left;
  position: relative;
  top: 0;
  cursor: pointer;
  width: 80px;
  height: 50px;
  background: rgb(240, 240, 240);
  box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
  margin: 0 2px 2px 0;
  color: #000000;
  line-height: 36px;
  text-align: center;
  /* prevent selection of text inside keys */
  user-select: none;
  /* Smoothing out hover and active states using css3 transitions */
  transition: all 0.2s ease;
}


/* Remove right margins from operator keys */


/* style different type of keys (operators/evaluate/clear) differently */

.keys...

JavaScript

var divElement = document.getElementById("calculator");
var keys = divElement.getElementsByTagName("span");
var input = document.getElementsByClassName('screen');
var decimalAdded = false;

    for (var i = 0; i < keys.length; i++) {
    keys[i].addEventListener('click', function(e) {

        var inputVal = input[0].innerHTML;
        var buttonVal = this.innerHTML;

        if(buttonVal === 'C') {
            input[0].innerHTML = '';
            decimalAdded = false;
        }
		else {
          input[0].innerHTML+=buttonVal;
        }