Skip to content
OverviewSolutions
4
Comments
5
Matthew Sperry
@sperrow

All comments

  • Alberto Raúl José•610
    @alberto-rjSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I got a perfect score, using Lighthouse:

    • Performance: 100
    • Accessibility: 100
    • Best Practices: 100
    • SEO: 100
    What challenges did you encounter, and how did you overcome them?

    Initially I didn't know how to implement the calculation of age in days, months and years, through programming. So, I tried to figure out more about it and found the tool, College Vidya Tool - Age calculator app, which helped me understand how to do this in a simple way.

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

    Even though I had a perfect score with Lighthouse, I still believe that there is always something that can be improved in my solution.

    So if you have any suggestions on how I can improve it, please let me know because learning from others is always a pleasure for me.

    Accessible and Responsive Age Calculator App Using Flexbox

    1
    Matthew Sperry•190
    @sperrowPosted 8 months ago

    Looks and works great. Some small ideas for improvement:

    • Use type="number" for your inputs so the user can't enter non-numerical characters
    • Handle error checking and messaging on user input rather than on submit
    • Only use let when a variable will be reassigned: https://medium.com/dailyjs/use-const-and-make-your-javascript-code-better-aac4f3786ca1
    Marked as helpful
    1
  • Matthew Sperry•190
    @sperrowPosted 11 months ago

    Looks great on desktop. To design for a mobile layout, you can use Chrome/Safari/Firefox's device emulator to display your page how it would look on different screen sizes.

    1
  • Matthew Sperry•190
    @sperrowPosted 11 months ago

    Nice responsive layout, dark mode is snappy. 👍

    A few suggestions:

    • Generally it's good to limit the number of duplicate api calls to reduce server load, and since you already fetch the entire list of countries on page load you could just save that list and filter it manually by region/search query.
    • Anchor elements need an href value to be valid (https://accessibleweb.com/question-answer/link-element-still-accessible-without-href/). For your use case a button element would be more appropriate (though you'd have to remove some styles), or alternatively use href="#".
    • The event listener for a single country can be set on container instead of the entire document. Also bc of event bubbling you can just look for box, you don't need all the parentElement else/ifs.
    • A nice feature would be to turn the border countries into buttons that take you to that country's page.
    Marked as helpful
    0
  • Matthew Sperry•190
    @sperrowPosted 11 months ago

    Looks good! One easy improvement would be to use <input type="number" min="1" min="12"> so users can't enter non-numeric characters and you can also limit the range from 1-12, 1-31, etc.

    Marked as helpful
    0
  • Purdanoski•30
    @PurdanoskiSubmitted about 1 year ago

    Hello everyone, It will mean a lot to me if you have a spare time to rate my solution of the QR code component challenge. Thank you

    QR code component

    2
    Matthew Sperry•190
    @sperrowPosted about 1 year ago

    Looks good! I see you used a media query, one suggestion would be to write your css in a Mobile First approach. So all your default styles would be designed for a mobile viewport, and then you could use a media query for min-width to add desktop-specific styles. More info here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Marked as helpful
    2