All solutions

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

Building this with vanilla HTML and CSS to improve my learning

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Next
• TypeScript
• Tailwind CSS

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Next
• TypeScript
• Tailwind CSS
• Mobile-first workflow

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Next
• TypeScript
• Tailwind CSS

This is the first time I am using TypeScript, any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• NextJS 13
• Tailwind Css

While working on this project, I attempted to manage the state with Redux Toolkit but faced difficulties in making it work. If anyone has recommendations for good Redux tutorials or crash courses beyond the official documentation site, I would greatly appreciate it!

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• NextJS 13
• Tailwind CSS

I'm using the Data.JSON provided and fetch it to the component so its dynamic when I change the scores. Same thing with the Result, I get it from the score's median.

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Vite
• Tailwind Css
• Mobile-first workflow

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Vite
• Tailwind Css
• Mobile-first workflow

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Vite
• Tailwind Css

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Vite
• Tailwind Css

My solution is not quite right, I have issue with button share. I made it separate from button share to open and close popover. Because of that, I cant think the solution to change the color button open when popover element opened.

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Hi, I’m Galih 🫡, and this is my solution for this challenge. ⭐

Build with:

• Vite
• Tailwind Css

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you.🚀❤️

Finally its done! So much fun doing this project.

Moreover this is my first time doing Accordion Component with React without external library and doing it from scratch, and I'm proud of it.

Any feedback will be appreciated.

Finally I finished this project!

The hardest part of this project is filtering color overlay the hero image. I try to filter the color from style-guide.md = hsl(277, 64%, 61%), but I cant find match overlay color as same as the design. So, I try to find color that close to match the design #591285a1, and just switch it.

Does any solution that can use color hsl(277, 64%, 61%) for hero overlay without changing the color? if so, please enlighten me.

Thank you!

The hardest part this project is I can't find background position that match the design. If there is feedback that can help me match the background position as same as design, please help me.

Thank you!

In this project, I learn about building image overlay and it's fun. The hardest part is styling the drop shadow with tailwind css because its custom.

If there is feedback about my Solution please help, all your feedback help me a lot. Thanks!

The hardest part I found when building this project is :

1. I'm not familiar with background image. I try to follow Tailwindcss's docs but the image still not displaying. It turn out, I have to define its <div> width and height first so the image could displaying embarrassed
2. The card pallet is not included in recourses, so I find it myself with color picker to get the it's color.
3. I'm from vanilla JS, so I'm not familiar with React useState Hook but I want to learn it. Moreover this also waste my time a lot to try to figure it out somehow.

If there is a feedbacks about my solution to get better, please leave it. I appreciate all your feedbacks.

Thank you!

The hardest part I found when building this project is, I can't using Tailwindcss background image in <div> at Vite framework.

I try to follow Tailwindcss's docs, but the image not showing. I ended up, importing the image import bgImageProductDesktop from "./assets/images/image-product-desktop.jpg"; then call it on <img> tag.

I want to know if what I did was correct or if I should using background image in <div> tag ?

Thank you