Skip to content
OverviewSolutions
33
Comments
4
WFarré
@wfarre

All comments

  • WFarré•770
    @wfarrePosted over 1 year ago

    Hello,

    Good job on your work.

    Regarding the buttons, I wrapped them inside a container with the position absolute. I place them at the bottom of the carousel. it works fine, you might need to work on the bootstrap file.

    Also, when I was checking on your carousel, I noticed that you wrote twice the Carousel component depending on the size of "window.innerWidth". I think it would be better practice to use the Carousel component once and make it responsive with your CSS.

    To finish, you got some errors, you cannot put a button inside an anchor tag.

    I hope my feedback was helpful.

    Marked as helpful
    0
  • Danny A. Mase•200
    @admaseSubmitted almost 2 years ago

    Really had a difficult time with the "Border Countries". The design examples showed the country name and not the abbreviation. I ended up going with the abbreviation. I also had problems with filtering countries by region. My jQuery code would run in Firefox but not in Google Chrome, but I was able to write a code that executed in both browsers. This was an awesome challenge.

    Where in the World

    1
    WFarré•770
    @wfarrePosted almost 2 years ago

    Regarding the "border countries", I fetched the all countries one more and stocked the name and the abbreviation in an array of objects. (countryNames = [ {abbrev: FRA, name: France}, {abbrev:GER, name: Germany} ... ] ) To improve performance, on the home page, when I did the fetch of all data, I created my "countryNames" array and I stored it in the localStorage. Then, you access the country's details, if there is "countryNames", you can change use it, else, you have to fetch all the countries' data.

    I struggle with the API as well, the data were difficult to deal with. I recommend you to use design patterns, you can organize the data the way you want and put the logic to get the data in a different file. Design patterns are very useful to make your code stronger, if you change your API, you don't have to change all the logic in your main code. https://www.freecodecamp.org/news/javascript-design-patterns-explained/ Instead of writing "country.name.common", you can just write "country.name". It was very useful, for the the native name.

    To sum up (because I am not sure, it is super clear):

    • fetch all the countries one more time and create an array of object [{abbrev: FRA, name:France}]
    • try to learn design patterns (I think it was very helpful to organize the data)

    Regarding the design, to have more precise measures, you can use Gimp or photopea.

    0
  • Brady Menswar•40
    @BradyMenswarSubmitted over 2 years ago

    I still do not know if I did the mobile design well. I do not really have experience designing mobile sites, but I was able to make it work to some degree. There is still some extra space that you can scroll on the page. Is this normal or can I remove it somehow?

    Dropdown Navigation Intro Section

    2
    WFarré•770
    @wfarrePosted over 2 years ago

    In my case, I give my navbar a width of 96% and a padding left and right of 2%. I am not sure but maybe it's due to the fact you gave a width of 50% to you right side of the nav-bar. Regarding the flexbox for the navbar, I did a justify-content: flex-start and for the right-side, I used margin-left: auto to justify it on the right. https://www.youtube.com/watch?v=q08BbYNG8h0

    0
  • WFarré•770
    @wfarrePosted almost 3 years ago

    Regarding the font of the titles, they appear weirdly of Chrome. I managed to solve the problem by changing the font-weight to 400.

    Marked as helpful
    1