From d19c43d07c95f741a549088dc2fd9151ad4aa9bf Mon Sep 17 00:00:00 2001
From: Chen-kaduri <chenkaduri@gmail.com>
Date: Sun, 1 Dec 2024 18:58:11 +0200
Subject: [PATCH 1/3] made calculator html and css

---
 index.css  | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html |  73 +++++++++++++++-------
 2 files changed, 223 insertions(+), 23 deletions(-)
 create mode 100644 index.css

diff --git a/index.css b/index.css
new file mode 100644
index 0000000..0f5bf54
--- /dev/null
+++ b/index.css
@@ -0,0 +1,173 @@
+body {
+    color: hsl(186, 14%, 43%);
+    background-color: hsl(185, 41%, 84%);
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    margin: 0; 
+    padding: 0;
+}
+
+.FirstContainer {
+    display: flex;
+    flex-direction: column; 
+    align-items: center;
+    margin: auto; /*מרכוז הרכבים בתוך הקונטיינר */
+    text-align: center;
+    padding: 2rem;
+    width: 90%; 
+    max-width: 50rem; 
+}
+
+.calculator {
+    margin-top: 2rem;
+    background-color: white;
+    display: flex;
+    flex-wrap: wrap; /*כדי ליצור רספונסיביות*/
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-radius: 0.625rem;
+}
+
+.input-bill {
+    flex: 1;
+    min-width: 15rem; /* התאמה למסכים קטנים */
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    text-align: left;
+    padding: 1rem;
+}
+
+.output-bill{
+    flex: 1;
+    min-width: 15rem; /* התאמה למסכים קטנים */
+}
+
+
+.input-icon {
+    position: relative;
+    width: 100%;
+}
+
+.input-icon input {
+    background-color: hsl(189, 41%, 97%);
+    width: 70%;
+    padding-left: 2.5rem;
+    padding-right: 1rem;
+    height: 2rem; 
+    font-size: 1rem;
+    border: 0.063rem solid #ccc;
+    border-radius: 0.5rem;
+} 
+
+.input-icon img {
+    position: absolute;
+    top: 50%;
+    left: 0.625rem;
+    height: 1rem;
+    transform: translateY(-50%);
+    width: auto;
+    pointer-events: none;
+}
+
+.tip-btn {
+    display: inline-flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    width: 6rem;
+    height: 2.5rem;
+    cursor: pointer;
+    background-color: hsl(183, 100%, 15%);
+    color: white;
+    border: none;
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    border-radius: 0.5rem;
+    justify-content: center;
+    padding: 0.5rem;
+}
+
+.tip-btn:hover {
+    background-color: hsl(172, 67%, 45%);
+}
+
+#custom-btn:hover {
+    background-color: hsl(172, 67%, 45%);
+}
+
+#custom-btn {
+    background-color: hsl(189, 41%, 97%);
+    color: hsl(186, 14%, 43%);
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.output-bill{
+    text-align: left;
+    background-color: hsl(183, 100%, 15%);
+    border-radius: 0.5rem;
+    padding: 1rem;
+}
+
+#reset-btn {
+    text-align: center;
+    width: 90%;
+    height: 2.5rem;
+    border: none;
+    cursor: pointer;
+    background-color: hsl(172, 67%, 45%);
+    color: hsl(183, 100%, 15%);
+    font-family: "Space Mono", monospace;
+    font-weight: 400;
+    font-style: normal;
+    display: block;
+    margin: 1rem auto; /* מבטיח שהכפתור יישאר ממורכז */
+    border-radius: 0.5rem;
+}
+
+div h2 {
+    color: hsl(172, 67%, 45%);
+}
+
+div p {
+    color: white;
+}
+
+div p span {
+    color: hsl(186, 14%, 43%);
+}
+
+.results {
+    display: flex;
+    justify-content: space-between;
+}
+
+.reset {
+    margin-top: 5rem;
+}
+
+
+@media (max-width: 375px) {
+    .container {
+        padding: 1rem; /* פחות ריווח במסכים קטנים */
+        width: 100%; /* רוחב מלא במסכים קטנים */
+    }
+
+    .calculator {
+        flex-direction: column; 
+        gap: 1rem; /* ריווח בין החלקים */
+    }
+
+    .output-bill,
+    .input-section {
+        min-width: 100%; /* מנצל את כל הרוחב הזמין */
+    }
+
+    .tip-btn {
+        width: 100%; 
+    }
+}
diff --git a/index.html b/index.html
index 5c09e8d..65a6676 100644
--- a/index.html
+++ b/index.html
@@ -5,35 +5,62 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
-  
+  <link rel="stylesheet" href="index.css">
   <title>Frontend Mentor | Tip calculator app</title>
 
