Skip to content
OverviewSolutions
19
Comments
41

Alberto José

@alberto-rjLuanda, Angola 🇦🇴630 points

I'm a Self-Taught Humanist Frontend Developer who turns designs into accessible and intuitive web experiences. I believe technology should serve people, not the other way around. That’s why every project I build is driven by its real impact on users' lives, not just by technical trends.

I’m currently learning...

🌐 Web Accessibility

Latest solutions

Latest comments

  • py-code314•430
    @py-code314Submitted about 1 month ago
    What specific areas of your project would you like help with?

    1. I really appreciate some feedback on my using 'aria-attributes'. I tried my best but I'm not sure I'm going in the right way

    2. I used <dialog> element to show the Success message and then applied some styles to it to make it exactly like in the design. Keeping in mind the Accessibility features, is this the best approach or should I just use a regular <div> ? (Accessibility Report telling me that <dialog> is not supported in all browsers 🤷🏼‍♂️)

    3. Any suggestions to improve JS code is welcome especially functions checkValidity() and showError(). Anyway I can improve those?

    4. After I submitted my solution, Accessibility Report notifying me that role="list" and role="listitem" are not necessary for <ul> and <li> respectively. Please advise!

    Thanks in advance

    Responsive Sign-up Form using Flex

    #accessibility#bem#gulp#sass/scss
    2
    Alberto José•630
    @alberto-rjPosted about 1 month ago

    Hi again @py-code314,

    Congratulations on investing the time and effort to complete this solution. I apologize for not mentioning this suggestion earlier.

    However, according to this W3Schools tutorial, Accessibility Errors, you could still improve the accessibility of your application during form validation.

    To do this, in your main.js file, consider modifying the value of the aria-invalid attribute for the email field during its validation.

    For example, if in your code the email field is emailField, you could also add the following to your code when implementing validation:

    • When emailField is valid: Set the attribute to aria-invalid="false", or simply remove it:
    // Or use: emailField.removeAttribute('aria-invalid');
emailField.setAttribute('aria-invalid', 'false');
    • When emailField is invalid: Set the attribute to aria-invalid="true". And make sure the focus is on emailField:
    emailField.setAttribute('aria-invalid', 'true');
