Tip-calculator [With HTML, CSS, Js]

Community feedback

• 

  P

  Aydan•680

  @AydanKaraPosted about 1 month ago

  🔥 Great effort @FacundoDLR!

  This is a well-structured, responsive, and accessible project.

  ✔ Good use of CSS Grid & Flexbox for layout.

  ✔ Strong accessibility practices.

  ✔ JavaScript is modular and well-structured.

  ❗ Suggestions for Improvement

  1️⃣ Semantic HTML – Invisible Headings Issue

  • Headings like <h1>SPLI<br>TTER</h1> may not be the best choice for readability and SEO.
  • Instead of using <br> in <h1>, use CSS (letter-spacing) to achieve the split effect.
  • Add visually hidden <h2> elements to structure the form better for screen readers.

  Fix for screen readers:

  <h2 class="sr-only">Tip Calculator Form</h2>
  

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  

  🎯 Benefit: Keeps sections organized while maintaining SEO and accessibility.

  --

  🚀 You are on the right track, keep coding in the same spirit 😊

  0