From 88726c61dd66157b648636e5a50050f88292af07 Mon Sep 17 00:00:00 2001
From: Vidhiagrawal3 <vidhiagrawal305@gmail.com>
Date: Fri, 8 Oct 2021 22:47:24 +0530
Subject: [PATCH] Alignment rectified and placeholder added

---
 index.html | 69 ++++++++++++++++++++------------------
 style.css  | 98 ++++++++++++++++++++++++++++--------------------------
 2 files changed, 86 insertions(+), 81 deletions(-)
diff --git a/index.html b/index.html
index e74908c..b837778 100644
--- a/index.html
+++ b/index.html
@@ -1,43 +1,46 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta name="author" content="Aman Singh">
     <meta name="keyword" content="calc , calculator,mini project">
     <meta name="description" content="Using this calc we can perform many calcultion">
     <title>Calculator</title>
     <link rel="stylesheet" href="style.css">
-  </head>
-  <body>
+</head>
+
+<body>
     <div class="container">
-      <div class="body">
-        <span>AMAN SINGH</span>
-        <form class="form" name="fm">
-          <input type="text" name="display" class="display">
-          <div class="mainbody">
-            <input type="button" name="1" value="1" onclick="fm.display.value+='1'">
-            <input type="button" name="2" value="2" onclick="fm.display.value+='2'">
-            <input type="button" name="3" value="3" onclick="fm.display.value+='3'">
-            <input type="button" name="+" value="+" onclick="fm.display.value+='+'"><br>
-            <input type="button" name="4" value="4" onclick="fm.display.value+='4'">
-            <input type="button" name="5" value="5" onclick="fm.display.value+='5'">
-            <input type="button" name="6" value="6" onclick="fm.display.value+='6'">
-            <input type="button" name="-" value="-" onclick="fm.display.value+='-'"><br>
-            <input type="button" name="7" value="7" onclick="fm.display.value+='7'">
-            <input type="button" name="8" value="8" onclick="fm.display.value+='8'">
-            <input type="button" name="9" value="9" onclick="fm.display.value+='9'">
-            <input type="button" name="*" value="*" onclick="fm.display.value+='*'"><br>
-            <input type="button" name="0" value="0" onclick="fm.display.value+='0'">
-            <input type="button" name="." value="." onclick="fm.display.value+='.'">
-            <input type="button" name="<" value="<" onclick="fm.display.value=fm.display.value.slice(0,fm.display.value.length-1)">
-            <input type="button" name="/" value="/" onclick="fm.display.value+='/'"><br>
-            <input type="button" name="C" value="C" onclick="fm.display.value=' '">
-            <input type="button" name="(" value="(" onclick="fm.display.value+='('">
-            <input type="button" name=")" value=")" onclick="fm.display.value+=')'">
-            <input type="button" name="1" value="=" onclick="fm.display.value=eval(fm.display.value)">
-          </div>
-        </form>
-      </div>
+        <div class="body">
+            <span>AMAN SINGH</span>
+            <form class="form" name="fm">
+                <input type="text" name="display" class="display" placeholder="Type a number">
+                <div class="mainbody">
+                    <input type="button" name="1" value="1" onclick="fm.display.value+='1'">
+                    <input type="button" name="2" value="2" onclick="fm.display.value+='2'">
+                    <input type="button" name="3" value="3" onclick="fm.display.value+='3'">
+                    <input type="button" name="+" value="+" onclick="fm.display.value+='+'"><br>
+                    <input type="button" name="4" value="4" onclick="fm.display.value+='4'">
+                    <input type="button" name="5" value="5" onclick="fm.display.value+='5'">
+                    <input type="button" name="6" value="6" onclick="fm.display.value+='6'">
+                    <input type="button" name="-" value="-" onclick="fm.display.value+='-'"><br>
+                    <input type="button" name="7" value="7" onclick="fm.display.value+='7'">
+                    <input type="button" name="8" value="8" onclick="fm.display.value+='8'">
+                    <input type="button" name="9" value="9" onclick="fm.display.value+='9'">
+                    <input type="button" name="*" value="*" onclick="fm.display.value+='*'"><br>
+                    <input type="button" name="0" value="0" onclick="fm.display.value+='0'">
+                    <input type="button" name="." value="." onclick="fm.display.value+='.'">
+                    <input type="button" name="<" value="<" onclick="fm.display.value=fm.display.value.slice(0,fm.display.value.length-1)">
+                    <input type="button" name="/" value="/" onclick="fm.display.value+='/'"><br>
+                    <input type="button" name="C" value="C" onclick="fm.display.value=' '">
+                    <input type="button" name="(" value="(" onclick="fm.display.value+='('">
+                    <input type="button" name=")" value=")" onclick="fm.display.value+=')'">
+                    <input type="button" name="1" value="=" onclick="fm.display.value=eval(fm.display.value)">
+                </div>
+            </form>
+        </div>
     </div>
