
Please log in to post a comment
Log in with GitHubCommunity feedback
- @7osny13
Thank you for your help🤗 i appreciate it
- @mike15395
Congratulations @7osny13 on completing the challenge!
After reviewing your code,Here are few improvements:
- You are not displaying correct output as per requirements, you can refer to code below for calculating output
function calculateOutput(selectedValue) { if (billInput.value && totalPeople.value && selectedValue) { totalTipAmount = (billInput.value * selectedValue) / 100; let totalAmount = Number(billInput.value) + totalTipAmount; tipAmount.textContent = "$" + Number( totalPeople.value > 0 ? (totalTipAmount / totalPeople.value).toFixed(2) : "" ); tipTotal.textContent = "$" + Number( totalPeople.value > 0 ? (totalAmount / totalPeople.value).toFixed(2) : "" ); } }
2.There is no need of promises
- UI changes, refer to following code:
.main{ display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: 1fr; grid-template-areas: "input output"; width: 55vw; height: 60vh; background-color: var(--White); border-radius: 10px; padding: 2%; gap:25px; } @media all and (max-width:768px){ .main{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(2,1fr); grid-template-areas: "input" "output"; height: 90vh; width: 50vw; } .input-section,.output-section{ width: 100%; height: 100%; } body{ gap:0px; } }
refer my code here
Happy Coding!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord