saku-xyz · SHandapangoda · Oct 31, 2019
diff --git a/Hacktoberfest-2019-Calculator-JS-Task2/README.md b/Hacktoberfest-2019-Calculator-JS-Task2/README.md
@@ -0,0 +1,4 @@
+# Hacktoberfest-2019-Calculator-JS-Task2
+
+1. Write a code in task.js file to Multiplication and Divition of two numbers.
+2. Add Color into buttons.
diff --git a/Hacktoberfest-2019-Calculator-JS-Task2/calculator.html b/Hacktoberfest-2019-Calculator-JS-Task2/calculator.html
@@ -0,0 +1,129 @@
+<html>
+<head>
+    <style>
+        html {
+            font-size: 62.5%;
+            box-sizing: border-box;
+        }
+
+        *,
+        *::before,
+        *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: inherit;
+        }
+
+        .calculator {
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 400px;
+        }
+
+        .calculator-screen {
+            width: 100%;
+            font-size: 5rem;
+            height: 80px;
+            border: none;
+            background-color:  #b3e0ff;
+            color: #fff;
+            text-align: right;
+            padding-right: 20px;
+            padding-left: 10px;
+        }
+
+        button {
+            height: 60px;
+            background-color: #fff;
+            border-radius: 3px;
+            border: 1px solid #c4c4c4;
+            background-color: rgba(0, 255, 0, .15);
+            font-size: 2rem;
+            color: #333;
+            background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, .04));
+            box-shadow: inset 0 0 0 1px rgba(100, 135, 60, .05), inset 0 1px 0 0 rgba(122, 98, 48, .45), inset 0 -1px 0 0 rgba(0, 255, 255, .15), 0 1px 0 0 rgba(255, 255, 255, .15);
+            text-shadow: 0 1px rgba(20, 90, 100, .4);
+        }
+
+        button:hover {
+            background-color: rgba(0,0,122,.3);
+        }
+
+        .operator {
+            color: #337cac;
+        }
+
+        .all-clear {
+
+        /* Add styles into clear button */
+
+        }
+
+        .all-clear:hover {
+            background-color: #f17377;
+        }
+
+        .equal-sign {
+            background-color: #2e86c0;
+            border-color: #337cac;
+            color: #fff;
+            height: 100%;
+            grid-area: 2 / 4 / 6 / 5;
+        }
+
+        .equal-sign:hover {
+            background-color: #4e9ed4;
+        }
+
+        .calculator-keys {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-gap: 20px;
+            padding: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="calculator">
+
+        <input type="text" class="calculator-screen" value="" disabled />
+
+        <div class="calculator-keys">
+
+            <button type="button" class="operator" value="+">+</button>
+            <button type="button" class="operator" value="-">-</button>
+            <button type="button" class="operator" value="*">&times;</button>
+            <button type="button" class="operator" value="/">&divide;</button>
+
+            <button type="button" value="7">7</button>
+            <button type="button" value="8">8</button>
+            <button type="button" value="9">9</button>
+
+
+            <button type="button" value="4">4</button>
+            <button type="button" value="5">5</button>
+            <button type="button" value="6">6</button>
+
+
+            <button type="button" value="1">1</button>
+            <button type="button" value="2">2</button>
+            <button type="button" value="3">3</button>
+
+
+            <button type="button" value="0">0</button>
+            <button type="button" class="decimal" value=".">.</button>
+            <button type="button" class="reset" value=0>AC</button>
+
+            <button type="button" class="equal-sign operator" value="=">=</button>
+
+        </div>
+    </div>
+  <script src="task.js"></script>
+</body>
+
+</html>
diff --git a/Hacktoberfest-2019-Calculator-JS-Task2/task.js b/Hacktoberfest-2019-Calculator-JS-Task2/task.js
@@ -0,0 +1,110 @@
+const calculator = {
+    displayValue: '0',
+    firstOperand: null,
+    waitingForSecondOperand: false,
+    operator: null,
+};
+
+//Manage Operators
+const performCalculation = {
+    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
+
+    '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
+
+    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
+
+    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
+
+    '=': (firstOperand, secondOperand) => secondOperand
+};
+
+function inputDigit(digit) {
+    const {
+        displayValue,
+        waitingForSecondOperand
+    } = calculator;
+
+    if (waitingForSecondOperand === true) {
+        calculator.displayValue = digit;
+        calculator.waitingForSecondOperand = false;
+    } else {
+        calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
+    }
+
+    console.log(calculator);
+}
+
+function inputDecimal(dot) {
+    // If the `displayValue` does not contain a decimal point
+    if (!calculator.displayValue.includes(dot)) {
+        // Append the decimal point
+        calculator.displayValue += dot;
+    }
+}
+
+function handleOperator(nextOperator) {
+    const {
+        firstOperand,
+        displayValue,
+        operator
+    } = calculator
+    const inputValue = parseFloat(displayValue);
+
+    if (operator && calculator.waitingForSecondOperand) {
+        calculator.operator = nextOperator;
+        console.log(calculator);
+        return;
+    }
+
+    if (firstOperand == null) {
+        calculator.firstOperand = inputValue;
+    } else if (operator) {
+        const currentValue = firstOperand || 0;
+        const result = performCalculation[operator](currentValue, inputValue);
+
+        calculator.displayValue = String(result);
+        calculator.firstOperand = result;
+    }
+
+    calculator.waitingForSecondOperand = true;
+    calculator.operator = nextOperator;
+    console.log(calculator);
+}
+
+function updateDisplay() {
+    const display = document.querySelector('.calculator-screen');
+    display.value = calculator.displayValue;
+}
+
+updateDisplay();
+
+const keys = document.querySelector('.calculator-keys');
+keys.addEventListener('click', (event) => {
+    const {
+        target
+    } = event;
+    if (!target.matches('button')) {
+        return;
+    }
+
+    if (target.classList.contains('operator')) {
+        handleOperator(target.value);
+        updateDisplay();
+        return;
+    }
+
+    if (target.classList.contains('decimal')) {
+        inputDecimal(target.value);
+        updateDisplay();
+        return;
+    }
+
+    if (target.classList.contains('all-clear')) {
+        resetCalculator();
+        updateDisplay();
+        return;
+    }
+
+    inputDigit(target.value);
+    updateDisplay();
+});
diff --git a/Hacktoberfest-2019-Calculator-JS-Task2/task.txt b/Hacktoberfest-2019-Calculator-JS-Task2/task.txt
@@ -0,0 +1,2 @@
+1. Write a code in task.js file to Multiplication and Divition of two numbers.
+2. Add Color into buttons.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		1. Write a code in task.js file to Multiplication and Divition of two numbers.
		2. Add Color into buttons.