update ui

Sanchitbajaj02 · Aug 18, 2020 · 5a929f8 · 5a929f8
1 parent 8d74457
commit 5a929f8
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+![GitHub release (latest by date)](https://img.shields.io/github/v/release/Sanchitbajaj02/Calculator?style=flat-square)
+![GitHub issues](https://img.shields.io/github/issues/Sanchitbajaj02/Calculator?style=flat-square)
+# Calculator
+
+### Basic calculator using CSS and JavaScript
+The theme of the calculator is inspired by Xiaomi's Default Calculator
+
diff --git a/index.html b/index.html
@@ -3,19 +3,24 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
     <link rel="stylesheet" href="scss/style.css">
     <title>cal</title>
 </head>
 <body>
     <div class="centercal">
         <form name="cal">
-            <input type="text" value="Calculator" id="app_name">
+            <input type="text" value="Sanchit's Calculator" id="app_name">
 
             <input type="text" name="answers" id="display_ans">
 
             <div class="layer2">
                 <input type="button" value="C" class="operator" onclick="cal.answers.value = ''  ">
-                <input type="button" value="=" class="operator" onclick="cal.answers.value = eval(cal.answers.value) ">
+                <button type="button" id="cross" class="operator" onclick=" cal.answers.value = cal.answers.value.substring(0, cal.answers.value.length - 1) "><i class="fas fa-backspace"></i></button>
+                <input type="button" value="%" class="operator" onclick="cal.answers.value += '%'  ">
+                <input type="button" class="operator" value="/" onclick="cal.answers.value +='/' ">
+
+
             </div>
             <div class="layer1">
                 <input type="button" class="main_num" value="7" onclick="cal.answers.value +='7' ">
@@ -36,10 +41,10 @@
                 <input type="button" class="operator" value="+" onclick="cal.answers.value +='+' ">
             </div>
             <div class="layer1">
-                <input type="button" class="operator" value="." onclick="cal.answers.value +='.' ">
+                <input type="button" class="main_num" value="00" onclick="cal.answers.value += '00' ">
                 <input type="button" class="main_num" value="0" onclick="cal.answers.value +='0' ">
-                <input type="button" class="operator" value="%" onclick="cal.answers.value +='%' ">
-                <input type="button" class="operator" value="/" onclick="cal.answers.value +='/' ">
+                <input type="button" class="operator" value="." onclick="cal.answers.value +='.' ">
+                <input type="button" class="operator circle" value="=" onclick="cal.answers.value = eval(cal.answers.value) ">
             </div>
         </form>
     </div>

diff --git a/scss/style.css b/scss/style.css
diff --git a/scss/style.css.map b/scss/style.css.map
diff --git a/scss/style.scss b/scss/style.scss
@@ -9,7 +9,7 @@
     outline: none;
 }
 
-$bg-color: #303030;
+$bg-color: #121212;
 $bg-text: #fff;
 
 * {
@@ -19,9 +19,7 @@ $bg-text: #fff;
 }
 
 body {
-    background: url('../img/img14.jpg');
-    background-size: 100% 100%;
-    // background: radial-gradient(#00AAFF, #00FF6C);
+    background: #000;
 }
 
 .centercal {
@@ -30,22 +28,20 @@ body {
 }
 
 form {
-    width: 400px;
-    height: 520px;
-    box-shadow: 0 0 20px 5px grey;
-    z-index: 10;
-    opacity: 0.9;
+    width: 360px;
+    height: 573px;
+    box-shadow: 0 0 10px 5px rgba(245, 122, 51, 0.76);
+    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #00000057);
 }
 
+
 #app_name {
     width: inherit;
-    padding: 2px 0px 2px 10px;
+    padding: 4px 0px 4px 10px;
     font-size: 0.8rem;
     background-color: $bg-color;
     color: $bg-text;
     @include line();
-    font-family: sans-serif;
-    opacity: 1;
 }
 
 #display_ans{
@@ -68,29 +64,35 @@ form {
 
 .layer2 {
     width: inherit;
-    height: 40px;
+    height: 90px;
     display: flex;
     justify-content: center;
 }
 
-input{
+input, button{
     flex: 1;
-    font-size: 1.4rem;
+    font-size: 1.5rem;
+    background-color: $bg-color;
     color: $bg-text;      
     @include line();
-    border: 1px solid #504F4F;
+    border: 1px solid #504f4f1a;
 
-    &:hover {
-        background-color: #474747;
+    &:active {
+        background-color: #ff651dda;
     }
 }
 
-.main_num {
-    background-color: #101010;
-}
-
 .operator {
     background-color: $bg-color;
-
+    color: #FE7436;
+
+    &:active {
+        color: #000;
+    }
 }
 
+.circle {
+    border-radius: 50%;
+    background-color: #FE7436;
+    color: $bg-text;
+}