All solutions

Here is my solution to the challenge. I did make a few adjustments from the original design:

• Search bar has an added outline for focus state to improve visibility
• Site displays in dark mode if the browser prefers a dark color scheme (the search bar and results bar are darkened, and the map is overlaid with a filter to reduce brightness)
• I used IPAPI instead of IP Geolocation API for looking up IP addresses, since it does not require an API key and has a more generous free tier. This does come at the cost of the app not being able to take domain names as input. Only IPV4 and IPV6 addresses can be accepted

Feedback, comments, suggestions are always welcome.

• The results bar is designed to have a responsive rather than a fixed width. This is mainly to accommodate longer IPV6 addresses or location names

Here is my solution to the project. I have made a few modifications to the original design:

• The "generate" button is disabled if either all the boxes are unchecked or the password length is 0.
• Instead of the word "copied" showing beside the clipboard button (which could possibly be an issue with a longer password), a toast notification will display when the password is copied to clipboard.
• The password strength meter calculates the password strength as the user sets options, so the user already knows the password strength before generating the password.

I also added additional CSS rules so that if the user has forced colors (high contrast) active, the form controls and buttons will still display well.

I did have quite a bit of difficulty with styling the slider. I was not able to get the left side of the bar to show as green without running into other display glitches. Since it does not affect functionality and is not a major visual problem, I'm submitting the solution, but I may revisit the problem sometime later. Any suggestions on styling the range input, or any other suggestions for improvement, are welcome.

Here is my solution to the project, built with React. I'm always open to suggestions, especially when it comes to improving accessibility.

Here is my solution for the project. Any feedback, especially when it comes to improving accessibility, is welcome.

Here is my solution to the challenge, built with Vite and React. I did make a couple tweaks to the design for usability. The Devjobs logo also functions as a "return to home page" button and is tabbable. Also, in mobile view, the magnifying glass button has a higher z-index, so that when the search modal pops up, the magnifying glass button can then be used to close the modal.

I appreciate any feedback and suggestions, especially when it comes to organizing a React project, determining what sections should be their own components, as well as organizing stylesheets and improving accessibility.

Here's my solution. I added a dark mode (I think I actually had it mostly in dark mode as I was coding it). I think the font sizes I used are slightly larger than the style guide. I wasn't working from the Figma file for this one, and I find the smaller fonts harder on my eyes.

I had quite a bit of trouble with the background images at the top of the site running off the screen and causing issues with horizontal scrolling and overall page layout. I'd appreciate any suggestions on how to get the images to display and scale properly.

With this project, I tried experimenting with several different screen sizes to make sure the components would not overlap or overflow off the screen. I welcome any feedback on how to improve the responsiveness, or if there is a simpler way to position the elements (a lot of elements are absolute positioned).

The menu buttons are focusable and keyboard accessible as well. I'm open to any suggestions on how to improve accessibility.

Hi everyone, this is my first submission on FM. This is written with vanilla HTML, CSS3 and Javascript, no frameworks.

In addition to the base challenge, I tried to add a few extra features for accessibility. This solution adds a dark mode to the original design. I've also tried to make sure the site has working keyboard support. I would love any feedback on how to make this or similar projects more accessible. I'm also open to suggestions on how to better organize the code itself. Thank you!