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 (flexbox, grid, mobile-first, spaghetti javascript)

Kiril 170

@qirele

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


Would love to hear any feedback :]

Community feedback

T
Chamu 13,110

@ChamuMutezva

Posted

Great work Kiril, the js functionality is working well. Additional , research on ARIA live regions - Assistive technologies will announce dynamic changes in the content of a live region. Including an aria-live attribute or a specialized live region role (such as role="alert") on the element you want to announce changes to works as long as you add the attribute before the changes occur — either in the original markup, or dynamically using JavaScript. [source MDN - ARIA live regions] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). When changes has occurred due to the calculations.

Well done and happy coding

Marked as helpful

2

Kiril 170

@qirele

Posted

@ChamuMutezva good catch, make the web accessible for everyone!

0
Abhik 4,840

@abhik-b

Posted

👋 Hello Kiril , Your solution seems nearly perfect to me , it works correctly & it is very responsive , fantastic job 🤩🤩🤩 I really liked how cleverly you used background images in inputs , well done. Please keep contributing amazing solutions like this 👍

1

Kiril 170

@qirele

Posted

@abhik-b thats awesome, thanks!

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