@remyboire
ViyanMd
@ViyanMdAll comments
- @ViyanMd
No problem! Could you share some info where you’ve learned how to implement the “download” module ?
- @remyboire@ViyanMd
Hey bud. Found an interesting bug for ya :) If you open a new file and refresh the page, the website goes down. Don't have much time to check what's the issue, so maybe you'd want to check on that yourself. Anyways, you've done an amazing work ( i'm impressed it's your first react app) !
- @Christ-Kevin@ViyanMd
Hi there! I am not an expert, but here's what worked well for me:
- Watch some Kevin Powell Youtube videos on responsiveness, layout and css units and media queries.
- Start with something simple. I am talking about literally practicing with one div or img, then combine an img and a div, the add some text. On each step make sure elements behave exactly how you want.
- As soon as you feel comfortable with something really simple, you can go ahead and start newbie challenges here.
- In programming curiosity is the key. You can ask Slack community for css resources and just go article after article. In most cases authors use simple examples to demonstrate what they are doing. After reading an article, try to repeat it by yourself without looking at the author's code.
Marked as helpful - @Nang-Su-Bway-Ni@ViyanMd
Well done! A couple things to fix to make it perfect :)
- Increase the padding for your "right" element.
- Fonts are a little off, so going with a different font size or weight would be great.
- The animation you've added looks great! (I've done something very similar). If you can, make it faster, because if feels like it's lagging.
- The mobile version is a little different from the desktop one, try to match the original design.
If you have any questions, feel free to ask!
- @BramMortier@ViyanMd
Hey! I'm glad you are making progress! A couple things about this project. The desktop version is stretched out both on x and y. Adding max-width and max-height or playing with flex-basis (if you are into flexbox) should solve the problem. Mobile version looks more or less better, but you should check your padding for the outer element as well. Also, the color of the input is a little different from what is in the control design, but that's an easy fix. Now, in regards JS. I assume you've decided to go with default 1 person, it solves the issue but if I put 0 in it, it doesn't give me the error message. I know no one will ever put 0 in there, but that's what the challenge is and you should challenge yourself to make it happen. Also, the tip amount gives "Nan" in some cases, so you should check values you are passing throughout the app. That's all I've found yet (don't have much time to go through you code at the moment), wish you good luck and happy coding. Feel free to ask questions.
Marked as helpful - @Richard2957@ViyanMd
Hey bud! Nice work! It took me about two hours to finish it, but I had to come back to it and add some animations + fix a couple things. One thing I've noticed is that you should fix the color of the text. The rest of it looks great. Also, 7 "ACCESSIBILITY ISSUES" is a little too much, but is easy to fix. Good luck!
- @Indanarishi@ViyanMd
Mobile version is completely broken :(
- @salahudheen007@ViyanMd
You could’ve added simple animations to make it feel smooth, but you nailed it anyways. Well done!
- @LogvnR@ViyanMd
State is simply a way to store and share information. There’s not much you can do to avoid reusing it over and over in child components. Your code looks good at first glance, so you don’t have to worry about that, at least for now, because there’s still a couple bugs you can fix (like “Infinite” number and some design flaws :) Well done though! Happy coding :)
- @alosoft@ViyanMd
Yeah, sure. For the mobile version you should change bottom border radius of your 'div class="section"' back to 0, as it breaks the wholeness of the component and simply looks weird :) The desktop version looks a little stretched out vertically, so maybe play around with margins and paddings to make it "narrower". That is all I've noticed. Good luck!
- @aparajitdotbee@ViyanMd
Also, just a hint, you can totally do this project without both of these in your code :)
- @aparajitdotbee@ViyanMd
@aparajitdotbee Gotcha. Basically, you use absolute positioning when you want to determine exactly where you want to put your element. Nowadays people use position: absolute when it’s impossible to position the element with other tools like flex box, grid, etc. I would recommend reading a couple articles on how it exactly works, but it’s pretty simple. Position relative is mostly used for an element inside which you want to place an absolute positioned child element, which becomes relative to it’s parent. Same thing, the theory is rather simple, so check any article on that as well.
- @alosoft@ViyanMd
Hey bud! The functionality is great, the design is a little bit off though both on mobile and desktop :)
- @Jennifer1919@ViyanMd
You should work a little more on design and test all the functionality. I’ve used it for a couple tries and wasn’t able to get the error message when the number of people is 0. Well done, but there’s still room for improvement :)
- @aparajitdotbee@ViyanMd
Usually, we use background-image when it's not a part of the content, but for design purposes. It also increases loading speed. Check this article on StackOverflow: https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image In regards to the second question, it's not really clear. Could you describe what was the issue? Maybe I could help if I know the context.
- @dragoshcode@ViyanMd
P.S. Overthinking might be a problem, but if you know you can do better, then simply do. Write down a list of things you want to fix, fix them and forget about 'em :)
Marked as helpful - @dragoshcode@ViyanMd
Hey! Haven't looked through the code, but I've finished this project a week ago or so and can say that flex with all it's functionality works great here. Some media queries are inevitable, but if you feel like there's too much, you're probably right. Flex allows you to make the website much more responsive if used right. Anyways, when I doubt my decisions, I usually look through other peoples solutions to find both worse and better solutions and after that get back to my own code with fresh and usually better ideas. In regards the bugs: hamburger menu doesn't work for me (iPhone 13)
Marked as helpful - @Xzoky174@ViyanMd
Hey bud! You've done a great job, but you should at least go through HTML issues from the report and fix that. Also, I would recommend to go through some theory on semantics and tools to help you always guess the right size of the element. Overall it looks good if not comparing it with the control version.
Marked as helpful
