Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip calculator

Nuel 1,230

@ijklmopffs

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Still having problems with the JavaScript

Community feedback

Nuel 1,230

@ijklmopffs

Posted

Hey. The problem is state management and updating. I don't know how to do that in vanilla JavaScript. And by state management here I mean updating the tip amount as the bill amount is being typed.

1

@abdullahmuslim

Posted

@ijklmopffs To do that you need to hook an onChange event to your input and update the tip on every input.

//reference tip with class name *tip*
const tip = document.querySelector(".tip");

//define bill with class name *input-bill*
const bill = document.querySelector(".input-bill");
bill.addEventListener("change", updateTip);

function updateTip(e){
//update tip value or textContent depending on what element type tio is.
}

Use onInput event for input element, the behaviour is more effective. You can choose to use different class name for your tip and bill, the idea is to reference it somehow. Let me know if you need more clarification.

0
Nuel 1,230

@ijklmopffs

Posted

@abdullahmuslim alright, will try it out and get back to you

0

@abdullahmuslim

Posted

Your question is vague, let us know what you are trying to accomplish. would have been better if the initial README.md with direction on what you are expected to do still exist. You can paste link to challenge.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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