-  </body>
-</html>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 1ea710e..7b4d3a9 100644
--- a/style.css
+++ b/style.css
@@ -1,57 +1,59 @@
-*{
-  margin: 0px;
-  padding: 0px;
-  box-sizing:border-box;
+* {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
 }
-body{
-  background-color: #7474ff;
+
+body {
+    background-color: #7474ff;
 }
 
-span{
-  font-size: 11px;
-  color: gray;
-  font-weight: bold;
+span {
+    font-size: 11px;
+    color: gray;
+    font-weight: bold;
 }
-.container{
-  font-family: serif;
-  position:fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-  width: 170px;
-  background-color: #fff;
-  border: 3px solid #fff;
-  border-radius: 5px;
-  box-shadow: 0px 0px 10px 10px rgba(74,74,74, 0.7);
-  padding: 15px;
+
+.container {
+    font-family: serif;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /* width: 170px; */
+    background-color: #fff;
+    border: 3px solid #fff;
+    border-radius: 5px;
+    box-shadow: 0px 0px 10px 10px rgba(74, 74, 74, 0.7);
+    padding: 15px;
 }
-.display{
-  height: 51px;
-  width: 141px;
-  outline: none;
-  border:none;
-  padding: 0px 11px;
-  font-size: 15px;
-  border-radius: 5%;
+
+.display {
+    height: 51px;
+    width: 141px;
+    outline: none;
+    border: none;
+    padding: 0px 11px;
+    font-size: 15px;
+    border-radius: 5%;
     overflow: auto scroll;
-  box-shadow: inset 3px 2px 8px rgba(150,150,150,0.1),inset 2px 2px 1px rgba(150,150,150,0.5),inset 3px 2px 8px rgba(150,150,150,0.1),2px 2px 1px rgba(150,150,150,0.5);
-}
-input[type=button]{
-  text-align: center;
-  margin-top: 10px;
-  margin-left: 2px;
-  background-color: #fff;
-  border: none;
-  outline: none;
-  width: 37px;
-  height: 36px;
-  border-radius: 6px;
-  box-shadow: inset 1px 2px 8px rgba(150,150,150,0.1),inset 1px 1px 2px rgba(150,150,150,0.3),inset 1px 1px 2px rgba(150,150,150,0.3), 1px 1px 2px rgba(150,150,150,0.3);
+    box-shadow: inset 3px 2px 8px rgba(150, 150, 150, 0.1), inset 2px 2px 1px rgba(150, 150, 150, 0.5), inset 3px 2px 8px rgba(150, 150, 150, 0.1), 2px 2px 1px rgba(150, 150, 150, 0.5);
 }
-input[type=button]:focus{
-
-background-color:#7575ff;
-
-color:#fff;
 
+input[type=button] {
+    text-align: center;
+    margin-top: 10px;
+    margin-left: 2px;
+    background-color: #fff;
+    border: none;
+    outline: none;
+    width: 37px;
+    height: 36px;
+    border-radius: 6px;
+    box-shadow: inset 1px 2px 8px rgba(150, 150, 150, 0.1), inset 1px 1px 2px rgba(150, 150, 150, 0.3), inset 1px 1px 2px rgba(150, 150, 150, 0.3), 1px 1px 2px rgba(150, 150, 150, 0.3);
 }
+
+input[type=button]:focus {
+    background-color: #7575ff;
+    color: #fff;
+}
\ No newline at end of file
