Merge pull request #12 from jen67/develop

Merging

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">
-          <p>145.55</p>
+          <input type="text" id="billAmount" placeholder="0" pattern="\d*" inputmode="numeric">
         </div>
 
         <div class="amounts">
@@ -33,15 +34,18 @@ <h3>Select Tip %</h3>
             <div>15%</div>
             <div>25%</div>
             <div>50%</div>
-            <div class="custom">Custom</div>
+            <div class="custom">
+            <input type="text" id="custom" placeholder="Custom" pattern="\d*" inputmode="numeric">
+            </div>
           </div>
         </div>
 
         <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">
-            <p>5</p>
+            <input type="text" id="people" placeholder="0" pattern="\d*" inputmode="numeric">
           </div>
         </div>
       </div>
@@ -67,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>
@@ -78,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

@@ -2,4 +2,5 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: 'Space Mono', monospace; 
 }

tip-calculator-app-main/src/js/main.js

@@ -1,10 +1,10 @@
 @import './base/reset';
 @import './utils/variables';
 
+
 @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');
 
 body {
-    font-family: 'Space Mono', monospace;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -58,9 +58,26 @@ section {
             padding: 1rem;
             margin: 0.4rem 0;
             border-radius: 0.3rem;
+
+            input{
+                border: none;
+                background-color: transparent;
+                font-size: 1rem;
+                font-weight: 700; 
+                width: 100%;
+                text-align: right;
+                outline: none;
+                caret-color: $Strong-cyan;  
+            } 
+
+            ::placeholder{
+                color: $Very-dark-cyan; 
+            }
         }
 
 
+
+
         .screen img {
             width: 10px;
         }
@@ -105,9 +122,29 @@ section {
                 .custom{
                         background-color:$Very-light-grayish-cyan;
                         color:$Dark-grayish-cyan;
+
+                        input {
+                                border: none;
+                                background-color: transparent;
+                                font-size: 1rem;
+                                font-weight: 700;
+                                color: $Very-dark-cyan; 
+                                width: 100%; 
+                                text-align: right;
+                                outline: none;
+                                caret-color: $button-hover;  
+                            }
+                            
+                            ::placeholder {
+                                color: $Dark-grayish-cyan; 
+                            }
+
+                            input:hover{
+                                border:transparent;
+                            }
                     }
 
-                .custom:hover{
+                .custom:hover {
                     background-color:transparent ; 
                     border: 2px solid $button-hover;
             }
@@ -178,6 +215,7 @@ section {
             font-weight: 700;
             letter-spacing: 0.04rem;
             cursor: pointer;
+            opacity: 0.1;     
 
         }
         button:hover{
@@ -199,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;
+        }
+    }
 }