Merge pull request #749 from amanver45/bill

Add Bill Splitter
iamrahulmahato · Oct 10, 2024 · ff26dc5 · ff26dc5
2 parents e9adf7a + 7ec300c
commit ff26dc5
Show file tree

Hide file tree

Showing 6 changed files with 323 additions and 0 deletions.
diff --git a/assets/image/sew.jpg b/assets/image/sew.jpg
diff --git a/index.html b/index.html
@@ -929,6 +929,19 @@ <h3 class="card-heading">Email Validator</h3>
                         </p>
                     </div>
                 </a>
+
+                <a href="./projects/Bill Splitter/index.html" class="card">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/sew.jpg" alt="bil ">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Bill Splitter</h3>
+                        <p class="card-description">
+                            Split your bills
+                                                  </p>
+                    </div>
+                </a>
+
                 <a href="./projects/Password Strength/index.html" class="card">
                     <div class="card-cover counter-cover-colour">
                         <img src="./assets/image/password.png" alt="Email Validator">
@@ -937,6 +950,7 @@ <h3 class="card-heading">Email Validator</h3>
                         <h3 class="card-heading">Password Strength</h3>
                         <p class="card-description">
                             Check Your Password's Strength.
+
                         </p>
                     </div>
                 </a>

diff --git a/projects/Bill Splitter/bg.jpg b/projects/Bill Splitter/bg.jpg
diff --git a/projects/Bill Splitter/index.html b/projects/Bill Splitter/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bill Splitter</title>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="bill-input">
+        <p>Bill</p>
+        <div class="input-container">
+          <span>₹</span>
+          <input id="bill-amount" type="number" />
+        </div>
+        <p>Select Tip</p>
+        <div class="tip-container disabled">
+          <button class="tip">5%</button>
+          <button class="tip">10%</button>
+          <button class="tip">15%</button>
+          <button class="tip">25%</button>
+          <button class="tip">50%</button>
+          <button class="tip">75%</button>
+        </div>
+        <input
+          class="custom-tip gray-input"
+          type="number"
+          placeholder="Custom Tip in Percentage"
+          disabled
+        />
+        <p>Number of People</p>
+        <input
+          class="number-of-people gray-input"
+          type="number"
+          placeholder="Number of people"
+          disabled
+        />
+        <button class="generate-bill-btn" disabled>Generate Bill</button>
+      </div>
+      <div class="bill-output">
+        <p class="tip-amount">Tip amount <span></span></p>
+        <p class="total">Total <span></span></p>
+        <p class="each-person-bill">Each Person Bill <span></span></p>
+        <button class="reset-btn" disabled>Reset</button>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/projects/Bill Splitter/script.js b/projects/Bill Splitter/script.js
@@ -0,0 +1,94 @@
+const billAmountInput = document.querySelector('#bill-amount')
+const customTipInput = document.querySelector('.custom-tip')
+const numberOfPeopleInput = document.querySelector('.number-of-people')
+const generateBillBtn = document.querySelector('.generate-bill-btn')
+const tipAmountOutput = document.querySelector('.tip-amount span')
+const totalBillOutput = document.querySelector('.total span')
+const eachPersonBillOutput = document.querySelector('.each-person-bill span')
+const tipsContainer = document.querySelector('.tip-container')
+const resetBtn = document.querySelector('.reset-btn')
+
+let tipPercentage = 0
+
+generateBillBtn.addEventListener('click', () => {
+  const billAmount = parseInt(billAmountInput.value)
+  const numberOfPeople = parseInt(numberOfPeopleInput.value)
+
+  const tipAmount = billAmount * (tipPercentage / 100)
+  const totalBill = billAmount + tipAmount
+  const eachPersonBill = totalBill / numberOfPeople
+
+  tipAmountOutput.innerText = `₹${tipAmount}`
+  totalBillOutput.innerText = `₹${totalBill}`
+  eachPersonBillOutput.innerText = `₹${eachPersonBill}`
+
+  resetBtn.disabled = false
+})
+
+tipsContainer.addEventListener('click', (e) => {
+  if (tipsContainer.classList.contains('disabled')) return
+
+  if (e.target !== tipsContainer) {
+    ;[...tipsContainer.children].forEach((tip) =>
+      tip.classList.remove('selected')
+    )
+    e.target.classList.add('selected')
+    tipPercentage = parseInt(e.target.innerText)
+    customTipInput.value = ''
+
+    if (numberOfPeopleInput.value && tipPercentage) {
+      generateBillBtn.disabled = false
+    } else {
+      generateBillBtn.disabled = true
+    }
+  }
+})
+
+customTipInput.addEventListener('input', () => {
+  tipPercentage = parseInt(customTipInput.value)
+  ;[...tipsContainer.children].forEach((tip) =>
+    tip.classList.remove('selected')
+  )
+
+  if (numberOfPeopleInput.value && tipPercentage) {
+    generateBillBtn.disabled = false
+  } else {
+    generateBillBtn.disabled = true
+  }
+})
+
+resetBtn.addEventListener('click', () => {
+  tipPercentage = 0
+  billAmountInput.value = ''
+  customTipInput.value = ''
+  numberOfPeopleInput.value = ''
+  tipAmountOutput.innerText = ''
+  totalBillOutput.innerText = ''
+  eachPersonBillOutput.innerText = ''
+  ;[...tipsContainer.children].forEach((tip) =>
+    tip.classList.remove('selected')
+  )
+
+  resetBtn.disabled = true
+  generateBillBtn.disabled = true
+})
+
+billAmountInput.addEventListener('input', () => {
+  if (billAmountInput.value) {
+    customTipInput.disabled = false
+    numberOfPeopleInput.disabled = false
+    tipsContainer.classList.remove('disabled')
+  } else {
+    customTipInput.disabled = true
+    numberOfPeopleInput.disabled = true
+    tipsContainer.classList.add('disabled')
+  }
+})
+
+numberOfPeopleInput.addEventListener('input', () => {
+  if (numberOfPeopleInput.value && tipPercentage) {
+    generateBillBtn.disabled = false
+  } else {
+    generateBillBtn.disabled = true
+  }
+})
diff --git a/projects/Bill Splitter/style.css b/projects/Bill Splitter/style.css
@@ -0,0 +1,165 @@
+body 
+{
+    background-image: url(bg.jpg);
+}
+    * {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0 16px;
+    font-family: sans-serif;
+}
+
+main {
+    max-width: 700px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-block: 16px;
+}
+
+main > div {
+    width: 100%;
+}
+
+.bill-input {
+    color: black;
+    font-size: 20px;
+}
+
+p {
+    margin-bottom: 8px;
+}
+
+
+.input-container {
+    border: 1px solid black;
+    padding-left: 10px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    overflow: hidden;
+}
+
+.input-container input {
+    border: none;
+    outline: none;
+    appearance: none;
+    width: 100%;
+    padding: 8px 4px;
+    font-size: inherit;
+    color: inherit;
+}
+
+.bill-output {
+    background-color: #34568b;
+    color: white;
+    border-radius: 10px;
+    padding: 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 38px;
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
+
+.tip-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 15px;
+    color: white;
+    margin-bottom: 12px;
+}
+
+.tip-container.disabled {
+    opacity: 0.6;
+}
+
+.tip {
+    background-color: black;
+    border-radius: 5px;
+    text-align: center;
+    padding: 10px;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    border: none;
+}
+
+.tip-container.disabled .tip {
+    cursor: not-allowed;
+}
+
+.tip.selected {
+    outline: 4px solid rgba(255, 162, 0, 0.888);
+}
+
+.gray-input {
+    border: none;
+    outline: none;
+    background-color: #ddd;
+    font-size: 16px;
+    padding: 8px;
+    width: 100%;
+    border-radius: 4px;
+}
+
+.generate-bill-btn {
+    width: 100%;
+    height: 40px;
+    border: none;
+    font-size: 15px;
+    border-radius: 7px;
+    background-color: #9c60ff;
+    color: white;
+    cursor: pointer;
+    margin-top: 16px;
+}
+
+.generate-bill-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.bill-output p span {
+    font-size: 25px;
+}
+
+.bill-output p {
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.reset-btn {
+    padding: 12px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    width: 100%;
+    cursor: pointer;
+    /* cursor: not-allowed; */
+    font-family: inherit;
+}
+
+input:disabled {
+    cursor: not-allowed;
+}
+
+
+
+@media(max-width: 550px) {
+    main {
+        flex-direction: column;
+    }
+}