All solutions

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

I successfully "converted" this challenge from HTML, CSS and a little JavaScript into a React app built with Next.js and Tailwind CSS. I'm most proud of adding a light theme to complement the default dark styling of this challenge and a toggle to move between both themes. Using animated icons for the theme toggle was another favorite addition.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was getting the animated toggle icons for each theme to restart their animation when clicked and without causing errors. The solution was to create a dynamic URL for the icons, which would force the animation to restart when toggling. However, common methods for creating a dynamic URL, like using the date and time, caused discrepancies between server and client file names and would throw an error.

So, I'm using a count variable equal to 0 and increasing it by 1 when the toggle button is clicked. This allows me to create dynamic URLs for each theme's toggle icon and ensure the filenames match across client and server.

let count = 0;

export default function Toggle() {
  const imgLight = "/images/sun-to-moon-loop.svg?" + count;
  const imgDark = "/images/moon-to-sun-loop.svg?" + count;
  const [dark, setDark] = useState(false);

  const toggleTheme = () => {
    setDark(!dark);
    document.documentElement.classList.toggle("dark");
    count++;
  };

Enjoyed making the social links come to life with hover transitions, especially the Frontend Mentor link. Check it out and be sure to hover over each link for a small, but fun surprise.

Switched up some colors and added a background image to add my flair and personality into the design. You can find a resource in my README for creating dark/light modes for your own builds. Made with good old HTML/CSS and accessibility in mind.

This is my attempt to practice coding intrinsic design layouts, a concept discussed at length by Jenn Simmons (see link in Github repo under Helpful resources). The thing I like most about the intrinsic design concept is achieving fluidity without media queries, which tends to make things messy when coding.

This component achieves the fluidity I was seeking without the use of media queries. Frontend Mentor challenges tend to vastly differ in padding/margins on mobile and desktop, which can make building these layouts to exactness a bit of a chore. You can read my thoughts on this tricky part of intrinsic design (imho) on my Github repo for this project.

Anyone else practicing intrinsic design? How do you handle flexible margins/padding?

I would love to learn about ways to reduce having so many JavaScript event handlers for all the interactions in this challenge and whether having so many can cause performance issues.

Any additional feedback is also appreciated and welcomed!

I would love feedback on the top portion of my solution (intro section), specifically around the background images and featured image placements. Any feedback on the code for this portion would be greatly appreciated.

What ways have you found and used to center a CSS grid container (vertically and horizontally) without using flexbox or getting that weird cutoff when the height of the browser is too small?

Feedback on refactoring the following block of code from my JS script would be greatly appreciated:

container.addEventListener("click", (e) => {
  if (e.target.classList.contains("percent") || e.target === customTipInput) {
    if (document.querySelector(".percent.selected")) {
      document.querySelector(".percent.selected").classList.remove("selected");
    }
    e.target !== customTip && e.target !== customTipInput
      ? e.target.classList.add("selected")
      : customTip.classList.add("selected");

    e.target !== customTipInput && e.target !== customTip
      ? (selectedTip = e.target.textContent)
      : (selectedTip = customTipInput.value);
  }
  calcTotals();
});

All other feedback welcome and encouraged.

Any and all feedback welcomed and appreciated!

This seemed simple enough at first, but positioning elements to line up with the original design proved to be tricky. No questions, but feedback on the code, especially on accessibility, is always appreciated.

Updated my solution on 6/29/21 to incorporate feedback from comments and a few new tricks I've learned since I originally submitted this solution.

Leave a comment below with a rating of 1-10 on my design or code (10 being the highest compliment).

1. How can I clear the error messages and images when typing into the fields again? Any hints or resources in the right direction to answer this would be greatly appreciated!

~~What are some ways to "stick" the error image to the end of the input field? On screens less than 1450px width, there isn't an issue with positioning. However, when I maximize my browser past that width, the error images go too far outside the form itself. I understand that my code would create this problem. My question is aimed at ways to solve this.~~

Thank you @Grace for the tip on how to correct my code to "stick" the error images!

Thanks to everyone for looking around!

Question for Community: Do the challenge design's location and statistics labels (not the numbers) seem bolder than the 400 font-weight listed in the style guide? I feel like that value actually only applied to the age.

Feedback Request: I would love your feedback on the following areas of my code:

• 📐 positioning the background elements
• 📦 use of margins/padding to control spacing within the layout

I tried to get as close as possible to the actual design based on the design file dimensions (desktop: 1440 x 667, mobile: 375 x 667), which created a need for more control through margins/padding. If there are smarter or cleaner ways to accomplish this, please do share!