All solutions

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

I'm most proud of how I dynamically created the rating buttons.

 {[...Array(5).keys()].map((_, index) => {
            const value = index + 1;
            const isSelected = rating === value;
            return (
               handleRating(value)}
              >
                
                
                  {value}
                
              

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

I had challenges with the semi-transparent rating circles. My solution was to use absolute positioning which I wasn't too familiar with. I also used this approach for the top star image.

Another challenge was changing the rating circle's background to white after a selection. I added a new react state to assist with this. I'm not sure if it was entirely necessary. There's probably a more efficient solution.

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

Am I using React state correctly in this example?

function App() {
  const [rating, setRating] = useState(null);
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (rating !== null) {
      setSubmitted(true);
    }
  };

function Rating({ setRating, handleSubmit, rating }) {
  const handleRating = (value) => {
    setRating(value);
  };

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

I'm proud of the design and how close it resembles the original.

I would employ a system to make it easier to transform the 'large screen' version to a 'small screen' version. This process took me quite a bit.

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

I had a challenging time reformatting the large screen design to small screen. I'm going to search out a system or method to make this easier.

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

Ways or tips to simplify the design process for both small and large screens.

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

I'm proud that I dynamically added data to the design. I also got experience using different Tailwind CSS utility classes, including using hover state directly in the HTML instead of adding them in the CSS file.

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

I encountered a glitch trying to dynamically render color from a data.js file to style text. The solution was to add a 'safelist' to the tailwind.config.js file.

{item.category}

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

Is there a better way to dynamically style color using Tailwind CSS? See my challenge above.

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

I'm most proud of how close the design and layout is to the original.

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

• I had trouble finding the correct purple for the accordion header hover. I don't believe it was listed in the style-guide.md file.

• I didn't know how to add keyboard focus for navigation. I used useRef, a React hook. I'm not sure if this is the cleanest or simplest solution. ChatGPT helped here.

• I also had slight difficulties aligning the accordion header, button and text.

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

I'm curious if the keyboard focus solution that I implemented is reasonable. Is there a simpler or cleaner way?

function AccordionItem({ title, text }) {
  const [isOpen, setIsOpen] = useState(false);
  const headerRef = useRef(null);

  function handleToggle() {
    setIsOpen(prevIsOpen => !prevIsOpen);
  }

  const handleKeyDown = event => {
    if (event.key === 'Enter' || event.key === ' ') {
      handleToggle();
    } else if (event.key === 'ArrowDown') {
      const nextSibling = headerRef.current.parentElement.nextElementSibling;
      if (nextSibling) {
        nextSibling.querySelector('.accordion-header').focus();
      }
    } else if (event.key === 'ArrowUp') {
      const previousSibling =
        headerRef.current.parentElement.previousElementSibling;
      if (previousSibling) {
        previousSibling.querySelector('.accordion-header').focus();
      }
    }
  };
  return (
    
      
        {title}
        
      
      
        {text}
      
    
  );
}

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

I'm most proud of coding this component fairly quickly.

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

I slowed down when attempting to style the 'Learning' heading with a background color. Originally I used an h3 element but realized I needed to use a span so the background color wouldn't stretch the entire width of the div. I learned the difference between block elements (most common) and inline elements (like span). The solution was to use inline-block Tailwind CSS.

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

I could use more help translating the Figma design to css, specifically how to use 'rem' and the association with Tailwind classes.

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

I'm most proud of the responsive layout and how I believe it's similar to the original. I did not use the Figma files.

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

I forced myself to practice 'DRY' coding concepts and use re-useable code for the buttons. I did this by utilizing javascript inside my React component.

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

Can I improve this by using React useState hook for the hover function or is CSS hover properties sufficient?

Eg-

a:hover {
  @apply bg-green text-black;
}

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

I'm most proud of the styling and how close it is to the original.

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

The text alignment in the 'Instructions' section was challenging. By default the text was left aligned under the decimal ordered marker.

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

I'd like help using Tailwind CSS to properly align the decimal ordered list items in the 'Instructions' section.

function Instructions() {
  return (
    
      Instructions
      
        
          Beat the eggs: In a bowl,
          beat the eggs with a pinch of salt and pepper until they are well
          mixed. You can add a tablespoon of water or milk for a fluffier
          texture.
        
        
          Heat the pan: Place a
          non-stick frying pan over medium heat and add butter or oil.
        
        
          Cook the omelette: Once
          the butter is melted and bubbling, pour in the eggs. Tilt the pan to
          ensure the eggs evenly coat the surface.
        
        
          Add fillings (optional):{' '}
          When the eggs begin to set at the edges but are still slightly runny
          in the middle, sprinkle your chosen fillings over one half of the
          omelette.
        
        
          Fold and serve: As the
          omelette continues to cook, carefully lift one edge and fold it over
          the fillings. Let it cook for another minute, then slide it onto a
          plate.
        
        
          Enjoy: Serve hot, with
          additional salt and pepper if needed.
        
      
      
    
  );
}

and custom css:

.custom-ordered-list li::marker {
  @apply text-nutmeg font-bold;
}

.custom-ordered-list {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}

.custom-ordered-list li {
  position: relative;
  padding-left: 2.25rem;
  margin-bottom: 0.9rem;
}

.custom-ordered-list li::before {
  content: counter(item) '.';
  counter-increment: item;
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  color: #8b4513;
}

.custom-ordered-list .bold-span {
  display: inline-block;
  width: rem;
}

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

I'm most proud about getting the design fairly close to the original.

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

It was challenging to create the container with the image fitting nicely inside. I need to practice flex box layout.

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

I could use help with the paragraph text. It doesn't match the original image. I was instructed per the project style-guide.md that paragrah text is font-size 15 px.