Skip to content
OverviewSolutions
11
Comments
3
Andrea
@MirMurr

All comments

  • adithya cj•70
    @Adithya-CJSubmitted over 1 year ago

    I found difficulty in coding a navbar and how to make the content slide down when the dropdown is clicked. I am unsure that whether the way I used media querry is the right way.

    Intro Section

    2
    Andrea•290
    @MirMurrPosted over 1 year ago

    Hello Adithya,

    I like your solution! There´s another way to solve the "dropdown issue". Simply add an eventListener to the target (in this case your target is the button you want to click on and the event is "click"). Then toggle the active class on your target element and you just format the .active class in CSS accordingly.

    Here´s an example in JS:

    featureButton.addEventListener('click', () => {
featureDropdown.classList.toggle('active');
});

    I hope it helps. :)

    0
  • Huy Phan•2,300
    @huyphan2210Submitted over 1 year ago

    Hello😁! My name is Huy, and this is my solution for this challenge.

    Users should be able to:

    • View the optimal layout for the site depending on their device's screen size
    • See hover states for all interactive elements on the page
    • Open a lightbox gallery by clicking on the large product image
    • Switch the large product image by clicking on the small thumbnail images
    • Add items to the cart
    • View the cart and remove items from it

    What I used🚀:

    • Framework: Angular
    • Language: Typescript, HTML, SASS
    • I don't use any extra libraries

    Thank you! Cheers🎉

    Ecommerce Product Page | Angular 15

    1
    Andrea•290
    @MirMurrPosted over 1 year ago

    Hello Huy!

    I like your solution! I have also completed this project and I really enjoyed working on it! I have some formatting tips for you:

    • Footer: I was struggling with the issue that the footer doesn´t stay on the bottom of the page. :) It is easy to solve: you can add position relative to the <main> HTML tag and set a min-width of 100vh. To the footer HTML tag you can add position absolute and bottom: 0 properties in CSS. This will place your footer to the bottom of the page and it won´t overlap the content above.

    • lightbox gallery: there are no arrows on the main image when I open the lightbox on laptop. This is a great resource on lightbox image gallery: https://www.w3schools.com/howto/howto_js_lightbox.asp

    I hope it was helpful. :)

    Best regards, Andrea

    Marked as helpful
    0
  • DANIEL SLAGER•10
    @toasteaterSubmitted about 2 years ago

    Wasn't sure how to...

    • add the mini cart pic.
    • size the main add appropriately.

    css grid

    2
    Andrea•290
    @MirMurrPosted about 2 years ago

    Hey!

    There is an alt text so you might have added the link incorrectly to your HTML code. In order to display images on the page the images and your index.html file should be located in the same folder.

    Here is an example code from my code:

    ´´´ <img class="woman-desktop" src="./illustration-woman-online-desktop.svg" alt="computer"> ´´´

    You should use the image tag and paste the link between the src"". It´s important that your HTML File and the image are in the same folder.

    I hope it helps!

    0