done

Author: jen67

tip-calculator-app-main/dist/css/main.css

@@ -7,6 +7,7 @@
   <meta name="author" content="Gift Amachree">
   <meta name="description" content="frontend-mentor.io Tip calculator app">
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  
   <link rel="stylesheet" href="dist/css/main.css">
   <title>Frontend Mentor | Tip calculator app</title>
 </head>
@@ -22,7 +23,7 @@ <h1>SPLI <br> TTER</h1>
         <h2>Bill</h2>
         <div class="screen">
           <img src="./images/icon-dollar.svg" alt="dollar Icon">
-          <input type="text" id="billAmount" placeholder="142.55" pattern="\d*" inputmode="numeric">
+          <input type="text" id="billAmount" placeholder="0" pattern="\d*" inputmode="numeric">
         </div>
 
         <div class="amounts">
@@ -41,9 +42,10 @@ <h3>Select Tip %</h3>
 
         <div class="No-of-people">
           <h4>Number of People</h4>
+          <p id="checker"></p>
           <div class="screen">
             <img src="./images/icon-person.svg" alt="person icon">
-            <input type="text" id="people" placeholder="5" pattern="\d*" inputmode="numeric">
+            <input type="text" id="people" placeholder="0" pattern="\d*" inputmode="numeric">
           </div>
         </div>
       </div>
@@ -69,7 +71,7 @@ <h5>Total</h5>
           <div class="price" id="price">$0.00</div>
         </div>
 
-        <button>RESET</button>
+        <button type="button" id="btn">RESET</button>
       </div>
     </section>
   </main>
@@ -80,6 +82,8 @@ <h5>Total</h5>
       Coded by <a href="https://www.linkedin.com/in/gift-amachree-8a523623b/">Gift Amachree</a>.
     </div>
   </footer>
+
+  <script src="./src/js/main.js"></script>
 </body>
 
 </html>

tip-calculator-app-main/dist/css/main.css.map

@@ -2,7 +2,7 @@
   "name": "tip-calculator-app-main",
   "version": "1.0.0",
   "description": "![Design preview for the Tip calculator app coding challenge](./design/desktop-preview.jpg)",
-  "main": "index.js",
+  "main": "main.js",
   "scripts": {
   "compile:sass": "sass src/scss:dist/css",
   "watch:sass": "sass --watch src/scss:dist/css",

tip-calculator-app-main/index.html

@@ -0,0 +1,7 @@
+const getTip = document.querySelector('#custom');
+const Bill = document.querySelector('#billAmount');
+const nOfPeople = document.querySelector('#people');
+const btn = document.querySelector('#btn');
+const Validation = document.querySelector('#checker');
+
+

tip-calculator-app-main/package.json

@@ -1,6 +1,7 @@
 @import './base/reset';
 @import './utils/variables';
 
+
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');
 
 body {
@@ -66,6 +67,7 @@ section {
                 width: 100%;
                 text-align: right;
                 outline: none;
+                caret-color: $Strong-cyan;  
             } 
 
             ::placeholder{
@@ -130,6 +132,7 @@ section {
                                 width: 100%; 
                                 text-align: right;
                                 outline: none;
+                                caret-color: $button-hover;  
                             }
 
                             ::placeholder {
@@ -212,6 +215,7 @@ section {
             font-weight: 700;
             letter-spacing: 0.04rem;
             cursor: pointer;
+            opacity: 0.1;     
 
         }
         button:hover{
@@ -233,4 +237,94 @@ footer{
 .attribution a {
       color:$Dark-grayish-cyan; 
 } 
+}
+
+@media (min-width: 768px) {
+    body {
+        padding: 0 2rem;
+    }
+
+    header {
+        h1{
+        margin: 2rem 0;
+        font-size: 1.3rem;
+        }
+    }
+
+    section {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 3rem;
+        max-width: 1000px;
+        margin: auto;
+        gap: 3rem; 
+
+        
+        .white-background {
+            width: 100%;
+
+            .screen {
+                input
+                {
+                    font-size: 1.5rem;
+                }
+
+                img{
+                    width: 16px;
+                }
+
+            }
+
+
+            .amounts{
+
+            .discounts{
+            .custom{
+                    input{
+                        font-size: 1.5rem;
+                    }
+                
+                }
+            }
+
+            }
+        }
+
+        .green-background {
+            width: 100%;
+            padding: 2.5rem 2rem 0 2rem;
+
+            button{
+                margin: 8rem 0 0 0;
+                padding: 1rem 0;
+            }
+
+            .Tip:nth-of-type(2){
+                margin-top: 3.3rem;
+            }
+
+            .Tip{
+                .Tip-total, .Tip-amount 
+                {
+
+                        h5{
+                            font-size: 1.2rem;
+                        }
+                } 
+                
+                .price{
+                    font-size: 2rem;
+                
+                }
+            }
+        }
+    }
+
+    footer {
+        .attribution {
+            font-size: 1.2rem;
+            margin-top: 2rem;
+        }
+    }
 }