Steve
@peanutbutterjllyAll comments
- @FabianGutySubmitted 9 months ago@peanutbutterjllyPosted 9 months ago
although that looks like a tasty omelette (and easy recipe), it doesnt look much like the QR code in the design
0 - @CGM-ThanHtikeSubmitted 9 months ago
Thank you for taking the time to review this
-I'm focusing on practicing 3D animation, particularly the creation of card rotation animations with a 3D perspective in this challenge.
Additionally, I've implemented error handling using JavaScript:
-Now, if you attempt to submit without selecting a rating, an error message will be displayed.
-Also, if you inspect and modify the rating value to be less than 0 or greater than 5, an error message will appear.
If you have any suggestions for improving my code, I would greatly appreciate your feedback.
Thanks in advance!
- @Kaung-Thant-KyawSubmitted 9 months ago
The current rendition may not attain perfection.
@peanutbutterjllyPosted 9 months agoIt may not be pixel perfect, but i think it looks great!
good job
1 - @JanAbeSubmitted 9 months ago
I used an empty cell in css grid to push a column more towards the center. Is this considered bad practice? It felt wrong doing it. But I didn't know how to achieve the same result otherwise.
@peanutbutterjllyPosted 9 months agoI've seen people do layouts where they'll have small cells on the left and right side and put all their content in the middle, then when they want something to take the full width, have it use all three columns, so i wouldnt say your fix was 'bad'.
A different solution probably wouldve been to use justify-content or margin/padding.
good job on getting it figured out!
1 - @Ynotlocin1Submitted 9 months ago
Hello! On this project, I encountered an issue with the image. I used 'display: block, width: 100%, object-fit: cover' on the image, but when switching from mobile to desktop format, the image does not fill the div. Additionally, I had another question: for code readability, is it better to use as many .class and .id as possible, or is the goal to use as few as possible? Thanks in advance!
@peanutbutterjllyPosted 9 months agoI can't recommend styling based on #id's, they're WAY too specific and can be a pain to override on bigger apps/sites.
Regarding classes, it depends on what your teams preference is - if you're coding solo, do what you like best.
0 - @AbderrahmaneGuerinikSubmitted 9 months ago
Hello everyone👋
-
Here is my first project using react🥳
-
Fully responsive and functional age calculator app 👨👴
-
I used react counter library for the animation of the numbers 🔢
-
Open to any feedbacks, Thank you!😊
-
- @cmdarcySubmitted about 1 year ago
The only difficulty I had was figuring out the color scheme for some of the containers, specifically the number buttons and the star image at the top. Also for some reason I couldn't get the star correctly centered in the img container so if anyone has any advice on what to do there it would be greatly appreciated!
@peanutbutterjllyPosted about 1 year agocheers on getting the challenge done.
if you want to get that star centered, you can give your div with a class of 'img-container' a display of grid and use the property and value of place-items: center:
.img-container { display: grid; place-items: center; }
0 - @sophie-mc-devSubmitted over 1 year ago
This is my solution for the Single Price Grid Component.
- With this challenge I got to practice more responsive design but still feel unsure about it and that I still have a lot of room for improvement.
- In terms of layout implementation, that is something I really enjoy and feel like my skills are being put to good use.
- O̶n̶e̶ t̶h̶i̶n̶g̶ t̶h̶a̶t̶ b̶o̶t̶h̶e̶r̶e̶d̶ m̶e̶ w̶a̶s̶ t̶h̶e̶ f̶a̶c̶t̶ t̶h̶a̶t̶ t̶h̶e̶ f̶o̶o̶t̶e̶r̶ d̶i̶d̶n̶'t̶ r̶e̶m̶a̶i̶n̶ c̶e̶n̶t̶e̶r̶e̶d̶ w̶i̶t̶h̶ t̶h̶e̶ p̶a̶g̶e̶ l̶i̶k̶e̶ o̶t̶h̶e̶r̶ p̶r̶o̶j̶e̶c̶t̶s̶ I̶ h̶a̶v̶e̶ i̶m̶p̶l̶e̶m̶e̶n̶t̶e̶d̶. I̶ t̶r̶i̶e̶d̶ t̶o̶ f̶i̶x̶ t̶h̶i̶s̶ b̶u̶t̶ u̶n̶s̶u̶c̶c̶e̶s̶s̶f̶u̶l̶l̶y̶. I̶ w̶o̶u̶l̶d̶ r̶e̶a̶l̶l̶y̶ a̶p̶p̶r̶e̶c̶i̶a̶t̶e̶ i̶t̶ i̶f̶ a̶n̶y̶o̶n̶e̶ l̶o̶o̶k̶e̶d̶ a̶t̶/t̶e̶s̶t̶e̶d̶ m̶y̶ c̶o̶d̶e̶ a̶n̶d̶ c̶o̶u̶l̶d̶ h̶e̶l̶p̶ m̶e̶ f̶i̶x̶ t̶h̶i̶s̶ m̶i̶n̶o̶r̶ i̶s̶s̶u̶e̶. [FIXED]
I'm happy to hear any feedback and advice to help me improve!
@peanutbutterjllyPosted over 1 year agohey 👋,
I would change the display on the body to grid (and you can then remove flex-direction, and position: relative), and add
grid-template-rows: 1fr auto;
that'll make your content take up the majority of the page and the footer (which is set to 'auto') will only take up its size as a row.also, in the paragraph of your footer, you can remove the
position: fixed;
andbottom: 0;
from your .attribution class.those small details will get your footer on the right track.
your solution looks great overall 👍
Marked as helpful0 - @michaeleiiSubmitted over 1 year ago
In addition to the main challenge I used the useEffect hook to fetch data from Random User API
The most difficult part was using learning how to use the before pseudo selector with tailwindcss. Not sure I did the background with the svgs correctly. I still have no idea how to get the top circle in position of the top left corner without it moving :(
@peanutbutterjllyPosted over 1 year agoI love the fact that you used the random user api to generate a new person on each page load!
your solution looks good too.
job well done
1 - @00YellowLemonSubmitted over 1 year ago
Hello Front-end friends. I have some trouble on the mobile part. The error message overlaps with button. Can anyone tell how to fix this. Feedback will be highly appreciated
@peanutbutterjllyPosted over 1 year agohey 👋,
to give space from the error message to the button below it, you can get your button and add some margin to the top of it on mobile styles, maybe about 2rem;
good job with your solution!
0 - @samtrollerqSubmitted over 1 year ago
Is it just me the qr image isnt loading for?
@peanutbutterjllyPosted over 1 year agohey,
the image doesn't load for me either;
it looks like in the markup(html) your referencing the image in the images folder but in your repository you dont have an images folder, you have the image in the same directory as your html page.
you can fix that by changing the src of the image tag to:
src="./image-qr-code.png"
hope that helps!
2 - @MHA2001Submitted over 1 year ago
In this challenge, I noticed that the appearance of the website is slightly different in different browsers. In my solution there is a gap between the bottom of the page and the content in Chrome but not in Edge. How should we solve these kinds of problems?
@peanutbutterjllyPosted over 1 year agohey 👋,
each browser has default styles for different things that (unsurprisingly) look different across each browser.
to help with that, you can put a css reset in there and adjust the styles that you want; I really like to use Josh Comeau's reset (I've tweaked it a little bit for my own purposes) as it serves as a good base.
your solution looks great! and good eye on catching it on a different browser too
Marked as helpful0