Skip to content

Emily luskinn #31

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

Emily luskinn #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9fdd8c
created a calculator page with html and css
emilyluskin Dec 1, 2024
5609cb2
edited the css and html
emilyluskin Dec 1, 2024
f13b0b1
updated css and js
emilyluskin Dec 8, 2024
23f1c68
updated html, css and js
emilyluskin Dec 8, 2024
393c584
added functionality in the js
emilyluskin 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
65 changes: 45 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,58 @@
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

<title>Frontend Mentor | Tip calculator app</title>

<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&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>
</head>
<body>
<div class="container">
<div class="top-section">
<img src="images/logo.svg" alt="splitter" class="splitter-logo">
</div>
<div class="calculator">
<!--left-->
<div class="selection-section">
<label for="bill">Bill</label>
<div class="input-person-container">
<img src="images/icon-dollar.svg" alt="dollar icon" class="dollar-icon">
<input type="number" id="bill" placeholder="0">
</div>
<label for="bill">Select Tip % </label>
<div class="tip-percent-btn">
<button onclick="SetTip(5)">5% </button>
<button onclick="SetTip(10)">10%</button>
<button onclick="SetTip(15)">15%</button>
<button onclick="SetTip(25)">25%</button>
<button onclick="SetTip(50)">50%</button>
<button id="custom-btn" class="custom-btn">Custom</button>
<input type="number" id="custom-tip" class="Custom-tip" placeholder="custom" style="display: none;">
</div>
<label for="people">Number of People</label>
<div class="input-person-container">
<img src="images/icon-person.svg" alt="person icon" class="person-icon">
<input type="number" id="people" placeholder="0">
</div>
</div>

Bill

Select Tip %
5%
10%
15%
25%
50%
Custom

Number of People

Tip Amount
/ person

Total
/ person

Reset
<!--right.-->
<div class="output-section">
<div class="result">
<p>Tip Amount<br><span>/person</span></p>
<p id="tip-amount" class="value" >$0.00</p>
</div>
<div class="result">
<p>Total<br><span>/person</span></p>
<p id="total" class="value">$0.00</p>
</div>
<button id="reset-btn" class="reset-btn">RESET</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
63 changes: 63 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
let tipPercentage = 0;

const SetTip = (tip) => {
tipPercentage = tip;
resetCustom();
calculate();
};

const resetCustom=()=>{
const customInput = document.getElementById('custom-tip');
customInput.value = '';
customInput.style.display = 'none';
document.getElementById('custom-btn').style.display = 'inline';
};

document.getElementById('custom-btn').addEventListener('click', () => {
const customInput = document.getElementById('custom-tip');
document.getElementById('custom-btn').style.display = 'none';
customInput.style.display = 'inline';
customInput.focus();

customInput.addEventListener('input', () => {
const customTip = parseFloat(customInput.value) || 0;
tipPercentage = customTip;
calculate();
});

});

// calculation and update
const calculate = () => {
const bill = parseFloat(document.getElementById('bill').value) || 0;
const people = parseInt(document.getElementById('people').value);

if (bill > 0 && people > 0 && tipPercentage >= 0) {
const tipAmount = (bill * tipPercentage) / 100 / people;
const total = (bill / people) + tipAmount;

document.getElementById('tip-amount').textContent = `$${tipAmount.toFixed(2)}`;
document.getElementById('total').textContent = `$${total.toFixed(2)}`;

}
else {
// Reset values to $0.00 if bill or people are invalid
document.getElementById('tip-amount').textContent = '$0.00';
document.getElementById('total').textContent = '$0.00';
}
};

const resetCalculator = () => {
document.getElementById('bill').value = '';
document.getElementById('people').value = '';
document.getElementById('custom-tip').value = '';
document.getElementById('tip-amount').textContent = '$0.00';
document.getElementById('total').textContent = '$0.00';
tipPercentage = 0;
document.getElementById('custom-tip').style.display = 'none'; // Hide custom input field
document.getElementById('custom-btn').style.display = 'inline'; // Show the "Custom" button again
};

