Html, Scss, Javascript

Community feedback

• 

  P

  Rahexx•960

  @Rahexx

  Posted 8 months ago

  Great job with this challenge!

  Your app looks great and works properly. Here are some suggestions to improve your code structure and readability:

  ---

  HTML & CSS

  1. Class Naming:
     Some of your class names are quite long. For instance, instead of container__form__item__tip__label, you could simplify it using BEM methodology by using block for form. For example:
     .form__item__tip__label
     This makes your code easier to read and maintain.

  2. Modular SCSS Structure:
     Consider organizing your SCSS files by creating a folder like components and moving specific styles (e.g., for the form) to separate files such as _form.scss. Then import them into your main.scss.

     • With nearly 500 lines of styles in one file, it's a good time to break it into smaller, reusable chunks for better maintainability.
     • You can also extract common styles, variables, and mixins into separate files.

  ---

  JavaScript

  1. Destructuring:
     In cases where you access object properties multiple times, you can use destructuring to improve readability. For example:
     const { bill, tip, number_of_people } = data;
     This reduces repetition and makes your code cleaner.

  2. Event Handling:
     Great job using event listeners to handle user input dynamically.

  3. Proxy Implementation:
     Using Proxy to handle state updates and validations is an excellent approach! This keeps your state management clean and ensures all changes go through a central handler.

  ---

  Final Suggestions

  • Extract reusable functions into separate modules/files for better reusability and testability.
  • Modularize your CSS/SCSS for easier navigation and maintenance in larger projects.
  • Keep up the excellent work with structured and clean JavaScript code! 🎉

  Good luck with your next challenges!

  02

  Marked as helpful