Skip to content

Adi Amar- js for calculator #22

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 Amar- js for calculator #22

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');
</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> -->
</input>
Comment on lines +29 to +32
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

The text cursor inside the input is under the icon.
use padding: 0px 20px; to the input-box, it's should fix it

</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> -->
</input>
Comment on lines +48 to +51
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

The text cursor inside the input is under the icon.
use padding: 0px 20px; to the input-box, it's should fix it

</div>
</div>


<div class="right">
Comment on lines +53 to +56
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

Recommendation: Use a single blank line here instead of two. Double blank lines are generally reserved for major separations (e.g., between classes or functions). This keeps the code clean and easier to read.

<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>
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

Make sure the starting value is $0.00

</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>
</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;
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

Just for notice, you wrote "tipAmout" and called it in row 24 and more as "tipAmount"

let total;

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

if(!priceValue || !peopleValue || priceValue<=0 || peopleValue<=0){
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

You can add that the clicked button will change the background color, something like this idea:

   const buttonElement = document.getElementById(`tip${x*100}`);
    if (buttonElement) {
        buttonElement.classList.add("active");
    }

and make the "active" class with different background color

hoverWarning.style.display="block";
return;
}
Comment on lines +18 to +21
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

You can use isNaN(priceValue) and check if the priceValue and peopleValue are numbers, and then show error message accordingly

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);

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);
Comment on lines +31 to +50
Copy link
Copy Markdown

@OptimaLPro OptimaLPro Dec 7, 2024

Choose a reason for hiding this comment

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

Great functions.
Easy to read,
good technique!


reset=()=>{


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

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


hoverWarning.style.display = "none";

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