document.getElementById('bill').addEventListener('input', calculate);
document.getElementById('people').addEventListener('input', calculate);
document.getElementById('reset-btn').addEventListener('click', resetCalculator);
252 changes: 252 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
/*easy access to the colors*/
:root {
--strong-cyan: hsl(172, 67%, 45%);
--very-dark-cyan: hsl(183, 100%, 15%);
--dark-grayish-cyan: hsl(186, 14%, 43%);
--grayish-cyan: hsl(184, 14%, 56%);
--light-grayish-cyan: hsl(185, 41%, 84%);
--very-light-grayish-cyan: hsl(189, 41%, 97%);
--white: hsl(0, 0%, 100%);
}

/*font,color, place*/
body {
font-family: 'Space Mono', monospace;
background-color: var(--light-grayish-cyan);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;

}

/*Main wrapper*/
.container {
background-color: var(--white);
padding: 2rem;
border-radius: 1.5rem;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 800px;
position: relative;
}

/*positioned Logo*/
.splitter-logo {
display: block;
margin-bottom: 2rem;
position: absolute;
top: -4.5rem;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: auto;
z-index: 10;
}

/*calculator with two
equal-width parts.*/
.calculator {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
position: relative;
}

/*Input(left side) Fields*/

.selection-section {
display: flex;
flex-direction: column;
gap: 1rem;
}

.selection-section label {
color: var(--dark-grayish-cyan);
font-size: 1rem;
}

.selection-section input {
padding: 0.5rem 1rem;
font-size: 1.5rem;
font-family: inherit;
border: 2px solid var(--very-light-grayish-cyan);
border-radius: 0.5rem;
color: var(--very-dark-cyan);
}

.selection-section input:focus {
outline: none;
border-color: var(--strong-cyan);
}

/*three button columns*/
.tip-percent-btn {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}

.tip-percent-btn button {
background-color: var(--very-dark-cyan);
color: var(--white);
padding: 0.5rem 1rem;
font-size: 1.5rem;
font-family: inherit;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}

.tip-percent-btn button.custom-btn {
background-color: var(--very-light-grayish-cyan);
color: var(--very-dark-cyan);
}

.tip-percent-btn button:hover {
background-color: var(--strong-cyan);
color: var(--very-dark-cyan);
}
#custom-tip {
display: none;
width: 80px; /* Adjust the width of the input as needed */
margin-top: 10px; /* Space between button and input */
font-size: 16px; /* Font size for readability */
text-align: center; /* Center align the text in the input */
}

/*icons inside the input fields .*/
.input-person-container {
display: flex;
align-items: center;
background-color: var(--very-light-grayish-cyan);
padding: 0.5rem 1rem;
border-radius: 0.5rem;

position: relative;
}

.input-person-container .person-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none; /* Prevents icon from interfering with input */

}
.input-person-container .dollar-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none; /* Prevents icon from interfering with input */

}

.input-person-container input {
flex: 1;
font-size: 1.5rem;
font-family: inherit;
border: none;
background-color: transparent;
color: var(--very-dark-cyan);
text-align: right;
padding-left: 2.5rem;
}

.input-person-container input:focus {
outline: none;
}

/*Results Display (right side)*/
.output-section {
background-color: var(--very-dark-cyan);
padding: 2rem;
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 80%;
max-width: 500px;
height: 400px;
margin: 0 auto;

}

.output-section .result {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}

.output-section .result p {
color: var(--white);
margin: 0;
font-size: 1.2rem;
}

.output-section .result p span {
color: var(--grayish-cyan);
font-size: 0.8rem;
}

.output-section .result .value {
color: var(--strong-cyan);
font-size: 2rem;
}

.output-section .reset-btn {
background-color: hsl(174, 52%, 24%);
color: var(--very-dark-cyan);
padding: 0.5rem 1rem;
font-size: 1.2rem;
font-family: inherit;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}

.output-section .reset-btn:hover {
background-color: var(--strong-cyan);
}

/*Adjusts for a mobile-friendly experience*/
@media (max-width: 768px) {
.body{
background-color: var(--light-grayish-cyan);
display: flex;
}

.container {
width: 100%;
height: inherit;
}
.top-section {
background-color: var(--light-grayish-cyan);
padding: 4rem;
border-radius: 0.3rem;
}
.splitter-logo {
display: block;
top: -3.4rem;
}


.calculator {
grid-template-columns: 1fr;
}

.tip-percent-btn {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 1440px) {
.container {
width: 60%;
}
}