Mary2021• 120
@Mary2021
Submitted
Hi,
I would very much appreciate suggestions, how to make slider controls responsive and stay on the right position.
Thanks! Mary
WFarré
@wfarre
All comments
- WFarré• 660
@wfarre
Posted
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
@admase
Submitted
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.
WFarré• 660@wfarre
Posted
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
@BradyMenswar
Submitted
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?
WFarré• 660@wfarre
Posted
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
