@shoxjahon527
Submitted
@RaidEyes
@shoxjahon527
Submitted
@RaidEyes
Posted
Major bug my friend, it seems you need to check a lot of things:
Check out
, if I don't have any product in it, I cannot close it.I hope this help!
@bharathkumar369
Submitted
@RaidEyes
Posted
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:
<dialog>
combine with showModal()
to achieve this behavior.Happy coding! I hope this help you!
@huanfs
Submitted
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
@RaidEyes
Posted
There 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 the menu
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 of React
, using components to reduce complexity and increase performance.
Overall, still good work! Happy coding! Hope you find this helpful!
@vvaciej
Submitted
@RaidEyes
Posted
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 helpful
@unkuseni
Submitted
I would like some feedback on this challenge
@RaidEyes
Posted
Hi there, congrats on completing this challenge! After carefully looking through your preview I found some bugs.
Happy coding!
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
@RaidEyes
Posted
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
@Adufe-Obanijesu
Submitted
@RaidEyes
Posted
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:
<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
:errorMessage.innerHTML = ""
errorMessage.innerHTML = "Invalid email address"
innerHTML
.Happy coding!
@Datom969
Submitted
At first, I had issues with the form validation in JavaScript but I was able to get it quickly. Good experience overall!
@RaidEyes
Posted
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:
<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 readersOverall, good job with the Javascript. Happy coding!
Marked as helpful
@CalebeRL
Submitted
Any feedback are welcome!
@RaidEyes
Posted
Great work my friend, congrats!
There are some small issues about the success dialog when submitting the user email:
<img>
is missing from the message.I also have a solution on this, you can check it out and give me some feedbacks.
Marked as helpful
@RaidEyes
Submitted
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!!.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!
@RaidEyes
Posted
Sorry guys, a typo there .animate()
@RaidEyes
Submitted
A Super Difficult CSS Challenge !!!
Here are some highlights:
width
for the app interface and the heading because they look better without responsiveness.::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.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!!
@RaidEyes
Posted
I don't know why it looks bigger than the size in the design. Can someone please help me?