emailField.focus();

    That's it, my friend! Above all, know that you've done a good job and that your solution is already great! Happy coding!

    Useful resources:

    Marked as helpful
    0
  • py-code314•430
    @py-code314Submitted about 1 month ago
    What specific areas of your project would you like help with?

    1. I really appreciate some feedback on my using 'aria-attributes'. I tried my best but I'm not sure I'm going in the right way

    2. I used <dialog> element to show the Success message and then applied some styles to it to make it exactly like in the design. Keeping in mind the Accessibility features, is this the best approach or should I just use a regular <div> ? (Accessibility Report telling me that <dialog> is not supported in all browsers 🤷🏼‍♂️)

    3. Any suggestions to improve JS code is welcome especially functions checkValidity() and showError(). Anyway I can improve those?

    4. After I submitted my solution, Accessibility Report notifying me that role="list" and role="listitem" are not necessary for <ul> and <li> respectively. Please advise!

    Thanks in advance

    Responsive Sign-up Form using Flex

    #accessibility#bem#gulp#sass/scss
    2
    Alberto José•630
    @alberto-rjPosted about 1 month ago

    Congrats, You did a good job!

    0
  • Gwenaël Magnenat•1,520
    @gmagnenatSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge has stretch my experience with vanilla JavaScript. I did some refactoring to try and optimise my solution with better readability and code organisation.

    The next time I want to first list all the interactions, expected actions and expected results before starting to write a line of code. It will probably help to have a better structure from the start.

    What challenges did you encounter, and how did you overcome them?

    By working on this challenge there was always a lot of questions popping in my head. How do I generate a random string, how to I modify the string to include more characters, how to I calculate the strength of the password?

    By doing researches, reading posts, MDN documentation, I usually find the answers to get started and it triggers new questions. It's a constant loop but at least there is a starting point.

    What specific areas of your project would you like help with?

    I added (to try) a debounce function to reduce the function call and dom update. Is there better ways to do this?

    I'm open to any suggestions on code organisation in vanilla JavaScript.

    Password generator app

    4
    Alberto José•630
    @alberto-rjPosted 6 months ago

    As for your approach adopted in JavaScript for this solution, I believe it is perfectly readable and organized. I just loved your approach!!

    1
  • Gwenaël Magnenat•1,520
    @gmagnenatSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge has stretch my experience with vanilla JavaScript. I did some refactoring to try and optimise my solution with better readability and code organisation.

    The next time I want to first list all the interactions, expected actions and expected results before starting to write a line of code. It will probably help to have a better structure from the start.

    What challenges did you encounter, and how did you overcome them?

    By working on this challenge there was always a lot of questions popping in my head. How do I generate a random string, how to I modify the string to include more characters, how to I calculate the strength of the password?

    By doing researches, reading posts, MDN documentation, I usually find the answers to get started and it triggers new questions. It's a constant loop but at least there is a starting point.

    What specific areas of your project would you like help with?

    I added (to try) a debounce function to reduce the function call and dom update. Is there better ways to do this?

    I'm open to any suggestions on code organisation in vanilla JavaScript.

    Password generator app

    4
    Alberto José•630
    @alberto-rjPosted 6 months ago

    Hey @gmagnenat, you could fix this issue regarding your social profiles:

    1
  • Gwenaël Magnenat•1,520
    @gmagnenatSubmitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge has stretch my experience with vanilla JavaScript. I did some refactoring to try and optimise my solution with better readability and code organisation.

    The next time I want to first list all the interactions, expected actions and expected results before starting to write a line of code. It will probably help to have a better structure from the start.

    What challenges did you encounter, and how did you overcome them?

    By working on this challenge there was always a lot of questions popping in my head. How do I generate a random string, how to I modify the string to include more characters, how to I calculate the strength of the password?

    By doing researches, reading posts, MDN documentation, I usually find the answers to get started and it triggers new questions. It's a constant loop but at least there is a starting point.

    What specific areas of your project would you like help with?

    I added (to try) a debounce function to reduce the function call and dom update. Is there better ways to do this?

    I'm open to any suggestions on code organisation in vanilla JavaScript.

    Password generator app

    4
    Alberto José•630
    @alberto-rjPosted 6 months ago

    Hi @gmagnenat! I've been taking a look at your solution on github, congrats! I have a question:

    Why did you load the font inline style (between lines 12 to 22 of index.html), instead of external style (style.css)?

    Why? Could you help clarify this, please?

    1
  • Alberto José•630
    @alberto-rjPosted 7 months ago

    Hi @barka-dev,

    Congras on your solution, but you could improve your tip calculation according to the following test cases:

    Test Cases:

    Case 1: Exact value

    • Input: bill = 100.00, tipPercent = 10, numberOfPeople = 4
    • Expectation:
      • totalAmountPerPerson: 2.50
      • totalPerPerson: 27.50

    Explanation:

    • Tip amount: 100 * 0.10 = 10
    • Total bill with tip: 100 + 10 = 110
    • Total per person: 110 / 4 = 27.50
    • Tip per person: 10 / 4 = 2.50

    Case 2: High tip

    • Input: bill = 200.00, tipPercent = 25, numberOfPeople = 2
    • Expectation:
      • totalAmountPerPerson: 25.00
      • totalPerPerson: 125.00

    Explanation:

    • Tip amount: 200 * 0.25 = 50
    • Total bill with tip: 200 + 50 = 250
    • Total per person: 250 / 2 = 125.00
    • Tip per person: 50 / 2 = 25.00

    Case 3: Division by one person

    • Input: bill = 50.00, tipPercent = 20, numberOfPeople = 1
    • Expectation:
      • totalAmountPerPerson: 10.00
      • totalPerPerson: 60.00

    Explanation:

    • Tip amount: 50 * 0.20 = 10
    • Total bill with tip: 50 + 10 = 60
    • Total per person: 60 / 1 = 60.00
    • Tip per person: 10 / 1 = 10.00

    Case 4: Low tip

    • Input: bill = 300.00, tipPercent = 5, numberOfPeople = 6
    • Expectation:
      • totalAmountPerPerson: 2.50
      • totalPerPerson: 52.50

    Explanation:

    • Tip amount: 300 * 0.05 = 15
    • Total bill with tip: 300 + 15 = 315
    • Total per person: 315 / 6 = 52.50
    • Tip per person: 15 / 6 = 2.50

    Case 5: Odd number of people

    • Input: bill = 142.55, tipPercent = 15, numberOfPeople = 5
    • Expectation:
      • totalAmountPerPerson: 4.28
      • totalPerPerson: 32.79

    Explanation:

    • Tip amount: 142.55 * 0.15 = 21.3825
    • Total bill with tip: 142.55 + 21.3825 = 163.9325
    • Total per person: 163.9325 / 5 = 32.7865 ≈ 32.79
    • Tip per person: 21.3825 / 5 = 4.2765 ≈ 4.28

    Case 6: No tip

    • Input: bill = 80.00, tipPercent = 0, numberOfPeople = 4
    • Expectation:
      • totalAmountPerPerson: 0.00
      • totalPerPerson: 20.00

    Explanation:

    • Tip amount: 80 * 0 = 0
    • Total bill with tip: 80 + 0 = 80
    • Total per person: 80 / 4 = 20.00
    • Tip per person: 0 / 4 = 0.00

    I hope I've helped you improve your tip calculation. Happy coding!

    0
View more comments