RaidEyes
@RaidEyesAll comments
- @shoxjahon527Submitted 11 months ago@RaidEyesPosted 11 months ago
Major bug my friend, it seems you need to check a lot of things:
- The carousel doesn't work.
- The menu in the mobile design is off layout.
- 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. - The layout is not consistent between the desktop and mobile design. You can create your own tablet design for this.
- The thumbnail is broken in the mobile design, it should be hidden.
- If you press F12 and use the wide screen, you will see a photo under your design.
- The carousel in the mobile design should not open.
I hope this help!
0 - @bharathkumar369Submitted 11 months ago@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:
- The cart element doesn't show when I click to check how many products in my cart.
- The carousel works but when I click on the photo, it should show a carousel with a dark background behind. Consider using
<dialog>
combine withshowModal()
to achieve this behavior. - 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 - @huanfsSubmitted 11 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
@RaidEyesPosted 11 months agoThere are many problems with your code:
-
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.
-
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 themenu
when the screen size changes. -
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 ofReact
, using components to reduce complexity and increase performance.
Overall, still good work! Happy coding! Hope you find this helpful!
0 -
- @vvaciejSubmitted 11 months ago@RaidEyesPosted 11 months ago
Nicely done my friend! Overall, you've nailed the design ;)
However I found some slight issues that might need your consideration:
-
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.
-
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 helpful1 -
- @TonegaSubmitted 11 months ago@RaidEyesPosted 11 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 - @unkuseniSubmitted about 1 year ago
I would like some feedback on this challenge
@RaidEyesPosted about 1 year agoHi there, congrats on completing this challenge! After carefully looking through your preview I found some bugs.
- The complete dialog is very big (desktop version) which is not normal.
- 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 - @ZHADOW999Submitted about 1 year ago
i had some problems of centering images and text in mobile and tablets design, but i found a solution, but can anyone please suggest any other ways. pls is there a more efficient way of dealing with media queries . thanks
@RaidEyesPosted about 1 year agoNice 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 helpful1 - @Adufe-ObanijesuSubmitted about 1 year ago@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:
- Your email
<input>
doesn't have a validation. Which means that the user can type whatever they want in the input and theform
can still be submitted. Here you should use JS(yourInput).validity.valid
to check if the user is typing correctly, the output of this istrue
orfalse
:
- If the validation is true =>
errorMessage.innerHTML = ""
- If the validation is false =>
errorMessage.innerHTML = "Invalid email address"
- 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 - Your email
- @Datom969Submitted about 1 year ago
At first, I had issues with the form validation in JavaScript but I was able to get it quickly. Good experience overall!
@RaidEyesPosted about 1 year agoHi, 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:
- 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.
- When using the
<form>
element in HTML, you should give it a name, e.gname: subcribe-form
or anid
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 helpful1 - @CalebeRLSubmitted about 1 year ago
Any feedback are welcome!
@RaidEyesPosted about 1 year agoGreat work my friend, congrats!
There are some small issues about the success dialog when submitting the user email:
- The
<img>
is missing from the message. - 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 helpful0 - The
- @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:<dialog>
is fun but if you apply a display property for it, it will automatically appear without being called. Be careful!!- Nesting CSS is fairly new, there are clashes every where. Traditional CSS is fine.
.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 useelement.validity.valid
to check the user input's validity, which is very useful.
Happy coding!
- @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!!
@RaidEyesPosted about 1 year agoI don't know why it looks bigger than the size in the design. Can someone please help me?
0 - I used fixed