All solutions

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

It was fun playing with the mix-blend-mode CSS property. I used it to overlay the image with the violet hue.

I wanted to give the card a bit of flair, so I used the CountUp.js library to animate the statistics as they count up to their final values.

I also added a gradient shimmer effect to the highlight color in the card heading. This was a fun detail to code and I think it adds a bit of visual interest to the card.

.purple-shimmer {
  -webkit-background-clip: text;
  animation: shimmer 5s infinite linear;
  background: linear-gradient(
    90deg,
    #b159e7 0%,
    #cb80f8 25%,
    #b560e8 50%,
    #cb80f8 75%,
    #b159e7 100%
  );
  background-clip: text;
  background-size: 400% 400%;
  color: transparent;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

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

I found it interesting to integrate Tailwind CSS outside of a React environment. I've used CountUp before, but again, this was in the context of React, and here the plan was to use some of the same tools and libraries but outside of the React ecosystem.

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

Thanks for any feedback!

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

It was great to do this project collaboratively with another developer, using VS Code Live Share and Port Forwarding. I enjoy working as a team, as I always learn something from everyone with whom I work.

I'm proud of the attention we gave to keyboard accessibility and responsive layout. I feel that this project is very well-polished.

One thing I would do differently is to pay a bit more attention to project structure from the get-go. Thinking about structure before we start would help avoid haphazard, post-hoc organization and help keep the code cleaner.

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

As noted in the challenge description, the date validation was particularly tricky. We used the date-fns function library for the core calculation, and found and extended this nice bit of code for getting the days in any particular month:

function getMaxDaysInMonth(month: number, year: number) {
  const date = new Date(year, month, 0);
  date.setFullYear(year);
  return date.getDate();
}

We ran into several bugs caused by stale state, and it was helpful and educational to work through those problems, keeping in mind the effect of closures.

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

I'm really happy with this project! That said, feedback of any kind is very welcome, so if you spot room for improvement, please drop me a note.

My challenge for this project was to build out this faq accordion component and get it looking as close to the design as possible in only 30 minutes.

I was able to complete the component in vanilla HTML, CSS and Javascript in just 44 minutes. Pretty close!

I took another 10 minutes to create the readme and deploy the site to Netlify.

My challenge for this project was to build out this blog preview card component and get it looking as close to the design as possible in only 30 minutes.

I was able to complete the component in vanilla HTML and CSS in just 29 minutes. Success!

I took another 10 minutes to create this readme and deploy the site to Netlify.

This was a fun project. I actually finished it in November but had some final tweaks I wanted to add and never got around to publishing. So here it is...

I have some more work I want to do on autocomplete which I may get around to in the future.

I did this project in a series of pair programming sessions with my sister and fellow coder, Joy.

It was a great experience!

Hi community!

I'd love to get feedback on best practice app structure. Thanks!