Skip to content
Submitted about 3 years ago

Semantic HTML5 app with JS validation

Dmitry•375
@dmitrymitenkoff
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

This was the toughest JS-related challenge I've ever completed. I'm keen to learn more about people's approaches to the following aspects:

  1. The select tip section: how did you structure your HTML and why. I enjoyed redesigning the radio buttons in CSS, but had a hard time with these in JS.
  2. Accessibility: which are the best JS input events to use to accommodate not only typing but tapping as well.
  3. Do you use JS Constraint validation API? If so, please feel free to share your experience. Thanks!!

Community feedback

  • Account deleted

    Hi,

    Nice one on completing the challenge, it looks pretty good;

    • The functionality is definitely there but I think you should only allow numbers in the input boxes, instead of showing invalid number when any other key is entered.
    • I also did this challenge, but mine was in React, you can checkout how I did everything here. & I definitely did not use JS constraint validation API.

    Btw, when I click on reset it refreshes the page, and I'm pretty sure it's not supposed to do that.

    Keep coding👍.

    0
    Dmitry•375
    @dmitrymitenkoffPosted about 3 years ago

    @thulanigamtee, thanks for that.

    I decided against using the input of type number due to its varied behaviour in different browsers, and stepper arrows, among other issues, which may be confusing, especially for users on mobile devices, hence I opted for setting a numeric attribute to the input field of type text. I then added a pattern in HTML which also allows for decimal numbers.

    Reset shouldn't refresh the page as I used the following code to prevent it, but I'll look into that to make sure it's working as it's supposed to.

      button.reset();  // Reset all form data
  return false; // Prevent page refresh

    Cheers

    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