Contact Form

Community feedback

• 

  P

  Patrycja•170

  @Patrycja-dzPosted 18 days ago

  index.html

  • Class Naming Consistency: Consider adopting the BEM methodology for class naming to maintain a consistent structure. Currently, ID naming is inconsistent—some use camelCase, while others use double underscores ( __ ). Standardizing this will improve readability.
  • Descriptive Class Names: The header class in the <label> element might be confusing since HTML already has a <header> tag. Renaming it to something more specific (e.g., label-header) could enhance clarity.
  • Form Validation: To ensure required fields are properly enforced, consider adding the required attribute. This will leverage the browser’s built-in validation, enhancing user experience.
  • Consent Checkbox Issue: The consent checkbox currently cannot be unchecked once selected. If this behavior is unintentional, it may need debugging.
  • Textarea Styling:
    • The <textarea> element lacks internal padding, causing text to start too close to the left border. Adding padding would improve usability.
    • The type="text" attribute on <textarea> is unnecessary and can be removed.
  • Button Defaults: The <button> element with type="submit" does not need the type attribute since submit is the default behavior.
  • Code Formatting: There are some inconsistencies in formatting. If you're using Visual Studio Code, I recommend installing the Prettier plugin to automatically format the code for consistency.

  base.scss

  • Font-Family Order: The Karla font is currently set as the second option, meaning the browser defaults to sans-serif. If Karla is intended as the primary font, ensure it is properly loaded and placed first in the list.
  • Removing Unnecessary Comments: There are some redundant comments that could be removed to keep the code clean and maintainable.
  • Color Variable Usage: While color variables are declared, some styles—such as button colors—still reference RGB values instead of variables. Using predefined color variables would ensure better consistency across the project.
  • Reducing Repetitive Styles: Several styles (e.g., for inputs and text elements) are repetitive. Consider refactoring the code by reusing shared classes to improve maintainability and reduce duplication. Given the common layout elements, centralizing styles would help keep the structure cleaner.

  JavaScript

  • CSS Over JavaScript for Styling: Some functionality, such as adding/removing borders, can be achieved using CSS only. Instead of event listeners, consider using:
    • :focus for handling input focus styles.
    • :checked for styling selected radio buttons.
    • :has() (if supported) for styling parent elements based on child states.
  • Improving Function Structure:
    • The current JavaScript code could be split into separate functions for better readability and reusability.
    • The event listeners are functional due to arrow functions, but they might benefit from clearer separation.
    • The if statements are quite long and perform similar tasks (showing/hiding elements). If they are necessary, consider using a switch statement for better structure.
    • Since the if conditions mostly toggle display: block or display: none, extracting this logic into a dedicated function would make the code more maintainable.

  0