Skip to content
OverviewSolutions
5
Comments
3
Nikesh W
@randomduckduck

All comments

  • Nikhil Kumar Singh•40
    @mrnikhilsingh
    What are you most proud of, and what would you do differently next time?

    What I'm most proud of:

    • Well-structured HTML code with semantic elements and descriptive class names.
    • Use ARIA-compatible icons from Remixicon and Google Fonts for a professional design.

    What I would do differently next time:

    • Add accessibility attributes, such as alt and aria-label, to ensure usability for everyone.
    • Simplify CSS classes and consider using a preprocessor like Sass or Less.
    • Add more semantic meaning to the HTML structure, such as wrapping sections in elements.
    • Enhance user experience with JavaScript functionality, such as event listeners for the dark mode toggle and back button.
    What challenges did you encounter, and how did you overcome them?
    • Structuring the HTML Code
    • Accessibility
    • Consistency in Design

    REST Countries API with color theme switcher

    #accessibility#fetch
    1
    Nikesh W•170
    @randomduckduck

    Nice solution. Love that you used transition effect when switching between Light and Dark modes. And vanilla js solutions are always nice to have.

    Being a vanilla js solution means reloading the page when user clicks any plpCard or borderCountries (can be resolved by manipulating history stack of browser). Still you saved userPreference so that same color is preserved across page loads is really nice to have.

    Few observations:

    1. Flag image sizes are not in a single row. Adding align-self : baseline and cropping image height will solve the issue.
    2. Text search and filter both don't work together. For ex, searching 'das' gives empty results, but then using different filter loads that region list. Can be fixed by either fixing logic (to take both searchTerm and filterTerm when showing list) or clearing search bar when clicking a filter (hacky but quick fix).

    Nice solution though!

    Marked as helpful
  • Nikesh W•170
    @randomduckduck

    Nice solution! Checked code and learned using async function for awaiting delay (instead of using setTimeout). Which of these two methods would you prefer over other (i.e. between settimeout and async await delay method)? Also clean and commented code. Well done!

  • Shoaib Shuja•590
    @ShoaibShuja
    What are you most proud of, and what would you do differently next time?

    Even though I used a lot of Divs in order to maintain a responsive layout I managed to design the layout easily using CSS Flexbox. And also the most important part which was the form validation took quite some time to be figured out. I successfully created a function which did all the validation, but the code was barely readable, so I divided the validation function into smaller parts which made the code much better and it even made the functionality better.

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

    This whole project was quite a challenge starting from the design up to the validation, but I learned quite a lot, and this really forced me to think a lot about different parts and come out with an algorithm which works perfectly. Definitely worth the struggle.

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

    Some simpler functions or algorithms which would make the validation much easier would be appreciated.

    Responsive Contact Form using HTML,CSS and JavaScript

    1
    Nikesh W•170
    @randomduckduck

    Your email address field does not work. It gives error even though correct address is being added. And thus submit button does not work.

    Oh got it. Checked code, found it uses @gmail.com emails only. Now its working. Nice.