Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Angular, Heavy JSON work, multiple items available

#angular#sass/scss#typescript
Nam HaÏ 820

@Nam-Hai

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


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.

Community feedback

@utkuonursahin

Posted

Congratulations, really cool stuff. As an advice, you can add a spinner while gallery images loading.

Marked as helpful

1

Nam HaÏ 820

@Nam-Hai

Posted

@utkuonursahin Yeah i was wondering how to handle the loading of the assets and also how the browser was handleing it.

Does the browser load everything at the start, or does it load it only when asked ? Here I data-binded the url of the images, so when you "change page" it change the url.

0

@utkuonursahin

Posted

@Nam-Hai I completed this challenge too and I added a spinner. You can check what did I do if you want. Besides the what you've done in this project, adding a spinner is really just a piece of cake for you. Anyway if we come to your question, browser loads images when they're asked.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord