css updated

abhyuday1212 · abhyuday1212 · commit f9967230ec16 · 2023-07-30T17:21:09.000+05:30
diff --git a/Projects/Calculator/index.html b/Projects/Calculator/index.html
@@ -13,6 +13,10 @@
 </head>
 
 <body>
+        <div class="desktop-message">
+            Please switch to the desktop version for a better experience.
+        </div>
+        
     <section class="main">
         <header class="top">
             <nav>
diff --git a/Projects/Calculator/js/script.js b/Projects/Calculator/js/script.js
@@ -32,6 +32,16 @@ for (item of buttons) {
         result.innerHTML = "";
         break;
 
+      case "+":
+        inputValue += "+";
+        input.innerHTML += "+";
+        break;
+
+      case "-":
+        inputValue += "-";
+        input.innerHTML += "-";
+        break;
+
       case "*":
         inputValue += "*";
         input.innerHTML += "*";
diff --git a/Projects/Calculator/style.css b/Projects/Calculator/style.css
@@ -53,13 +53,13 @@ body {
     margin: 0 auto;
     max-width: 400px;
     border-radius: 10px;
-    margin-top: 65px;
+    margin-top: 60px;
     height: 100%;
 }
 
 #screen {
     position: relative;
-    top: -70px;
+    top: -93px;
     margin: 4px auto;
     width: 120%;
     left: -60px;
@@ -195,7 +195,7 @@ td {
 
 #calc {
     position: relative;
-    top: -70px;
+    top: -95px;
     left: -250px;
     height: 10rem;
 }
@@ -212,43 +212,32 @@ td {
     background-color: #ff5151;
 }
 
-@media only screen and (max-width: 768px) {
 
-    .main {
-        left: 0px;
-    }
-
-    #screen {
-        width: 100%;
-        left: 0px;
+/* Responsive message for screens below 893px width */
+@media only screen and (max-width: 893px) {
+.top {
+        position: relative;
     }
 
-    #calc {
-        left: 0px;
+    header {
+        color: azure;
     }
-}
-
-@media only screen and (max-width: 480px) {
 
     .header_title {
-        font-size: x-large;
-    }
-
-    #screen {
-        height: 4rem;
-        font-size: 16px;
+        text-align: center;
+        font-size: xxx-large;
     }
 
-    #input,
-    #result {
-        height: 2rem;
-        font-size: 16px;
+    .main {
+        position: relative;
+        left: 30px;
+        display: none;
     }
 
-    button,
-    .bottom-buttons {
-        width: 4.5rem;
-        height: 2.5rem;
-        font-size: 14px;
+    .desktop-message {
+        display: block;
+        text-align: center;
+        font-size: 24px;
+        background-color: #f9f9f9;
     }
 }
