Design comparison
Solution retrospective
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
- @TedJenklerPosted 2 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 helpful0@Alexandru736Posted 2 months agoHi @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 GitHubJoin 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