-  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
-  <style>
-    .attribution { font-size: 11px; text-align: center; }
-    .attribution a { color: hsl(228, 45%, 44%); }
-  </style>
+  <!---------font----------------->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+  <!---------font----------------->
 </head>
-<body>
-
-  Bill
 
-  Select Tip %
-  5%
-  10%
-  15%
-  25%
-  50%
-  Custom
-
-  Number of People
+<body>
+  <!-- FirstContainer-->
+  <div class="FirstContainer">
+    <img src="/images/logo.svg" alt="logo">
+    <div class="calculator">
+        <!-- Left things-->
+        <div class="input-bill">
+            <label for="bill">Bill</label>
+            <div class="input-icon">
+                <input type="number" id="bill" placeholder="0">
+                <img src="/images/icon-dollar.svg" alt="dollar icon">
+            </div>
+            
+            <label for="tips">Select Tip %</label>
+            <div class="tip-buttons">
+                <button class="tip-btn" data-tip="5">5%</button>
+                <button class="tip-btn" data-tip="10">10%</button>
+                <button class="tip-btn" data-tip="15">15%</button>
+                <button class="tip-btn" data-tip="25">25%</button>
+                <button class="tip-btn" data-tip="50">50%</button>
+                <button class="tip-btn" id="custom-btn" data-tip="Custom">Custom</button>
+            </div>
 
-  Tip Amount
-  / person
+            <label for="amount people">Number of People</label>
+            <div class="input-icon">
+                <input type="number" id="people" placeholder="0">
+                <img src="/images/icon-person.svg" alt="person icon">
+            </div>
+        </div>
 
-  Total
-  / person
+        <!-- Right things -->
+        <div class="output-bill">
+            <div class="results">
+                <p>Tip Amount <br> <span>/ person</span></p>
+                <h2 id="tip-amount">$0.00</h2>
+            </div>
+            <div class="results">
+                <p>Total <br> <span>/ person</span></p>
+                <h2 id="total">$0.00</h2>
+            </div>
+            <div class="reset">
+                 <button id="reset-btn">RESET</button>
+            </div> 
+        </div>
+    </div>
+</div>
 
-  Reset
 </body>
 </html>
\ No newline at end of file

From e1fe5339c06e32f334375449fca76b662d5011bc Mon Sep 17 00:00:00 2001
From: Chen-kaduri <chenkaduri@gmail.com>
Date: Sat, 7 Dec 2024 17:24:16 +0200
Subject: [PATCH 2/3] add index.js and changes in html

---
 index.html | 14 ++++++++------
 index.js   | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 index.js

diff --git a/index.html b/index.html
index 65a6676..f8876d3 100644
--- a/index.html
+++ b/index.html
@@ -30,11 +30,11 @@
             
             <label for="tips">Select Tip %</label>
             <div class="tip-buttons">
-                <button class="tip-btn" data-tip="5">5%</button>
-                <button class="tip-btn" data-tip="10">10%</button>
-                <button class="tip-btn" data-tip="15">15%</button>
-                <button class="tip-btn" data-tip="25">25%</button>
-                <button class="tip-btn" data-tip="50">50%</button>
+                <button class="tip-btn" onclick="calcTip(5)" >5%</button>
+                <button class="tip-btn" onclick="calcTip(10)" >10% </button>
+                <button class="tip-btn" onclick="calcTip(15)">15%</button>
+                <button class="tip-btn" onclick="calcTip(25)">25%</button>
+                <button class="tip-btn" onclick="calcTip(50)">50%</button>
                 <button class="tip-btn" id="custom-btn" data-tip="Custom">Custom</button>
             </div>
 
@@ -43,6 +43,8 @@
                 <input type="number" id="people" placeholder="0">
                 <img src="/images/icon-person.svg" alt="person icon">
             </div>
