Adi Amar- js for calculator #22
Conversation
| <input class="input-box" id="numOfpeople"> | ||
| <img src="./images/icon-person.svg" class="icon-person"> | ||
| <!-- <span class="price">5</span> --> | ||
| </input> |
There was a problem hiding this comment.
The text cursor inside the input is under the icon.
use padding: 0px 20px; to the input-box, it's should fix it
| <input class="input-box" id="price"> | ||
| <img src="./images/icon-dollar.svg" class="icon-dollar"> | ||
| <!-- <span class="price">142.55</span> --> | ||
| </input> |
There was a problem hiding this comment.
The text cursor inside the input is under the icon.
use padding: 0px 20px; to the input-box, it's should fix it
|
|
||
|
|
||
|
|
||
| let tipAmout; |
There was a problem hiding this comment.
Just for notice, you wrote "tipAmout" and called it in row 24 and more as "tipAmount"
| if(!priceValue || !peopleValue || priceValue<=0 || peopleValue<=0){ | ||
| hoverWarning.style.display="block"; | ||
| return; | ||
| } |
There was a problem hiding this comment.
You can use isNaN(priceValue) and check if the priceValue and peopleValue are numbers, and then show error message accordingly
| <p class="white-txt">Tip Amount</p> | ||
| <p class="gray-txt">/ person</p> | ||
| </div> | ||
| <div class="green-price" id="tipRes">$4.27</div> |
There was a problem hiding this comment.
Make sure the starting value is $0.00
| const priceValue=parseFloat(price.value); | ||
| const peopleValue=parseFloat(numOfpeople.value); | ||
|
|
||
| if(!priceValue || !peopleValue || priceValue<=0 || peopleValue<=0){ |
There was a problem hiding this comment.
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
| 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); |
There was a problem hiding this comment.
Great functions.
Easy to read,
good technique!
| </div> | ||
|
|
||
|
|
||
| <div class="right"> |
There was a problem hiding this comment.
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.
OptimaLPro
left a comment
OptimaLPro
left a comment
There was a problem hiding this comment.
Good work overall!
Keep working :)
No description provided.