All solutions

Tried to do some easy challenge in minimum time possible. Almost under 30min. I think everything is as close as possible to the design

Thanks any way <3

Hi everyone, Super exciting project for me and i'm glad to present my work to you. First Angular project for me, so it was very interesting to use typescript and scss for the first time. I had at first a hard time to implement all I wanted as I feel like it is a completely different experience from developpement in Javascript vanilla.

I'm pretty proud of the visual integration, i think this is pretty close to a "pixel perfect" integration. Both the modal and the hover effect on the image card was very interesting.

Conserning JSON, I have a surprise for you, I implemented other items. I think the right way to implement it would have been to use Angular Routing but I have a very not much experience with it and I thought about implementing other items too late in the developpement, it would have needed too much change in my code, so yeah. I just data-binded the title, the image, the price. The descriptive text is not data-binded because it would have give me too much imagination to write it all down lmao.

The cart gave me a lot of pain but it works wonder now. Deleting a single item was hard while traking the overall total of item in cart (which is display over the cart icon).

On a syntaxe point, it tottaly went over my head to be honest. I was a lot more focus on understaning Typescript and Component. Feel free to remind me things i forgot.

Side note, I started to use min-width which made easier the responsive side. I will try to use it a lot more in the futur.

Thx guys.

Very fun project. I learn about gsap and its use. I tried not over due tho because i felt this design was not that appropiate for over the top gsap animation. I also learn how to use CSS selectors with attributes. Like .class[aria-expended=true] to simplified dropdown menu in js. That was quite interesting and made things easier.

I tired to follow as I could BEM naming convention for class but I think I lost myself.

The side panel (only on desktop) was the most interesting bit of this code.

I had ton of fun during this challenge. Made customizable menus to change the colors and theme of each card. I was a bit lost at the end so it got fuzy.

Quick coding, so not the most effective way to implement everything. I had not code for a while so don't mind reminding me things i forgot, especialy on the html/css structure.

I struggled with the background so it don't creat a scroll bar, so i did what i beleive to be a dirty trick with overflow-x: hidden

I tried to implement the 5 stars with background repeat but i couldn't find out to space out the stars without going on photoshop and resize the original icon. So i just implemented 5 <img> x3 times, which i think is not ideal for cache purpose. Tell me if there is a better way.

Thx a lot

Yo man Nothing too fancy here, had to do it quickly so i did not added extra features or anything. Working as intended tho.

That was a ton of fun to animate and trying to make this "boring card" as interesting as possible. I hope you will like it.

Although I'm very proud of this, there is something that bothers me.

When the site is first loaded, the button doesn't react imediatly. Which is wierd. If someone knows why, it would be awsome.

I think i did realy bad at "animating" the button and the form. The script seems overly complicated for something as simple as : you touche the button; the button change color.

As allways the layout during the transition between mobile layout and desktop is kinda weird but I think it ended up ok.

Seems pretty legit