+             <button class="tip-btn" id="submit-btn" >submit</button>
+
         </div>
 
         <!-- Right things -->
@@ -61,6 +63,6 @@ <h2 id="total">$0.00</h2>
         </div>
     </div>
 </div>
-
+<script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..792363f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,39 @@
+let bill=0;
+let numberPeople=0;
+let tip=0; 
+
+// ההזנה ללחצן טיפ
+const calcTip= (t)=>{
+    tip= t; 
+   }
+// מה שהמשתמש הכניס ידנית (כמות ומספר חשבון)
+   const all_update =() =>{
+       bill= document.getElementById("bill").value;
+       numberPeople = document.getElementById("people").value;
+   }
+
+
+   const test=()=>{
+       // בדיקת תקינות קלט
+       //הכנסת מספר שלילי לתשלום 
+       if (isNaN(bill) || bill <= 0) {
+           alert("Please enter a valid bill amount");
+           return;
+        }
+        //הכנסת מספר שלילי של אנשים
+        if (isNaN(numberPeople) || numberPeople <= 0) {
+            alert("Please enter a valid number of people");
+            return;
+        }
+    const tipAmount = ((bill * tip)/ 100)/numberPeople; // לכל בנאדם- חישוב התשלום עם האחוז-TIP AMOUNT
+    const totalofperson= (bill/numberPeople)+ tipAmount;
+            
+    document.getElementById("tip-amount").innerHTML = `$${tipAmount.toFixed(2)}`;//התוצאה עם שתי ספרות אחרי הנקודה
+    document.getElementById("total").innerHTML = `$${totalofperson.toFixed(2)}`;
+}
+
+//הקשבה לבחירת המשתמש
+document.getElementById("bill").addEventListener("input", all_update);
+document.getElementById("people").addEventListener("input", all_update);
+document.getElementById("submit-btn").addEventListener("click", test);
+

From 83bb72558501648121ab876ca6851dba16e6ce91 Mon Sep 17 00:00:00 2001
From: Chen-kaduri <chenkaduri@gmail.com>
Date: Sun, 8 Dec 2024 21:53:04 +0200
Subject: [PATCH 3/3] changes aftter code review

---
 index.css  | 24 ++++++++++--------------
 index.html |  4 ++--
 index.js   | 52 +++++++++++++++++++++++++---------------------------
 3 files changed, 37 insertions(+), 43 deletions(-)

diff --git a/index.css b/index.css
index 0f5bf54..1b64a1f 100644
--- a/index.css
+++ b/index.css
@@ -8,11 +8,11 @@ body {
     padding: 0;
 }
 
