It seems like after typing new letter, some previous definitions are still visible - like after 'm' - (def = 'abb of milion...' ) i type o, among the defs of 'mo' the 'abb of milion...' doesn't disappear, but adding letter (like p => mop), and erasing it, the extra def vanishes. Maybe something with caching
Hi. I noticed one small bug prone line in the code - when assigning id's to the link elements, it depends on the length of array with links, but if you delete some older link and then add new one, the last two elements have the same id - it's bad for react rendering (as id's are used as keys) and also if one is deleted, both disappears. In my solution i used the 'code' coming with the api response - i assume it's unique.
Regarding the layout - it looks great for the dimension key dimensions for mobile and desktop, but between there are some elements overlaping, so it could need some some breakpoints
This is my second frontendmentor challenge and this is my first attempt on making a responsive landing page. I have so much fun doing this challenge, I've learned a lot of new things but I also have a lot of struggle. I do know that this has a lot of improvement needed but I'm still very happy with what I come up.
I struggled the most with getting the intro background the mockup images responsive on the desktop design. I tried using aspect-ratio however it did not resulted to what I was hoping for, so I just stayed with using width and height properties. If anyone has suggestions or tips on how to handle responsive images especially for hero sections of the webpage, I'd highly appreciate it.
I was also not able to incorporate the changing of the fill color for the SVG icons from white to lime green on hover. If anyone knows how to do it, please let me know and I'll be very grateful.
I hope everyone a great day and onto the next challenge ~!
I usually bring the svg inline (e.g. paste the whole tag to html) - instead of bringing it as a source in the image, delete the fill property from its path and add it to the class (fill: white, and on hover fill: lime). Maybe leaving it as a image while deleting the fill property from original path of svg and pasting it in the img class would also work, i didn't try it though.
As for the hero image - it's a treaky part. With aspect ratio set, with decreasing width the height also goes down, while the section with the text gets higher, so the image doesn't cover enough height. I like result of the problem, though you could set object-fit property, so the img keeps its original aspect ratio and isn't deformed.
Neighbouring countries should actually be clickable, and on click app should show details of said country :p
Anyway respect for doing it without framework, i guess it must have been a lot of work
In the container with cards, instead of hard coding the number of columns you could use auto-fit, e.g. 'grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))'. This way it would automatically fit number of columns with the min-width of 300px, and they should stretch evenly to fill the whole space
My script is a bit tricky and long but VOILA :) it did the required work for the slider.
But I would appreciate if someone could simplify for me by either using loop for my functions to minimize the code lines :)
Other wise Thanks in advance for viewing this and liking.
As for a slider script - i usually avoid inner_html. For this kind of functionality in pure js i usualy use flex-box for a section (here the upper section) with each flex child width : 100%, flex - schrink of 0 and in the direct element over the whole section overflow - x set to hidden. Now you can control the translate x of the section with buttons (e.g. translate-x -100% will show next slide). You can check my solution - i did it with grid, but it's almost the same - 3 columns of width 100% in the main section.
It took me muuuuuch longer than I expected since it's my first React project.
The main problem with this project is that I needed to use useState of all messages in main App component and then pass it to next components, but instead I tried to update the exact message inside of it. I understood it when I asked myself: "How would I send the whole pack of messages to the server if I had to? Did all my messages array get updated?". I figured it out by just placing a mock button at the end of the page with console logging the last message of my messages array from main App component. The result showed me that the main array of messages didn't get updated and because of that the function getId() in App component failed to assign a unique ID for new replies.
Unfortunately I realized it too late and I got tired of the project so I leave it for a better days.
P.S. Probably Redux could help me avoid this mistake. I'll check it in next projects!
On small screen - under 400 px it seems too squeezed and some icons overlaping. Message container have a bit different structure for phone design.
I like the logic of the likes - in my you can click it infinitely xd. I thought of adding an array to comment object with logins which liked or disliked comment, where one login can't appear twice, does it work similar here?
