Skip to content
Submitted about 3 years ago

Tip Calculator App

Hanif Adams•150
@omeizahanif
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Tip calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

How do you set input validation to display border and a warning text?

Feedback is welcome!

Community feedback

  • Mariusz Olszewski•360
    @molszewski34Posted about 3 years ago

    I hope this aproach will give you some insight. There are better ways to make it but it is one of simpler to understand.

    form.addEventListener("input", () => { if (numPeople.value <= 0) { document.querySelector(".people__error").style.display = "block" numPeople.style.borderColor = "red" } else if (bill.value <= 0) { document.querySelector(".error").style.display = "block" bill.style.borderColor = "red" } else { document.querySelector(".error").style.display = "none" numPeople.style.borderColor = "green" document.querySelector(".people__error").style.display = "none" bill.style.borderColor = "green" } })

    Marked as helpful
    0
    Hanif Adams•150
    @omeizahanifPosted about 3 years ago

    @molszewski34 Thanks. I understand this.

    0

Please log in to post a comment

Log in with GitHub

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