-.FirstContainer {
+.firstContainer {
     display: flex;
     flex-direction: column; 
     align-items: center;
-    margin: auto; /*מרכוז הרכבים בתוך הקונטיינר */
+    margin: auto; /*center the elements in the container*/
     text-align: center;
     padding: 2rem;
     width: 90%; 
@@ -23,7 +23,7 @@ body {
     margin-top: 2rem;
     background-color: white;
     display: flex;
-    flex-wrap: wrap; /*כדי ליצור רספונסיביות*/
+    flex-wrap: wrap; /*responsive*/
     align-items: center;
     justify-content: space-between;
     padding: 1rem;
@@ -32,7 +32,7 @@ body {
 
 .input-bill {
     flex: 1;
-    min-width: 15rem; /* התאמה למסכים קטנים */
+    min-width: 15rem; /* adjust to smaller screens */
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -42,7 +42,7 @@ body {
 
 .output-bill{
     flex: 1;
-    min-width: 15rem; /* התאמה למסכים קטנים */
+    min-width: 15rem; /*adjust to smaller screens*/
 }
 
 
@@ -125,7 +125,7 @@ body {
     font-weight: 400;
     font-style: normal;
     display: block;
-    margin: 1rem auto; /* מבטיח שהכפתור יישאר ממורכז */
+    margin: 1rem auto; /* center the button*/
     border-radius: 0.5rem;
 }
 
@@ -133,10 +133,6 @@ div h2 {
     color: hsl(172, 67%, 45%);
 }
 
-div p {
-    color: white;
-}
-
 div p span {
     color: hsl(186, 14%, 43%);
 }
@@ -153,18 +149,18 @@ div p span {
 
 @media (max-width: 375px) {
     .container {
-        padding: 1rem; /* פחות ריווח במסכים קטנים */
-        width: 100%; /* רוחב מלא במסכים קטנים */
+        padding: 1rem; 
+        width: 100%; /* full size in smaller screens */
     }
 
     .calculator {
         flex-direction: column; 
-        gap: 1rem; /* ריווח בין החלקים */
+        gap: 1rem; 
     }
 
     .output-bill,
     .input-section {
-        min-width: 100%; /* מנצל את כל הרוחב הזמין */
+        min-width: 100%; /*  maximize the space*/
     }
 
     .tip-btn {
diff --git a/index.html b/index.html
index f8876d3..4d14b7c 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,7 @@
 
 <body>
   <!-- FirstContainer-->
-  <div class="FirstContainer">
+  <div class="firstContainer">
     <img src="/images/logo.svg" alt="logo">
     <div class="calculator">
         <!-- Left things-->
@@ -35,7 +35,7 @@
                 <button class="tip-btn" onclick="calcTip(15)">15%</button>
                 <button class="tip-btn" onclick="calcTip(25)">25%</button>
                 <button class="tip-btn" onclick="calcTip(50)">50%</button>
-                <button class="tip-btn" id="custom-btn" data-tip="Custom">Custom</button>
+                <button class="tip-btn" id="custom-btn" >Custom</button>
             </div>
 
             <label for="amount people">Number of People</label>
diff --git a/index.js b/index.js
index 792363f..22de4f0 100644
--- a/index.js
+++ b/index.js
@@ -1,39 +1,37 @@
-let bill=0;
-let numberPeople=0;
-let tip=0; 
+let bill = 0;
+let numberPeople = 0;
+let tip = 0;
 
 // ההזנה ללחצן טיפ
-const calcTip= (t)=>{
-    tip= t; 
-   }
+const calcTip = (t) => {
+    tip = t;
+}
 // מה שהמשתמש הכניס ידנית (כמות ומספר חשבון)
-   const all_update =() =>{
-       bill= document.getElementById("bill").value;
-       numberPeople = document.getElementById("people").value;
-   }
+const allUpdate = () => {
+    bill = document.getElementById("bill").value;
+    numberPeople = document.getElementById("people").value;
+}
+
 
+const test = () => {
+    if (isNaN(bill) || bill <= 0) {
+        alert("Please enter a valid bill amount");
+        return;
+    }
+    //הכנסת מספר שלילי של אנשים
+    if (isNaN(numberPeople) || numberPeople <= 0) {
+        alert("Please enter a valid number of people");
+        return;
+    }
+    const tipAmount = ((bill * tip) / 100) / numberPeople; // לכל בנאדם- חישוב התשלום עם האחוז-TIP AMOUNT
+    const totalofperson = (bill / numberPeople) + tipAmount;
 
-   const test=()=>{
-       // בדיקת תקינות קלט
-       //הכנסת מספר שלילי לתשלום 
-       if (isNaN(bill) || bill <= 0) {
-           alert("Please enter a valid bill amount");
-           return;
-        }
-        //הכנסת מספר שלילי של אנשים
-        if (isNaN(numberPeople) || numberPeople <= 0) {
-            alert("Please enter a valid number of people");
-            return;
-        }
-    const tipAmount = ((bill * tip)/ 100)/numberPeople; // לכל בנאדם- חישוב התשלום עם האחוז-TIP AMOUNT
-    const totalofperson= (bill/numberPeople)+ tipAmount;
-            
     document.getElementById("tip-amount").innerHTML = `$${tipAmount.toFixed(2)}`;//התוצאה עם שתי ספרות אחרי הנקודה
     document.getElementById("total").innerHTML = `$${totalofperson.toFixed(2)}`;
 }
 
 //הקשבה לבחירת המשתמש
-document.getElementById("bill").addEventListener("input", all_update);
-document.getElementById("people").addEventListener("input", all_update);
+document.getElementById("bill").addEventListener("input", allUpdate);
+document.getElementById("people").addEventListener("input", allUpdate);
 document.getElementById("submit-btn").addEventListener("click", test);