Skip to content
Submitted 3 months ago

Tip Calculator using SCSS

Alexandru736•210
@Alexandru736
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

What are you most proud of, and what would you do differently next time?

Being able to understand better the relationship between html elements through JS

What challenges did you encounter, and how did you overcome them?

Understanding how to update the display contents. The way I solved it was adding in the handle functions, the function call that updates the display contents, like a notification function

What specific areas of your project would you like help with?

None really. I would like to hear other optimized solutions

Community feedback

  • Teodor Jenkler•3,800
    @TedJenklerPosted 3 months ago

    Hi @Alexandru736,

    Nice project! I actually did this one myself and recently remade it with Jest tests. Here are a few suggestions to improve your solution:

    Input Validation: Deny any input that isn’t a number. This can be done using conditions along with isNaN and Number() to ensure only valid numerical inputs are accepted.

    Default Value Issue: It seems like your calculator gets a default value after a few seconds without the user typing, which might be a bug. Investigate and resolve this issue to ensure the calculator behaves as expected.

    Accessibility Enhancements: Add ARIA labels to improve accessibility. For example:

    <input type="text" (Best practice to transform strings to Numbers) aria-label="Input field for numbers">

    Keyboard Usability: As an extra challenge, make your project usable without a mouse. This can be achieved using DOM manipulation to ensure all functionality is accessible via keyboard interactions.

    Hope this was helpful

    Best, Teodor

    Marked as helpful
    0
    Alexandru736•210
    @Alexandru736Posted 3 months ago

    Hi @TedJenkler

    Thank you for your response!

    By keyboard usability, what kind of keyboard events do you suggest to add?

    1

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