updated

Author: Bazil21

index.html

@@ -4,7 +4,7 @@
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>Page Title</title>
-    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
     <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
     <script src='https://kit.fontawesome.com/a076d05399.js'></script>
@@ -33,7 +33,7 @@ <h3 id="expense">0.00 $</h3>
                                 <label for="basic-url" id="form-label">Amount<br>
                                 (positive for income, negative for expense)</label><br>
                         <div class="input-group">
-                            <input type="number" class="form-control"  id="input" aria-label="Amount (to the nearest dollar)">
+                            <input type="number" class="form-control"  id="input">
                             <span class="sideicon">.00</span>
                         </div>
                         <button class="button" type="button" id="Save" onclick="expense()">Save</button>

main.css

@@ -1,7 +1,5 @@
 body{
-    background-image: url("./Images/money1.jpg");
-    background-repeat: no-repeat;
-    background-size:cover
+    
 }
 
 .container1{
@@ -11,9 +9,6 @@ body{
   background-color: rgba(255, 0, 0, 0.4);
   margin-top: 2rem;
   border: black 2px solid;
-  -webkit-box-shadow: 10px 7px 16px 2px rgba(25,224,214,0.8);
-  -moz-box-shadow: 10px 7px 16px 2px rgba(25,224,214,0.8);
-  box-shadow: 10px 7px 16px 2px rgba(25,224,214,0.8);
   border-radius: .5rem;
 }
 #header{
@@ -111,4 +106,57 @@ input[type="number"]:focus{
 }
 .button:focus{
     outline: none;
+}
+
+@media screen and (max-width: 1166px) {
+    .container1 {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .container1 {
+        width: 100%;
+        height: 90%;
+        margin: 0;
+    }
+    
+    .income{
+        width: 150px;
+        height: 150px;
+        margin-left: 2px;
+    }
+    .expense{
+        width: 150px;
+        height: 150px;
+        margin-left: 150px;
+    }
+}
+@media screen and (max-width: 540px){
+    .income{
+        width: 200px;
+        height: 150px;
+        margin-left: 30px;
+    }
+    .expense{
+        width: 200px;
+        height: 150px;
+        margin-left: 240px;
+    }
+    
+}
+@media screen and (max-width: 280px) {
+    .container1 {
+        width: 80%;
+        height: 100%;
+    }
+    .income{
+        width: 100px;
+        height: 100px;
+    }
+    .expense{
+        width: 100px;
+        height: 100px;
+        margin-left: -100px;
+    }
 }

script.js

@@ -19,7 +19,9 @@ function expense(){
           closing_balance = total_amount + parseInt(input);
         cbalance.innerHTML = closing_balance + " .00 $" ;
         income.innerHTML = closing_balance + " .00 $";
-        document.getElementById("input").value.reset();
+        document.getElementById("input").value;
+        document.createElement("h2");
+
     }
 
 
@@ -34,5 +36,5 @@ function expense(){
      document.getElementById("cbalance").innerHTML = total_amount + " .00 $"
     }
 
-    
+    parseInt(input) = "0";
 }