From 4926c46b42ef6a6864ae7e23bd6a55ae1e96719d Mon Sep 17 00:00:00 2001
From: prateeksha17 <112319597+prateeksha17@users.noreply.github.com>
Date: Thu, 8 Jun 2023 15:06:28 +0530
Subject: [PATCH] Create prateeksha17.html

I created a calculator using html and css.
---
 prateeksha17.html | 117 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 prateeksha17.html
diff --git a/prateeksha17.html b/prateeksha17.html
new file mode 100644
index 0000000..72ac19f
--- /dev/null
+++ b/prateeksha17.html
@@ -0,0 +1,117 @@
+<!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>Basic Calculator</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="calculator">
+        <div class="calc2">
+        <form>
+          <div class="display">
+            <input type="text" name="display" />
+          </div>
+          <div>
+            <input  type="button" value="AC" onclick="display.value = '' " class="operator" />
+            <input
+              type="button"
+              value="DE"
+              onclick="display.value = display.value.toString().slice(0,-1) "class="operator"
+            />
+            <input type="button" value="." onclick="display.value += '.' " class="operator"/>
+            <input type="button" value="/" onclick="display.value += '/' " class="operator"/>
+          </div>
+          <div>
+            <input type="button" value="7" onclick="display.value += '7' " />
+            <input type="button" value="8" onclick="display.value += '8' " />
+            <input type="button" value="9" onclick="display.value += '9' " />
+            <input type="button" value="*" onclick="display.value += '*' " class="operator"/>
+          </div>
+          <div>
+            <input type="button" value="4" onclick="display.value += '4' " />
+            <input type="button" value="5" onclick="display.value += '5' " />
+            <input type="button" value="6" onclick="display.value += '6' " />
+            <input type="button" value="-" onclick="display.value += '-' " class="operator"/>
+          </div>
+          <div>
+            <input type="button" value="1" onclick="display.value += '1' " />
+            <input type="button" value="2" onclick="display.value += '2' " />
+            <input type="button" value="3" onclick="display.value += '3' " />
+            <input type="button" value="+" onclick="display.value += '+' " class="operator"/>
+          </div>
+          <div>
+            <input type="button" value="00" onclick="display.value += '00' " />
+            <input type="button" value="0" onclick="display.value += '0' " />
+            <input type="button" value="=" class="equal operator" onclick="display.value=eval(display.value)" />
+          </div>
+        </form>
+      </div>
+      </div>
+    </div>
+
+    <!-- css-file -->
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        font-family: "Poppins", sans-serif;
+        box-sizing: border-box;
+      }
+      .container {
+        width: 100%;
+        height: 100vh;
+        background: #e3f9ff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .calculator {
+        background: #3a4452;
+        padding: 20px;
+        border-radius: 10px;
+      }
+      .calc2{
+        background: #35393e;
+       
+        padding: 10px;
+        border-radius: 10px;
+      }
+     
+      .calculator form input {
+        border: 0;
+        outline: 0;
+        width: 60px;
+        height: 60px;
+        border-radius: 10px;
+        box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1),
+          5px 5px 15px rgba(0, 0, 0, 0.2);
+        background:transparent;
+        font-size: 20px;
+        color: #fff;
+        cursor: pointer;
+        margin: 10px;
+      }
+      form input.operator{
+        color: rgb(232, 99, 99);
+      }
+      form .display {
+        display: flex;
+        justify-content: flex-end;
+        margin: 20px 0;
+      }
+      form .display input {
+        text-align: right;
+        flex: 1;
+        font-size: 45px;
+        box-shadow: none;
+      }
+      form input.equal {
+        width: 145px;
+      }
+      
+    </style>
+  </body>
+</html>
