Skip to content
OverviewSolutions
11
Comments
5

Luca Di Molfetta

@dimolf345Taranto365 points

💼 I started my journey as web developer in 2020, building solid foundations in HTML, CSS and JavaScript and then moving to more complex topics, such as CSS Frameworks (Bootstrap, Tailwind), JS libraries/frameworks (React & Angular)

I’m currently learning...

Angular

Latest solutions

View more solutions

Latest comments

  • Luca Di Molfetta•365
    @dimolf345

    Hello!! Very Nice project! I'm also trying to do this challenge but I'm far from reaching your level.

    If I can help you here you can find some ideas for easily improve your project I guess:

    • Put a <Link> or an onClick function inside the heading "Where in the World?" in order to display again the full countries list. If you try to type a search applying a filter in the "filter by region" menu and for example the user enters a wrong input, there's no possibility to go back to the main page except reloading the page;

    • In alternative you could also add an "ALL" filter in the Filter By Region menu;

    • Give inputs focus in order to improve accessibility;

    • In order to reduce first load, you could set a fixed amount of countries to display randomly and then add a "LOAD MORE" or "LOAD ALL" countries to let user decide to display all the items.

    Hope you find my comment useful. Very nice work! Happy coding.

    Marked as helpful
  • Luca Di Molfetta•365
    @dimolf345

    Hello! Nice project! I've completed it also recently! I personally like the pulsing effect on the button on the landing section.

    By the way, I noticed that your bookmark logo in the footer is not as in the design. I also had the same problem with the different color from the header.

    I solved the problem pasting directly the SVG into the HTML file and giving the element inside the SVG a class. With this solution you can customize the fill property in CSS. See this article from CSS tricks for further info: https://css-tricks.com/using-svg/

    You should also think to increase the margin between the section to make your page look as close as possible to the provided design. Nice Work!

    Marked as helpful
  • Luca Di Molfetta•365
    @dimolf345

    Hey! It's a wonderful project! I did the same using SASS and GRID. I think CSS Grid is the only way to make this project simple. I haven't seen your code, and since mine has surely more issues than yours, I honestly don't think I can judge it.

    I Just wanted to focus your attention on some things that I noticed:

    • The challenge requires the slider to responds also to user pressing left or right arrow to change images (Take a look at my project if you want);

    • When you change images, something strange happens: the previous one get loaded on the bottom of the page.

    Hope I was useful to you. Happy coding

  • Luca Di Molfetta•365
    @dimolf345

    Very beautiful project! Noticed that you used React, I've done the same but with Vanilla JS.

    It looks very similar to design. It's way more better than mine but I've noticed some features that you can improve so I want to share them with you:

    • You should create a function that prevents the score from being negative (I've done the same mistake);
    • If you compare the mobile design site with the desktop one, the heading or paragraphs "You Picked" and "The house picked" should be positioned above the button;
    • The hover effect on button it's very smart and looks great (I haven't done that in mine) but you should disable it (in my opinion) when it comes to the result ("You win" or "You lose"). That's because hovering effects suggest users that they can interact with buttons, but this is not the case (at this stage of the game you can only interact with "play again" button).

    Hope my comment was useful. Anyway good job! Love It!

  • Luca Di Molfetta•365
    @dimolf345

    Hey it's a very nice project. Little tips: if you are customizing the input type range with pure CSS, check the Cross-Browser compatibility (since firefox renders this kind of input differently from Chrome for example). Otherwise, you could use jquery to create a range slider.