Merge pull request #26 from kunwar-ps/main

css added for calculator project
GDG-GTBIT · Oct 25, 2021 · c09d9c3 · c09d9c3
2 parents b2e2e75 + a0bc8ef
commit c09d9c3
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 11 deletions.
diff --git a/Projects/Calculator/index.html b/Projects/Calculator/index.html
@@ -4,21 +4,19 @@
     <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="styles.css" />
+
 </head>
 <body>
     <center>
-        <div class="display">
-            <textarea placeholder="numbers will display here">
-
-            </textarea>
-        </div>
-        <div class="numbers">
-            <ul class="number-layer" style="list-style-type:none;">
-                <li><button>C</button><button>=</button><button>+</button></li>
+        <div class="calculator">
+            <input type = "text" class = "screen" placeholder="enter"></input>
+            <ul class="number-layer">
+                <li><button>c</button><button>=</button><button>+</button><button>bk</button></li>
                 <li><button class="calculator-number">1</button><button class="calculator-number">2</button><button class="calculator-number">3</button><button>/</button></li>
                 <li><button class="calculator-number">4</button><button class="calculator-number">5</button><button class="calculator-number">6</button><button>-</button></li>
-                <li><button class="calculator-number">7</button><button class="calculator-number">8</button><button class="calculator-number">9</button><button>X</button></li>
-
+                <li><button class="calculator-number">7</button><button class="calculator-number">8</button><button class="calculator-number">9</button><button>x</button></li>
+                <li><button>(</button><button>)</button><button>^</button><button>sqrt</button></li>
             </ul>
 
 

diff --git a/Projects/Calculator/styles.css b/Projects/Calculator/styles.css
@@ -1 +1,52 @@
-/* you can style things anyway that you want , just be creative  */
+ul{
+	list-style: none;
+	background-color: black;
+	display: inline-block;
+	padding:  0;
+	margin: 10px;
+}
+
+
+.calculator{
+	border-radius: 10%;
+	background-color: black;
+	padding: 0;
+	padding-top: 2%;
+	display: inline-block;
+}
+
+.calculator-number{
+	color: magenta;
+}
+
+button:hover{
+	background-color: rgba(255,255,255,0.1);
+}
+
+button{
+	font-size: 30px;
+	border: black;
+	border-radius: 50% ;
+	margin: 5px;
+	display: inline-block;
+	width: 70px;
+	height: 70px;
+	background-color: black;
+	color: orange;
+}
+
+.screen{
+	display: block;
+	height: 80px;
+	width: 100%;
+	font-size: 30px;
+	background-color: white;
+	border: 2px solid black;
+	text-align: right;
+	padding: 2%;
+}
+
+input[type="text"]{
+	border: none;
+	outline: none;
+}