PdxCodeGuild · andy2124 · Nov 3, 2022
diff --git a/code/Andy/javascript/calc/calc.css b/code/Andy/javascript/calc/calc.css
@@ -0,0 +1,83 @@
+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;
+}
+
+.currentvalue {
+    width: 100%;
+    font-size: 5rem;
+    height: 80px;
+    border: none;
+    background: #252525;
+    color: #fff;
+    text-align: right;
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+button {
+    height: 60px;
+    background-color: #fff;
+    border-radius: 3px;
+    border: 1px solid #c4c4c4;
+    background-color: transparent;
+    font-size: 2rem;
+    color: #333;
+    text-shadow: 0 1px rgba(255, 255, 255, .4);
+}
+
+button:hover {
+    background-color: #eaeaea
+}
+
+.operator {
+    color: #337cac
+}
+
+.all-clear {
+    background-color: #f0595f;
+    border-color: #b0353a;
+    color: #fff
+}
+
+.all-clear:hover {
+    background-color: #f17377;
+}
+
+.equal-sign {
+    background-color: #2e86c0;
+    border-color: #337cac;
+    color: #fff;
+    grid-area: 2 / 4 / 6 / 5;
+    height: 100%;
+}
+
+@media screen and (max-width: 950px) {
+    .equal-sign {
+        background-color: yellow;
+        color: black;
+    }
+}
+
+.calculator-keys {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 20px;
+    padding: 20px;
+}
diff --git a/code/Andy/javascript/calc/calc.html b/code/Andy/javascript/calc/calc.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="./calc.css">
+    <title>Document</title>
+    <script defer src="calc.js"></script>
+
+<body>
+    <div class="calculator" style="background-image: linear-gradient(to right, lightblue,lime);">
+        <section class="display">
+            <div class="previousvalue"></div>
+            <input class="currentvalue" type="text" value = '0' readonly/>
+        </section >
+        <div class="calculator-keys">
+            <button class="operator" value="+">+</button>
+            <button class="operator" value="-">-</button>
+            <button class="operator" value="*">*</button>
+            <button class="operator" value="/">/</button>
+
+            <button class="number">7</button>
+            <button class="number">8</button>
+            <button class="number">9</button>
+
+            <button class="number">4</button>
+            <button class="number">5</button>
+            <button class="number">6</button>
+
+            <button class="number">1</button>
+            <button class="number">2</button>
+            <button class="number">3</button>
+
+            <button class="number">0</button>
+            <button class="equal-sign" value="=">=</button>
+            <button class="all-clear" value="AC">AC</button>
+            <button class="number">.</button>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/code/Andy/javascript/calc/calc.js b/code/Andy/javascript/calc/calc.js
@@ -0,0 +1,150 @@
+const initApp = () => {
+    const currentValueElem = document.querySelector('.currentvalue');
+    const previousValueElem = document.querySelector('.previousvalue');
+
+    let itemArray = [];
+    const equatArray = [];
+    let newNumFlag = false;
+// being able to populate buttons on calc screen
+    const inputbuttons = document.querySelectorAll('.number');
+    inputbuttons.forEach(button =>{
+        button.addEventListener("click", event => {
+            //new charachter, any new one that is added the event could be chaneged to button cause thats where it really coming from but doesnt matter
+            const newInput = event.target.textContent;
+            // knowing when to switch from a new number
+            if (newNumFlag){
+                currentValueElem.value = newInput;
+                // adding new num 
+                newNumFlag = false;
+            } else{ 
+                currentValueElem.value = 
+                //once the operator or anthing other than a number is pressed the 0 comes back to start the second part
+                    currentValueElem.value == 0 
+                        ? newInput // just to get the number and not 07. ?: those can be considered as if and else statements/ so if true set to new input then else would start after:
+                        : `${currentValueElem.value}${newInput}`; // concatnating a new a diff way 
+            }
+
+        });
+
+    });
+    const operateButton = document.querySelectorAll('.operator');
+    operateButton.forEach(button =>{
+        button.addEventListener('click', event =>{
+            //showing equals
+            if(newNumFlag){
+                previousValueElem.textContent = ''
+                itemArray = [];
+            }
+            const newOperator = event.target.textContent
+            currentVal = currentValueElem.value
+
+            // num needs to be first if no number cant preform operation. if item array has no lenth/ basically saying if 0 and then + wont do stuff
+            if (!itemArray.length && currentVal == 0 ) return
+            //new equation has no length
+            if (!itemArray.length){
+                itemArray.push(currentVal, newOperator)
+                previousValueElem.textContent = `${currentVal} ${newOperator}`;
+                 // being done so when an op is pressed it doesnt append the next num to the previous
+                return newNumFlag = true
+            }
+             //completing equations
+            if (itemArray.length) {
+                itemArray.push(currentVal) //thrid elem
+                const equationObj = {
+                   //storing numbers not strings
+                    numOne: parseFloat(itemArray[0]),
+                    //current value is num two
+                    numTwo: parseFloat(currentVal),
+                    // thats the second element in the array
+                    op: itemArray[1]
+
+
+                }
+                equatArray.push(equationObj); // history for equations
+                const equationStr = 
+                    `${equationObj['numOne']}
+                     ${equationObj['op']}
+                     ${equationObj['numTwo']}`;
+
+
+                 const newValue = calculate(equationStr, currentValueElem);
+
+                 previousValueElem.textContent = 
+                    `${newValue} ${newOperator}`;
+
+                    // start new equation
+                    itemArray = [newValue, newOperator];
+                    newNumFlag = true
+                    console.log(equatArray); 
+
+
+            }
+        });
+    });
+    // equal sign 
+    const equalsButton = document.querySelector('.equal-sign');
+    equalsButton.addEventListener('click',() =>{
+        const currentVal= currentValueElem.value;
+        let equationObj;
+        // letting user press equals more than once and continuing to increase #
+        if (!itemArray.length && equatArray.length){
+            const lastEqua = equatArray[equatArray.length - 1 ]; // getting last stuff
+            equationObj = {
+                numOne : parseFloat(currentVal),
+                numTwo: lastEqua.numTwo,
+                op: lastEqua.op 
+            }
+        }else if (!itemArray.length){ //saying it'll work even though it doesnt have a history and works past first option 
+            return currentVal
+        }else {
+            itemArray.push(currentVal);
+            equationObj={
+                numOne:parseFloat(itemArray[0]),
+                numTwo: parseFloat(currentVal),
+                op: itemArray[1]
+            }
+        }
+
+        equatArray.push(equationObj)
+
+        const equationStr= 
+        `${equationObj['numOne']} ${equationObj['op']} ${equationObj['numTwo']}`;
+        calculate(equationStr, currentValueElem);
+
+        previousValueElem.textContent= `${equationStr}=`
+
+        newNumFlag = true;
+        itemArray = [];
+        console.log(equatArray);
+    });
+
+   //setting up all clear 
+    const allClearButton = document.querySelectorAll('.all-clear');
+    allClearButton.forEach(button =>{
+        button.addEventListener('click', (event)=>{
+            currentValueElem.value =0; 
+            // targeting all clear to get 0
+            if (event.target.classList.contains('all-clear')){
+                previousValueElem.textContent = ''
+                 itemArray=[];//clearing items that have been put within it 
+
+            }
+
+        });
+
+
+
+    });
+
+
+};
+// fires when all html docs have been completley parsed and all deferred scripts. doesnt wait for everthing to load 
+document.addEventListener('DOMContentLoaded', initApp);
+
+const calculate = (equation, currentValueElem) => {
+    const regex = /(^[*/=])|(\s)/g; //  /(^) means if it starts with \s means removing white space
+    equation.replace(regex,''); // from params
+    const divByZero = /(\/0)/.test(equation)
+    if (divByZero) return currentValueElem.value = 0; // catching the division by 0 and making it 0
+    return currentValueElem.value = eval(equation); // return the value
+}