Add files via upload

Manish1Gupta · Aug 10, 2023 · c0883e5 · c0883e5
1 parent e2af116
commit c0883e5
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calculator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+  <div class="title">
+    <h1> Calculator </h1>
+  </div>
+
+
+  <div class="container">
+    <div class="calculator">
+      <input type="text" placeholder="0" id="screen">
+      <button onclick="clearscreen()">AC</button>
+      <button onclick="del()">DEL</button>
+      <button onclick="display('%')">%</button>
+      <button onclick="display('/')">/</button>
+      <button onclick="display('7')">7</button>
+      <button onclick="display('8')">8</button>
+      <button onclick="display('9')">9</button>
+      <button onclick="display('')"></button>
+      <button onclick="display('4')">4</button>
+      <button onclick="display('5')">5</button>
+      <button onclick="display('6')">6</button>
+      <button onclick="display('-')">-</button>
+      <button onclick="display('1')">1</button>
+      <button onclick="display('2')">2</button>
+      <button onclick="display('3')">3</button>
+      <button onclick="display('+')">+</button>
+      <button onclick="display('.')">.</button>
+      <button onclick="display('0')">0</button>
+      <button onclick="calculate()" class="equal">=</button>
+    </div>
+  </div>
+
+  <!-- scripts -->
+  <script src="script.js">
+  </script>
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,23 @@
+
+let userinput = document.getElementById("screen");
+
+function display(num) {
+  userinput.value += num;
+}
+
+function calculate() {
+  try {
+    userinput.value = eval(userinput.value);
+  } catch (error) {
+    alert("Invalid...Please enter valid input and as per the mathematical rules...");
+  }
+}
+
+function clearscreen() {
+  userinput.value = "";
+}
+
+function del() {
+  userinput.value = userinput.value.slice(0, -1);
+}
+Footer
diff --git a/style.css b/style.css
@@ -0,0 +1,116 @@
+
+  @keyframes lights {
+    0% {
+      color: hsl(230, 40%, 80%);
+      text-shadow:
+        0 0 1em hsla(320, 100%, 50%, 0.2),
+        0 0 0.125em hsla(320, 100%, 60%, 0.3),
+        -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
+        1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
+    }
+
+    30% { 
+      color: hsl(230, 80%, 90%);
+      text-shadow:
+        0 0 1em hsla(320, 100%, 50%, 0.5),
+        0 0 0.125em hsla(320, 100%, 60%, 0.5),
+        -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
+        0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
+    }
+
+    40% { 
+      color: hsl(230, 100%, 95%);
+      text-shadow:
+        0 0 1em hsla(320, 100%, 50%, 0.5),
+        0 0 0.125em hsla(320, 100%, 90%, 0.5),
+        -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
+        0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
+    }
+
+    70% {
+      color: hsl(230, 80%, 90%);
+      text-shadow:
+        0 0 1em hsla(320, 100%, 50%, 0.5),
+        0 0 0.125em hsla(320, 100%, 60%, 0.5),
+        0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
+        -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
+    }
+
+    100% {
+      color: hsl(194, 47%, 82%);
+      text-shadow:
+        0 0 1em hsla(320, 100%, 50%, 0.2),
+        0 0 0.125em hsla(320, 100%, 60%, 0.3),
+        1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
+        -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
+    }
+
+  }
+
+  h1 {
+    margin: auto;
+    font-size: 3.0rem;
+    font-weight: 300;
+    animation: lights 5s 750ms linear infinite;
+    background-color: #19649e;
+    text-align: center;
+  }  
+
+  body{
+    height: 80vh;
+
+  }
+
+  .container {
+    height: 620px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #19649e;
+  }
+
+  .calculator {
+    background-color: #ecf0f3;
+    padding: 24px;
+    border: #acced4 2px solid;
+    border-radius: 16px;
+    box-shadow: inset 5px 5px 12px #ffffff, 5px 5px 12px rgba(0, 0, 0, 0.16);
+    display: grid;
+    grid-template-columns: repeat(4, 68px);
+  }
+
+  input {
+    grid-column: span 4;
+    height: 70px;
+    width: 260px;
+    background-color: #ecf0f3;
+    box-shadow: inset -5px 5px 12px #ffffff, inset 5px 5px 12px rgba(0, 0, 0, 0.16);
+    border: none;
+    border-radius: 24px;
+    color: rgb(70, 70, 70);
+    font-size: 50px;
+    text-align: end;
+    margin: auto;
+    margin-top: 40px;
+    margin-bottom: 30px;
+    padding: 20px;
+  }
+
+  button {
+    height: 48px;
+    width: 48px;
+    background-color: #ecf0f3;
+    box-shadow: -5px -5px 12px #ffffff, 5px 5px 12px rgba(0, 0, 0, 0.16);
+    border: none;
+    border-radius: 16px;
+    margin: 8px;
+    font-size: 20px;
+    cursor: pointer;
+  }
+
+  .equal {
+    width: 115px;
+    border-radius: 16px;
+    background-color: #0b82dd;
+    box-shadow: -5px -5px 12px #ffffff, 5px 5px 12px rgba(0, 0, 0, 0.16);
+  }