Initial Commit

ArjunIyyappanav · Jun 24, 2024 · ea87515 · ea87515
commit ea87515
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 0 deletions.
diff --git a/main.html b/main.html
@@ -0,0 +1,49 @@
+<!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="icon" href="https://static.vecteezy.com/system/resources/previews/000/349/270/original/vector-calculator-icon.jpg">
+    <script src= 
+    "https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.js"
+            integrity= 
+    "sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script> 
+        <script src= 
+    "https://cdnjs.cloudflare.com/ajax/libs/mathjs/10.6.4/math.min.js"
+            integrity= 
+    "sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"></script>
+    <link rel = "stylesheet" href = "style.css">
+</head>
+<body>
+    <div class = "Numbers">
+        <h1>Simple Calculator</h1>
+        <input type="text" id="result">
+        <br>
+        <button class = "num" value = "1" onclick = "dis('1')">1</button>
+        <button class = "num" value = "2" onclick = "dis('2')">2</button>
+        <button class = "num" value = "3" onclick = "dis('3')">3</button>
+        <button class="operators" id = "add" onclick = "dis(' + ')">+</button>
+        <br>
+        <button class = "num" value = "4" onclick = "dis('4')">4</button>
+        <button class = "num" value = "5" onclick = "dis('5')">5</button>
+        <button class = "num" value = "6" onclick = "dis('6')">6</button>
+        <button class="operators" id = "sub" onclick = "dis(' - ')">-</button>
+        <br>
+        <button class = "num" value = "7" onclick = "dis('7')">7</button>
+        <button class = "num" value = "8" onclick = "dis('8')">8</button>
+        <button class = "num" value = "9" onclick = "dis('9')">9</button>
+        <button class="operators" id = "mul" onclick = "dis(' * ')">*</button>
+        <br>
+        <button class = "num" value = "0" onclick = "dis('0')">0</button>
+        <button class = "num" id = "equal" onclick = "solve()">=</button>
+        <button class = "spe" id = "C" onclick = "clr()">C</button>
+        <button class="operators" id = "divi" onclick = "dis(' / ')">/</button>
+    </div>
+    <script src = "test.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,66 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    background-color: #CAE7DF;
+}
+
+h1{
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    padding-bottom: 50px;
+}
+
+.Numbers{
+    padding-top : 220px ;
+    padding-left : 600px;
+}
+
+.num{
+    padding : 20px 20px;
+    font-size: 14px;
+    margin : 8px;
+    border : 0px solid #fff;
+    border-radius: 20px;
+}
+
+.num:hover{
+    font-size: large;
+}
+
+.spe:hover{
+    font-size: large;
+}
+
+.operators:hover{
+    font-size:large;
+}
+
+#result{
+    text-align: center;
+}
+
+.spe{
+    padding : 18px;
+    margin : 6px;
+    font-size: 14px;
+    border : 1px solid #fff;
+    border-radius: 20px;
+}
+
+.operators{
+    padding : 19px;
+    margin : 6px;
+    font-size : 14px;
+    border : 1px solid #fff;
+    border-radius : 20px;
+}
+
+#result{
+    height : 40px;
+    width : 255px;
+    margin-left: 2px;
+    font-size: 14px;
+    border : 1px solid #fff;
+    border-radius: 20px;
+}
diff --git a/test.js b/test.js
@@ -0,0 +1,19 @@
+
+function dis(val) { 
+    document.getElementById("result").value += val ;
+} 
+
+function clr(){
+    document.getElementById("result").value = " ";
+}
+
+function solve(){
+    let x = document.getElementById("result").value;
+    let y = math.evaluate(x);
+    if(y == Infinity || y == NaN){
+        alert("Math Error");
+    }else{
+        document.getElementById("result").value = y;
+    }
+
+}