JSFiddle - React, Tailwind, and code Playground

by fullyslick

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Basic Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
    <p class="js-calculator-display calculator-display">0</p>
    <div class="calculator-keys js-calculator-keys">
        <button type="button" class="js-calculator-keys-operator">+</button>
        <button type="button" class="js-calculator-keys-operator">-</button>
        <button type="button" class="js-calculator-keys-operator">x</button>
        <button type="button" class="js-calculator-keys-operator">÷</button>
        <button type="button" class="js-calculator-keys-number">1</button>
        <button type="button" class="js-calculator-keys-number">2</button>
        <button type="button" class="js-calculator-keys-number">3</button>
        <button type="button" class="js-calculator-keys-number">4</button>
        <button type="button" class="js-calculator-keys-number">5</button>
        <button type="button" class="js-calculator-keys-number">6</button>
        <button type="button" class="js-calculator-keys-number">7</button>
        <button type="button" class="js-calculator-keys-number">8</button>
        <button type="button" class="js-calculator-keys-number">9</button>
        <button type="button" class="js-calculator-keys-number">0</button>
        <button type="button" class="js-calculator-keys-decimal">.</button>
        <button type="button" class="js-calculator-keys-clear">AC</button>
        <button type="button" class="js-calculator-keys-calculate calculator-keys-calculate">=</button>
    </div>
</div>
<script src="solution.js"></script>
</body>
</html>

CSS

html {
    box-sizing: border-box;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
body {
    margin: 0;
}
.calculator {
    width: 200px;
    padding: 10px;
    margin: 5% auto;
    border-radius: 5px;
    background: #50585b;
}
.calculator-display {
    margin: 1% 0;
    padding: 3px;
    line-height: 1;
    text-align: right;
    word-wrap: break-word;
    background: #e4f2ed;
}
.calculator-keys {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(4, 1fr);
}
.calculator-keys-calculate {
    grid-column: -2;
    grid-row: 2 / span 4;
}

JavaScript

/**
 * Lesson 4: Functions
 * Task 1
 * URL: https://confluence.ontrq.com/display/KB/_DRAFT_Basic+level/#id-_DRAFT_Basiclevel-Lesson4:(Functions)
 * JS Fiddle Solution link:
 * Test Suit: https://mozilla.github.io/calculator/test/
 * Write a calculator, which will get numbers and make all possible arithmetic operations (sum, subtraction, division and multiplication).
 * NOTE: This calculator does not have maximum number input limit. Some calculators have (iPhone native app), others don't (Win 10 calc or Google calc). I decided not to implement max number input, because it was not part of the requirements.
 * Keep in mind:
 * A user can choose the arithmetic operation by himself.
 * The user can not divide by 0.
 */
    'use strict';

    var calcDisplay = document.querySelector('.js-calculator-display'),
        calcKeys = document.querySelector('.js-calculator-keys'),
        pressedKey,
        isDecimalPressed = false,
        selectedOperation,
        initialInput,
        isSecondInputSet = false,
        isNegativeInsertion = false;

    /**
     * Listen for click on keys
     */
    calcKeys.addEventListener('click', function(e) {
        /**
         * Get all classes of clicked button and assign them to an array
         */
        var targetClasses = e.target.classList.value.split(' ');

        /**
         * Get the text of button the button
         */
        pressedKey = e.target.innerText;

        /**
         * Find if the pressed button has one of the classes
         * and perform an action depending on type of button
         */
        for (var i = 0; i < targetClasses.length; i++) {
            switch (targetClasses[i]) {
                case 'js-calculator-keys-number':
                    numberPress();
                    break;
                case 'js-calculator-keys-operator':
                    operatorPress();
                    break;
                case 'js-calculator-keys-decimal':
                    decimalPress();
       ...