All solutions

What are you most proud of, and what would you do differently next time?

I've never done a dark mode before, that was fun and surprisingly easy. I can't take too much credit though, modern tooling makes it much easier than it used to be I'm sure.

What are you most proud of, and what would you do differently next time?

Fairly simple project. Only thing I would do differently next time is hopefully complete the challenge faster. It took me longer than expected to complete.

What specific areas of your project would you like help with?

The only trouble I had for this project was dealing with getting the text to go to the right of the makers. It works on the first line but once it goes to the next line the text is directly under the marker rather than going under the first word of the text. If anyone could point out to me how to do it that would be great.

Adding left margin inside of a span nested inside of the list item only worked for the first line. I also tried wrapping the text content in a div and made the div a block-level element, but that put the entire block of text on the next line with the marker above it.

Pretty straightforward even compared to other easy challenges. No questions on this one.

I'm not sure what is wrong with my gradient in the Result card, but I could not get it to look like the provided example. Could someone tell me the exact gradient needed to achieve the effect in the provided sample? Also any other feedback is welcome. Thanks!

I used a lot of defined pixel-width elements to get this component to look correct. Is that bad practice? Should I be using percentage-based sizing if possible? I tried for a bit but this caused the component to grow and shrink in ways that made it look wrong without a defined width/height. I appreciate any and all feedback.

What did you find difficult while building the project?

• This was my first time using tailwind and next.js with the new app router.
• I spend a decent amount of time reading the docs for project layout/installation even though this project was pretty simple.

Which areas of your code are you unsure of?

• I did place the code section in the provided project files as a "footer" here:

function Footer() {
  return (
    <div className="sticky bottom-0 text-center">
      Challenge by{" "}
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" className="font-bold underline hover:decoration-2">
        Frontend Mentor
      </a>
      . Coded by <a href="https://www.github.com/njpoli" className="font-bold underline hover:decoration-2">njpoli</a>.
    </div>
  );
}

I placed my footer in the page.tsx file like so:

export default function Page() {
  return (
    <>
      <div className="flex flex-col justify-center items-center h-screen">
        <QRCode />
      </div>
      <Footer />
    </>
  );
}

However, this created a small scroll bar even though the footer is correctly sticking to the bottom of the viewport. When I place the footer inside of the div with the QRCode component, it doesnt go to the bottom of the viewport, it is directly under the QRCode component. How can I have the footer stick to the bottom without creating a scrollbar?

Do you have any questions about best practices?

Should the footer contain the sticky css property or does that belong in the parent component? Any other tips/suggestions welcome as well.