Close, no cigar. I tried a few solutions to get the mobile background to "dim" when the menu was opened to no avail. I'm sure the accessibility needs improving as well.
Otherwise, it was a fun one. Definitely challenging, but rewarding, too.
For the dimming effect you can make a separate <nav> element for mobile with a css media query that switches between the two. I've found this a good approach because you can create separate layouts for each use case. Once you have that in place make the mobile nav into two elements, one with a transparent background color to "dim" the screen and a second that contains the hamburger menu. The menu should have a higher z-index then the background and both should be higher than the main content. After that you can apply transitions to make it look good.
was it really possible to search by domain? I mean, was not it an api to search by Ip addresses? also, Ipify api does not work on brave browser.
Yes you can search by domain. I made this work by first validating that the search term is a valid ip address or not. If the term is validated as an IP address then the request to ipify will be by IP address, else the request is for a domain. If you send your request with the IP value as null then you can search by domain name.
if (type) { const response = await ipify.get('/country,city', { params: { apiKey: KEY, ipAddress: term, }, }) return response.data } else { const response = await ipify.get('/country,city', { params: { apiKey: KEY, ipAddress: null, domain: term, }, }) return response.data } }```
The question I'm facing here is what to do with general layout of the page at around 1000px window width, as the design provided is for 1440px window width. Any advices would be appreciated!
Your mobile layout is responsive. The mobile layout for this challenge works with a tablet size as well. I would add an extra breakpoint at 1000px and then switch out the hero image at a smaller breakpoint. I've looked at these challenges as the layout should match at the window widths specified in the documentation while being able to adapt to widths in between.
