ColmanDevClubORG · OfekSagiv · Dec 7, 2024 · GilHeller · Dec 7, 2024 · GilHeller
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/Tip-Calculator.iml b/.idea/Tip-Calculator.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/design/Matplotlib Chart.png b/design/Matplotlib Chart.png
diff --git a/index.html b/index.html
@@ -6,34 +6,68 @@
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
 
-  <title>Frontend Mentor | Tip calculator app</title>
+  <title>Ofek's Tip calculator</title>
+  <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&display=swap" rel="stylesheet">
 
-  <!-- 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>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div class="white-container">
+    <div class="left-container">
 
-  Bill
+      <div class="bill-input-container">
+        <label for="bill">Bill</label>
+        <input type="number" id="bill" name="bill" placeholder="0" class="special-amnt">
+      </div>
+עןא
+      <div>
+        <p>Select Tip %</p>
+        <div class="per-btns-container">
+            <button onclick="updateTip(5)" class="per-btn" type="button" id="btn-five" >5%</button>
+            <button onclick="updateTip(10)" class="per-btn" type="button" id="btn-ten">10%</button>
+            <button onclick="updateTip(15)" class="per-btn" type="button" id="btn-fifteen">15%</button>
+            <button onclick="updateTip(25)" class="per-btn" type="button" id="btn-twenty-five">25%</button>
+            <button onclick="updateTip(50)" class="per-btn" type="button" id="btn-fifty">50%</button>
+            <input type="number" id="custom-tip-input" name="custom-tip-input" placeholder="custom">
+        </div>
+      </div>
 
-  Select Tip %
-  5%
-  10%
-  15%
-  25%
-  50%
-  Custom
+      <div class="ppl-input-container">
+        <label for="ppl-number">Number of People</label>
+        <input type="number" id="ppl-number" name="ppl-number" placeholder="1" class="special-ppl">
+      </div>
+    </div>
 
-  Number of People
+    <div class="right-container">
 
-  Tip Amount
-  / person
+      <div class="tip-amount-container">
+        <div class="flex-box-tip">
+          <p>Tip amount<br><span style="color:hsl(184, 14%, 56%)">/ person</span></p>
+        </div>
+        <div class="flex-box-tip">
+          <input type="text" id="tip-amount-input" readonly placeholder="$0.00">
+        </div>
+      </div>
 
-  Total
-  / person
+      <div class="total-container">
+        <div class="flex-box-total">
+          <p>Total<br> <span style="color:hsl(184, 14%, 56%)">/ person</span></p>
+        </div>
+        <div class="flex-box-total">
+          <input type="text"  id="total-amount-input" readonly placeholder="$0.00">
+        </div>
+      </div>
+      <div class="reset-btn-container">
+        <button type="button" class="reset-btn" id="reset-btn">Reset</button>
+      </div>
+    </div>
 
-  Reset
+  </div>
+<script src="script.js"></script>
 </body>
-</html>
+</html>
+
+
+
diff --git a/script.js b/script.js
@@ -0,0 +1,84 @@
+let billAmount = 0;
+let howManyPpl = 1;
+let tipPercentage = 0;
+let tipForEach = 0;
+let customTipPercentage = 0;
+
+document.getElementById('reset-btn').addEventListener('click', resetValues);
+
+document.getElementById('bill').addEventListener('input', (event) => {
+    billAmount = Number(event.target.value) || 0;
+    totalPerPerson();
+    tipPerPerson();
+});
+
+document.getElementById('ppl-number').addEventListener('input', (event) => {
+    howManyPpl = Number(event.target.value) || 1;
+    totalPerPerson();
+    tipPerPerson();
+});
+
+document.getElementById('custom-tip-input').addEventListener('input', (event) => {
+    tipPercentage = 0;
+    customTipPercentage = Number(event.target.value) || 0;
+    updateTip(customTipPercentage);
+    totalPerPerson();
+    tipPerPerson();
+});
+
+
+function updateTip(newValue) {
+    if(tipPercentage!==0){
+        resetCustomTip();
+    }
+    tipPercentage = newValue / 100;
+    totalPerPerson();
+    tipPerPerson();
+    console.log("Tip Percentage Updated:", tipPercentage);
+}
+
+function totalPerPerson() {
+
+    const totalWithTip = billAmount * (1 + tipPercentage);
+    const result = howManyPpl > 0 ? (totalWithTip / howManyPpl).toFixed(2) : 0;
+
+    // הצגת התוצאה בתיבה
+    document.getElementById('total-amount-input').value = `$${result}`;
+    console.log("bill amount:", billAmount, "num of ppl:", howManyPpl, "tip:", tipPercentage, "result:", result); // הדפסת הערכים בקונסול
+}
+
+function tipPerPerson() {
+
+    tipForEach = billAmount * (1 + tipPercentage) - billAmount;
+
+    const tipRes = howManyPpl > 0 ? (tipForEach / howManyPpl).toFixed(2) : 0;
+
+
+    document.getElementById('tip-amount-input').value = `$${tipRes}`;
+    console.log( "result:", tipRes); // הדפסת הערכים בקונסול
+}
+
+function resetValues() {
+    // איפוס המשתנים הגלובליים
+    billAmount = 0;
+    howManyPpl = 1;
+    tipPercentage = 0;
+    tipForEach = 0;
+    customTipPercentage = 0;
+
+    // איפוס תיבות הקלט
+    document.getElementById('bill').value = '';
+    document.getElementById('ppl-number').value = '';
+    document.getElementById('total-amount-input').value = '';
+    document.getElementById('tip-amount-input').value = '';
+    document.getElementById('custom-tip-input').value = '';
+
+    // חישוב מחדש
+    totalPerPerson();
+    console.log("All values reset to default.");
+}
+
+function resetCustomTip(){
+
+    document.getElementById('custom-tip-input').value = 'Custom';
+}