Skip to content
OverviewSolutions
16
Comments
14
RaidEyes
@RaidEyes

All comments

  • RaidEyes•390
    @RaidEyesPosted 11 months ago

    Major bug my friend, it seems you need to check a lot of things:

    1. The carousel doesn't work.
    2. The menu in the mobile design is off layout.
    3. When I open the cart, the only way to close it is to click Check out, if I don't have any product in it, I cannot close it.
    4. The layout is not consistent between the desktop and mobile design. You can create your own tablet design for this.
    5. The thumbnail is broken in the mobile design, it should be hidden.
    6. If you press F12 and use the wide screen, you will see a photo under your design.
    7. The carousel in the mobile design should not open.

    I hope this help!

    0
  • RaidEyes•390
    @RaidEyesPosted 11 months ago

    Great work! It was a tough challenge for all of us too. Overall, you got the basic ideas of this challenge. However, I found a few bug that may need your consideration:

    1. The cart element doesn't show when I click to check how many products in my cart.
    2. The carousel works but when I click on the photo, it should show a carousel with a dark background behind. Consider using <dialog> combine with showModal() to achieve this behavior.
    3. The layout is not normal between the mobile and desktop version, specifically the tablet version needs more attention. I understand that you don't have the tablet design, but it's okay, you can create your own version for it, just like I did.

    Happy coding! I hope this help you!

    0
  • Ruan Figuereido•500
    @huanfsSubmitted 12 months ago

    I've finished this around 7h work, its finally complete, but in mobile devices when i click the button <add to cart> the style of header changes into a desktop layout again misteriously, if anyone have an feedback i'm glad

    E-commerce product page-info

    1
    RaidEyes•390
    @RaidEyesPosted 12 months ago

    There are many problems with your code:

    1. You are using the desktop approach first which is not recommended, usually if we have the design for both desktop and mobile, we usually go with mobile first. You should only go for desktop first if the desktop design is all you have.

    2. Regarding your <header>, it seems that you didn't apply any style to the <ul> element. From what I see you change your components completely, this is not correct. You should apply the style to the menu when the screen size changes.

    3. Your React components render every time something is triggered which is not good for performance. Instead, when you click something only the related content re-render, this is also the point of React, using components to reduce complexity and increase performance.

    Overall, still good work! Happy coding! Hope you find this helpful!

    0
  • RaidEyes•390
    @RaidEyesPosted 12 months ago

    Nicely done my friend! Overall, you've nailed the design ;)

    However I found some slight issues that might need your consideration:

    1. It is best NOT to style the <html> because there could be performance issue and it's going to be harder to override other elements.

    2. The Price of the product along with the discount price also changes when I click increase the number of product I want (which is not normal)

    Hope you find this helpful! Happy coding!

    Marked as helpful
    1
  • RaidEyes•390
    @RaidEyesPosted 12 months ago

    Great work my friend, however I found a small bug from the preview. You forgot to change the date and month for the card.

    Just only that, everything else works fine to me. Good job!

    0
  • RaidEyes•390
    @RaidEyesPosted about 1 year ago

    Hi there, congrats on completing this challenge! After carefully looking through your preview I found some bugs.

    1. The complete dialog is very big (desktop version) which is not normal.
    2. The email shown in the complete dialog should be the same as the user's input email. Instead, the email was the default in your HTML.

    Happy coding!

    0
  • RaidEyes•390
    @RaidEyesPosted about 1 year ago

    Nice animation you got there, really inspiring! However, I think I found a bug!

    In your destination section, the page seems to stretch, notice the scroll bar when you open this page. And because of that, there's a small extra space at the bottom of the section. So far, I haven't found the reason why but you can check and fix it!

    Overall, good work! Happy coding!

    Marked as helpful
    1
  • RaidEyes•390
    @RaidEyesPosted about 1 year ago

    Hi there, I guess this is your first project here right? Well done! However, I find that there are some minor mistakes you need to consider:

    1. Your email <input> doesn't have a validation. Which means that the user can type whatever they want in the input and the form can still be submitted. Here you should use JS (yourInput).validity.valid to check if the user is typing correctly, the output of this is true or false:
    • If the validation is true => errorMessage.innerHTML = ""
    • If the validation is false => errorMessage.innerHTML = "Invalid email address"
    1. The complete message doesn't show the user's email, it only shows the default input of your HTML, try get the user input with innerHTML.

    Happy coding!

    0
  • RaidEyes•390
    @RaidEyesPosted about 1 year ago

    Hi, I've just checked your design and it seems something is wrong in your code, you should take a look at your code again. Some issues I found:

    1. The design is taking the whole screen, which is very different from the original design and it's not normal when a registration form is big like that. The success form is also getting the same problem.
    2. When using the <form> element in HTML, you should give it a name, e.g name: subcribe-form or an id to prevent any bug later on. In the form you need to use the <label> tag because this is for screen readers

    Overall, good job with the Javascript. Happy coding!

    Marked as helpful
    1
  • RaidEyes•390
    @RaidEyesPosted about 1 year ago

    Great work my friend, congrats!

    There are some small issues about the success dialog when submitting the user email:

    1. The <img> is missing from the message.
    2. The message did not contain the user email, instead it shows a default email in your HTML.

    I also have a solution on this, you can check it out and give me some feedbacks.

    Marked as helpful
    0
  • RaidEyes•390
    @RaidEyesSubmitted about 1 year ago

    Took me 5 days to Complete this challenge!

    I decided to use some new features like Nesting CSS, <dialog> in HTML & .anime() in Javascript. And suprisingly, they are not completed. I got a few bugs in my code and took me a hard time to debug them. Therefore, I recommend using traditional stuffs before jumping into these guys. In short:

    1. <dialog> is fun but if you apply a display property for it, it will automatically appear without being called. Be careful!!
    2. Nesting CSS is fairly new, there are clashes every where. Traditional CSS is fine.
    3. .aniate() in Javascript is a web APIs, it's not new but it reduces the complexity of my code and it's fun to use. Other than that I also use element.validity.valid to check the user input's validity, which is very useful.

    Happy coding!

    Javascript animate and Nesting CSS experience!

    1
    RaidEyes•390
    @RaidEyesPosted about 1 year ago

    Sorry guys, a typo there .animate()

    0
  • RaidEyes•390
    @RaidEyesSubmitted about 1 year ago

    A Super Difficult CSS Challenge !!!

    Here are some highlights:

    • I used fixed width for the app interface and the heading because they look better without responsiveness.
    • The ::before and ::after that I placed in my body was very hard to shape. I managed to get them about 80% right. If you know the correct way, please show me.
    • I went through a lot of trouble just to get the correct shapes for the body and the top app box.

    Overall, I'm very happy that I completed such a hard challenge. Let me know if you can give me some advice on how to organize my CSS code. Thanks!!

    Chat App Illustration - Very difficult

    1
    RaidEyes•390
    @RaidEyesPosted about 1 year ago

    I don't know why it looks bigger than the size in the design. Can someone please help me?

    0