All solutions

This is the first FM project I've done in a while. I need to get back into that, posthaste! Let me know what you think of this one!

Honing my experience with Next.JS with this project. This submission contains a bonus feature which allows users to create their own QR codes, which will be persisted in their browser's localStorage.

Glad to be back doing projects on Frontend Mentor. Let me know what you think about this one!

Here is a basic calculator, using React's Context API with Hooks. Let me know what you think.

Had a couple of headaches with this one...

1. The header bar was a rough time to get right. I managed it by using separate components for submenus on mobile screens and on desktop screens, and I think it turned out great.

2. The sections with the large images that go off-screen was another trouble spot for me. It still doesn't line up with the header's container margin on larger screens, but I'll take what I got.

At the end of the day, I like how this turned out in the end. This was also my first project using the Vite.JS application bundler. Let me know what you think.

The issue with this one is that CSS's justify-self property doesn't work in Flexbox. I worked around this by absolute-positioning the call-to-action buttons to the bottom left, accounting for padding, then applying some compensatory bottom-margin to the description text. Let me know how this turned out.

EDIT: Erroneously said align-self, when I meant to say justify-self.

This one took quite a bit... and took me a couple of tries to get just right, but I think I got it. Let me know what you think!

The tough part of this one was styling the slider. Turns out there's no easy way to do that in a cross-browser fashion without using browser-specific pseudo-elements, CSS variables, and a little Javascript. Here's what I was able to come up with. Let me know what you think, and what I can do to improve.

Hoo boy! There's a lot going on here!

1. I discovered Javascript's IntersectionObserver feature and how to use it in a React hook, and I just went WILD with it, rigging up animations that fire as soon as sections and components come on screen. That's how I also managed to get the fixed header background to turn black when you start scrolling down.

2. I had to think a bit out of the box when it comes to getting the correct background images to show on desktop and on mobile. That's where JS's window.matchMedia comes in, in combination with a little CSS-in-JS and another React hook.

3. Ionicons is my new go-to for SVG icons.

I loved doing this one, and I hope you enjoy it! Let me know what you think!

Had to compromise a bit on the timer display animation, but I think you'll like what I came up with. This one was a fun one. I even threw in a little secret: You can customize the point in time the timer is counting down to by setting '-fm-lct-target-date' in your browser's localStorage to a valid JavaScript date string, something like this:

localStorage.setItem('-fm-lct-target-date', '6-23-2021 12:00 AM');

Let me know what you think about this one. Hope you like it!

This one was a bit of an interesting one. This is my first app to feature drag and drop elements in the Todo Items. The drag and drop features work only on desktop. If anyone can have a look at my Todo List and Todo Item source code and can give me any suggestions on how I can get drag and drop working on touchscreens (no extra dependencies), feel free to do so.

I enjoyed how this one came out. Let me know what you think!

This project is best viewed on larger screens (at least 1200px in width), but a tablet media query is also available. Hope you like it!

Decided to do this one without using Javascript. The irony is that the difficulties I had with this one didn't even come from the FAQ accordion itself, but rather the background image setup. I worked that out with a creative use of psuedo elements and overflows. I even animate the '@' box in desktop mode!

At the end of the day, I had fun with this one. Hope you enjoy it!

Back to the fold after a little time off. The right end of the control buttons doesn't line up with the light image in desktop mode, though. Nonetheless, I enjoyed this project. Hope you do, too!

Had a little fun with the UX on this one. Hope you like it!

This was an interesting experience, having to craft the smartphone app illustration programmatically, but I think this came out great. Hope you like it.

Submitting a few FM projects I completed a couple of months ago, but haven't yet submitted. Hope you like it.

This one uses React Router to switch between the home and country pages, and Axios to fetch the countries from the API. Have a look at the search box, which features a debouncer which pulls from the API 500 ms after the last input. Hope you like it!

This was a fun one to make. Hope you like it. Let me know if there's anything I can improve on.