Skip to content

Adi #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AdiAmar1 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Adi #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f58cd5e
almost finished
AdiAmar1 Dec 1, 2024
0441b20
finished all
AdiAmar1 Dec 1, 2024
cb93fd3
finished mobile design
AdiAmar1 Dec 1, 2024
bc0c56a
finished mobile design
AdiAmar1 Dec 1, 2024
d81d524
finished js for the calculator
AdiAmar1 Dec 2, 2024
7150e1d
finished JS for calculator
AdiAmar1 Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 66 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,86 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<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="styles.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%); }
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@BarSh0 BarSh0 Dec 8, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move this import to css file

</style>
</head>

<body>
<div class="h3txt"></div>
<div class="ptags">
<p>S P L I</p>
<p id="p1">T T E R</p>
</div>
</div>
<div class="container">
<div class="left">
<div class="bill-container">
<p id="bill">Bill</p>
<input class="input-box" id="price">
<img src="./images/icon-dollar.svg" class="icon-dollar">
<!-- <span class="price">142.55</span> -->

@BarSh0 BarSh0 Dec 8, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove comments

</input>
</div>
<div class="tip-container">
<p id="tip">Select Tip %</p>
<div class="tip-boxes">
<button class="box" id="tip5" onclick="calcTip(0.05)">5%</button>
<button class="box" id="tip10" onclick="calcTip(0.1)">10%</button>
<button class="box" id="box15" onclick="calcTip(0.15)">15%</button>
<button class="box" id="tip25" onclick="calcTip(0.25)">25%</button>
<button class="box" id="tip50" onclick="calcTip(0.5)">50%</button>
<input class="boxcustom" id="custom" onclick="customTip()" placeholder="custom"></input>
</div>
</div>
<div class="people-container">
<p id="people">Number of People</p>
<p id="hover" style="display:none; color:red; margin-left:65%;">Can't be zero</p>
<input class="input-box" id="numOfpeople">
<img src="./images/icon-person.svg" class="icon-person">
<!-- <span class="price">5</span> -->

@BarSh0 BarSh0 Dec 8, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove

</input>
</div>
</div>


<div class="right">
<div class="top">
<div class="text">
<p class="white-txt">Tip Amount</p>
<p class="gray-txt">/ person</p>
</div>
<div class="green-price" id="tipRes">$4.27</div>

@BarSh0 BarSh0 Dec 8, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why there is a default value of 4.27?

</div>
<div class="bottom">
<div class="text">
<p class="white-txt">Total</p>
<p class="gray-txt">/ person</p>
</div>
<div class="green-price" id="totalRes">$32.79</div>

@BarSh0 BarSh0 Dec 8, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why there is a default value of 32.79?

</div>

Bill
<button class="reset" id="resetBtn" onclick="reset()">RESET</button>

Select Tip %
5%
10%
15%
25%
50%
Custom
</div>

Number of People

Tip Amount
/ person

Total
/ person

Reset
</div>



<script src="script.js"></script>
</body>

</html>
66 changes: 66 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
const price=document.getElementById("price");
const numOfpeople=document.getElementById("numOfpeople");
const hoverWarning = document.getElementById("hover");
const tipAmountResult = document.getElementById("tipRes");
const totalAmountResult = document.getElementById("totalRes");
const custom=document.getElementById("custom");
const resetBtn=document.getElementById("resetBtn");



let tipAmout;
let total;

calcTip= (x) =>{
const priceValue=parseFloat(price.value);
const peopleValue=parseFloat(numOfpeople.value);

if(!priceValue || !peopleValue || priceValue<=0 || peopleValue<=0){
hoverWarning.style.display="block";
return;
}
hoverWarning.style.display="none";

tipAmount=(priceValue*x)/peopleValue;
total=(priceValue*(1+x))/peopleValue;

tipAmountResult.innerText="$"+tipAmount.toFixed(2);
totalAmountResult.innerText="$"+total.toFixed(2);
}

customTip=()=> {
const priceValue=parseFloat(price.value);
const peopleValue=parseFloat(numOfpeople.value);
const customValue= parseFloat(custom.value/100);

@BarSh0 BarSh0 Dec 8, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This validation seems to be repeated in line 36.
why not making a function that do a validation?

something like this:

valueValidation = (x) => {
  if (x.value <= 0) {
    hoverWarning.style.display = 'block';
  } else {
    hoverWarning.style.display = 'none';
  }
}

if(!customValue || customValue<=0){
hoverWarning.style.display="block";
return;
}
hoverWarning.style.display="none";

tipAmount=(priceValue*customValue)/peopleValue;
total=(priceValue*(1+customValue))/peopleValue;


tipAmountResult.innerText="$"+tipAmount.toFixed(2);
totalAmountResult.innerText="$"+total.toFixed(2);
};

custom.addEventListener("blur", customTip);

reset=()=>{


tipAmountResult.innerText="$0.00";
totalAmountResult.innerText="$0.00";

price.value = '';
numOfpeople.value = '';
custom.value = '';


hoverWarning.style.display = "none";

};
resetBtn.addEventListener("click", reset);
Loading