Add files via upload

Saransh0506 · Dec 24, 2023 · 4824562 · 4824562
commit 4824562
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 0 deletions.
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+    <link rel="stylesheet" href="calculatorcss.css">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/12.2.1/math.js" integrity="sha512-ekTDuSaAE9sFxbDUSIgOT0OK+iInxoziYIA03oVHFWC7edmuSwngpR/FTu7ome+sfcZgFePphvGDkRTav62lMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+
+<body>
+    <div class="calculator">
+        <div class="calculator-calculate">
+            <div class="calculator-calculate-screen js-output" >0</div>
+        </div>
+        <div class="calculator-buttons">
+            <button class="calculator-button " onclick="getButton(7)">7</button>
+            <button class="calculator-button " onclick="getButton(8)">8</button>
+            <button class="calculator-button " onclick="getButton(9)">9</button>
+            <button class="calculator-button operator" onclick="getButton(`/`)">/</button>
+            <button class="calculator-button " onclick="getButton(4)">4</button>
+            <button class="calculator-button " onclick="getButton(5)">5</button>
+            <button class="calculator-button " onclick="getButton(6)">6</button>
+            <button class="calculator-button operator" onclick="getButton(`*`)">x</button>
+            <button class="calculator-button " onclick="getButton(1)">1</button>
+            <button class="calculator-button " onclick="getButton(2)">2</button>
+            <button class="calculator-button " onclick="getButton(3)">3</button>
+            <button class="calculator-button operator" onclick="getButton(`-`)">-</button>
+            <button class="calculator-button " onclick="getButton(0)">0</button>
+            <button class="calculator-button reset-button" onclick="reset()">C</button>
+            <button class="calculator-button " onclick="equalTo()">=</button>
+            <button class="calculator-button operator" onclick="getButton(`+`)">+</button>             
+        </div>
+    </div>
+    <script src="calculatorjs.js"></script>
+</body>
+
+</html>
diff --git a/calculatorcss.css b/calculatorcss.css
@@ -0,0 +1,96 @@
+body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; /* This ensures the full height of the viewport is covered */
+  }
+
+
+.calculator{
+    height:560px;
+    width:340px;
+    text-align: center;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 15px;
+    background-color: rgb(56, 56, 56);
+}
+
+.calculator-calculate{
+    height:100px;
+    border:1px solid black;
+    display: flex;
+    justify-content:  center;
+    align-items: center;
+    position: relative;
+    margin-bottom:90px;
+    margin-top:20px;
+    background-color: rgb(154, 154, 154);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
+    transform: perspective(1000px) rotateX(0deg);
+
+}
+
+.calculator-calculate-screen{
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 10px; 
+    color: #1f1f1f;
+    font-size:24px;
+    font-weight: bold;
+    overflow: hidden; /* Hide the overflowing content */
+    white-space: nowrap; /* Prevent line breaks */
+    text-overflow: ellipsis; /* Show an ellipsis (...) when content overflows */
+    max-width: calc(100% - 20px); /* Limit the maximum width */
+}
+
+.calculator-buttons{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    column-gap:20px;
+    row-gap:20px;
+}
+
+.calculator-button{
+    height:60px;
+    width:70px;
+    border-radius:10px  ;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    background-color: #4CAF50;
+    border: 1px solid #45a049;
+    box-shadow: 0 4px 8px rgba(171, 171, 171, 0.2);
+    transition: box-shadow 0.3s ease;
+}
+
+.calculator-button:hover {
+    box-shadow: 0 12px 24px rgba(207, 207, 207, 0.3);
+    cursor:pointer;
+}
+
+.calculator-button:active {
+    box-shadow: 0 12px 24px rgba(207, 207, 207, 0.3);
+    background-color: #3d893f;
+}
+
+.operator{
+    background-color: rgb(192, 136, 14);
+    border: 1px solid rgb(192, 136, 14);
+}
+
+.operator:active{
+    background-color: rgb(126, 88, 8);
+}
+
+.reset-button{
+    background-color: rgb(179, 4, 4);
+    border: 1px solid rgb(179, 4, 4);
+}
+
+.reset-button:active{
+    background-color: rgb(104, 4, 4);
+}
+
diff --git a/calculatorjs.js b/calculatorjs.js
@@ -0,0 +1,42 @@
+myArray=[];
+var totalVal ='';
+const outputElement = document.querySelector('.js-output');
+
+
+const getButton = (buttonValue) => {
+        myArray.push(!isNaN(buttonValue) ? Number(buttonValue) : buttonValue);    
+        totalVal = myArray.join('');
+        outputElement.innerText=`${totalVal}`;
+};
+
+
+function equalTo()
+{
+    try{
+    console.log(totalVal);// Use eval to evaluate the expression in totalVal
+    var result = math.evaluate(totalVal);
+     console.log(result);
+     if (isNaN(result) || !isFinite(result)) {
+        throw new Error('Invalid mathematical expression');
+    }
+    outputElement.innerText=`${result}`;    
+    }
+    catch(error)
+        {
+            outputElement.innerText=`${error}`;
+            result=0;
+            console.log(result);
+        }
+        finally {
+            totalVal=`${result}`;
+            myArray = [totalVal];            
+        }    
+}
+
+
+function reset()
+{
+    myArray = [];
+    totalVal='';
+    outputElement.innerText=`0`;
+}