All solutions

I was able to complete this challenge. It was my first time using useReducer() hook and react-router-dom in a project. I am open to any feedback. Happy Coding!

I have successfully completed this challenge and I am open to receiving any feedback or corrections. After deployment, I don't know why the cyan coloris not displaying. Other than that I did enjoy working on this project.

I successfully finished this challenge and am eager to receive any feedback.

My primary focus was on React.js, so I concentrated my coding efforts on two specific screen sizes:

• Mobile: 375px
• Desktop: 1440px

However, I encountered an issue when the screen width exceeded 375px, for instance, at around 400px. Despite using w-full, which signifies 100% width, the background image didn't align with the expected width.

<img
        className="w-full md:hidden"
        src={mobileBackground}
        alt="purple and reddish-purple color blending together"
/>

Thank you for your time. Happy Coding!

I was able to practice my React fundamentals and Tailwind CSS skills. The only issue is that when the hamburger icon is clicked and the menu items pop out, when you scroll further, it doesn't close. This is because I don't know how to apply the IntersectionObserver API in React. I have done some research, and I am seeing information concerning useEffect and useRef. When I learn them, I will update my code later. But if you know of a better way to make an element disappear when scrolled past using useState, let me know.

Something like this in normal javascript:

const initialCoords = section1.getBoundingClientRect();
 window.addEventListener("scroll", function (e) {
  if (this.window.scrollY > initialCoords.top) nav.classList.remove("sticky");
});

But in my code: I want to setShowMenu(false) when the menu item is scrolled past.

const [showMenu, setShowMenu] = useState(false);
  {showMenu && (
        <div className="absolute bg-offWhite  min-h-screen w-[64%] right-0">
          <div className="relative">
            <img
              className="md:hidden absolute right-7 top-3"
              src={menuClose}
              alt={"X diagram to close the menu"}
              onClick={menuHandler}
            />
            <div className="space-y-6 p-6 pt-28 text-xl">
              {navItem.map((nav) => (
                <NavItems nav={nav} key={nav.id} />
              ))}
            </div>
          </div>
        </div>
      )}  

Thank you for your time and feedback. Have a nice weekends!

I have managed to complete this project using tailwindcss and react.js. I am open for any feedback. Thank you for your time and help. The design works best for width 375px and width 1440px.

This is my first react app project. It was fun completing this one. I am open for any feedback and best approach. Happy Coding!

This was really a tough one for me. Working with dates is just something else, however I was able to complete this challenge. I am open for any feedback.

I successfully completed this challenge, which proved to be an incredibly rewarding experience. I welcome any feedback and recommendations you may have. Thank you for taking the time to provide them.

I am open for any feeback and corrections. Thank you for your time. I had to reupload the solution because of certain issues. I believe everything should be working fine now.

I am open for any feedback, thank you for your time and help. I really don't know why the rounded-fullis not showing on mobile view on github pages, but it seems to work on chrome developer tools.

<input
class="p-3 mx-auto w-[20.625rem] rounded-full pl-9 bg-white outline outline-1 outline-paleBlue md:w-[25rem] md:mx-0"
type="email"
name="email"
id="email"
aria-label="Your email address"
placeholder="Your email address..."
/> 

I really enjoyed doing this challenge. I am open for any feeback. Thank you for your time! Happy Coding 😌

I am happy to have completed this challenge. I am open for any feedback. I hope you have an amazing day. Keep going! 💪🏾

This is my first Tailwindcss project. I am open for any feedback especially for tailwind css.

I was finally able to complete this challenge. I am open for any suggestion and feeback. Most importantly how to change the svg's fill, color and background-color.

I am open for any feedback. Thank you

This is my first Javascript challenge. I am open for any feedback and better approach on how to solve this challenge. Thank you.

I would appreciate any feedback, thank you.

I would appreciate any feedback on this project, thank you.

I would appreciate any feedback, thank you.

I am open for any feedback, Happy coding!

I would appreciate any feeedback, thank you

I am open for any feedback.

To obtain the hover or active state was really difficult for me. If you know of a better way, please let me know. Thank you.

Please any feedback will be very much appreciated. Thank you.