Skip to content

Chen #26

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
Chen-kaduri wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Chen #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d19c43d
made calculator html and css
Chen-kaduri Dec 1, 2024
e1fe533
add index.js and changes in html
Chen-kaduri Dec 7, 2024
83bb725
changes aftter code review
Chen-kaduri Dec 8, 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
169 changes: 169 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
body {
color: hsl(186, 14%, 43%);

@GilHeller GilHeller Dec 7, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

use css variables

see https://www.w3schools.com/css/css3_variables.asp

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; /*center the elements in the container*/
text-align: center;
padding: 2rem;
width: 90%;
max-width: 50rem;
}

.calculator {
margin-top: 2rem;
background-color: white;
display: flex;
flex-wrap: wrap; /*responsive*/
align-items: center;
justify-content: space-between;
padding: 1rem;
border-radius: 0.625rem;
}

.input-bill {
flex: 1;
min-width: 15rem; /* adjust to smaller screens */
display: flex;
flex-direction: column;
gap: 1rem;
text-align: left;
padding: 1rem;
}

.output-bill{
flex: 1;
min-width: 15rem; /*adjust to smaller screens*/
}


.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; /* center the button*/
border-radius: 0.5rem;
}

div h2 {
color: hsl(172, 67%, 45%);
}

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%; /* full size in smaller screens */
}

.calculator {
flex-direction: column;
gap: 1rem;
}

.output-bill,
.input-section {
min-width: 100%; /* maximize the space*/
}

.tip-btn {
width: 100%;
}
}
75 changes: 52 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,64 @@
<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" 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" >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>
<button class="tip-btn" id="submit-btn" >submit</button>

Total
/ person
</div>

Reset
<!-- 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>
<script src="index.js"></script>
</body>
</html>
37 changes: 37 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
let bill = 0;
let numberPeople = 0;
let tip = 0;

// ההזנה ללחצן טיפ
const calcTip = (t) => {
tip = t;
}
// מה שהמשתמש הכניס ידנית (כמות ומספר חשבון)
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;

document.getElementById("tip-amount").innerHTML = `$${tipAmount.toFixed(2)}`;//התוצאה עם שתי ספרות אחרי הנקודה
document.getElementById("total").innerHTML = `$${totalofperson.toFixed(2)}`;
}

//הקשבה לבחירת המשתמש
document.getElementById("bill").addEventListener("input", allUpdate);
document.getElementById("people").addEventListener("input", allUpdate);
document.getElementById("submit-btn").addEventListener("click", test);