Responsive Tip CalculatorApp with Grid, EventListeners and Validations

Community feedback

• 

  P

  Ralph Virtucio•650

  @ralphvirtucioPosted 3 months ago

  Hi Danae Lescano,

  Great job on completing this challenge!

  I have a few suggestions that might help you refine your code further:

  • Semantic HTML for Tip Section: For a more semantic approach, consider using radio buttons within a <fieldset> element for the tip section. This will help with both structure and styling. You can apply active styles using the :checked pseudo-class selector in CSS. For custom input styles, you can use JavaScript to manage the state of these radio buttons.

  • Code Structuring: To improve the clarity and maintainability of your code, try breaking down the uploadDiscount function into smaller, more focused functions. For example, you could separate the logic for clearing and rendering errors into their own functions. If you're in Learning path here is a link that you can read about refactoring your code:

  const clearError = () => {
    sectionPeople.classList.remove('error');
    sectionBill.classList.remove('error');
  }
  
  const renderError = () => {
    sectionPeople.classList.add('error');
    sectionBill.classList.add('error');
  }
  

  • Layout for Desktop Design: For achieving the desktop design, consider using display: grid for the tip section. While Flexbox is useful, Grid can provide better control over rows and columns, making layout adjustments easier.

  • Reset Button Enhancement: Instead of manually disabling the reset button with styles, use the disabled attribute in HTML. This will handle the button's disabled state more reliably. You can then use the :disabled pseudo-class in CSS to style the button. This approach avoids using !important in your stylesheet, which is generally best to avoid.

  Overall, you’ve done a fantastic job, and your README file is well-composed and clear!

  Feel free to check out the links I provided for this project. Here’s some virtual coffee to fuel your studying ☕☕☕.

  CODE UP! 🍩☕🧑‍💻

  Marked as helpful

  0