@obriedan
@johnrookie-coder
Submitted
Hi folks, it took me a while to build this website. Along the way, attaching a submit event to the form element requires us to have a button element that is placed inside of that form. I've also changed the font family of this website to increased readability. Anyway, please do create some feedback thanks.
Hey John,
Your submission looks great! A few thoughts while looking through your live preview.
Your <input> elements for "Bill" and "Number of People" are set to text. This allows a user to enter characters other than numbers which results in an error with your JS functions. Consider using type='number' instead.
On desktop, your container's max-width is set to 60%. This results in an overly squished container when viewing on a smaller laptop. Check with DEV Tools Responsive at around 1024px. You'll see the "Custom" input box is cut off slightly. To keep things responsive you could look into min(), max(), or clamp()
I'm not sure of the root cause, but there is some odd behaviour with the background and veritcal positioning of the container between viewport widths of 767/768 - probably to do with your media query, and again between 499/500.
Hope this helps!
Marked as helpful
@mohit1607
Submitted
I just want to know how to set the size of the font for small screen sizes and also how to be perfectly responsive
You can set your font size to be variable using clamp(). It works by taking three values
You can use it many ways in practice, however a quick and simple method is to determine the minimum and maximum font size in PX (or better REM) and use Viewport Width as the target size.
for instance
font-sze: clamp(0.75rem, 3vw, 1rem)
If you're unsure about which target size to use, you can input a value and use dev tools + resonsive mode to slide between your viewports. Monitoring the computed font size will show you if you hit the correct minimum and maxium sizes.
Marked as helpful
@NathanYee412
Submitted
Hey Nathan,
There should be the linebreak in the starter pack, it's in the assets folder.
Is there a reason you have three <br /> tags? If you're trying to create space, consider margin or padding instead.
Another small tip, you may want to destructure the props you send into your 'Advice.js' component.
function Advice({number, quote}) {
..... rest of function
}
Doing this means you only grab the props you need, and you don't need to use props.number or props.quote in your JSX.
Marked as helpful
@AF1QUE
Submitted
I really enjoyed building this project since it was my first time building my own little utility class names using SCSS. I've also learned to structure files and folders in a more modular way. What do you guys think about the usage of utility class names? Any remarks would be highly appreciated :)
Hey @AF1QUE -- I just had a quick look. The page layout breaks between about 770px and 1150px viewport width. Those would be tablet to low-resolution laptop displays. I haven't learned SCSS yet so I couldn't offer any suggestions on how to fix it. 👍
@denielden
Submitted
Hi there :)
This challenge was to build the QR Code component, but it has become something more complex than a simple component!
Inspired by another project, I wanted to add features to this challenge using React:
.png of the generated QR Code is downloadedI am eager to further evolve this project and learn much more connecting a serveless database! For now I'd be happy to have some feedback ;)
Special thanks to @Remus432, he have really inspired me to create this dinamic component!
Thank you for taking the time to check out my project! And Happy coding ;)
Amazing work! What library did you use to generate the QR code?
Your form validation could use some extra information, it requests a URL, but doesn't specify that you need the protocol. www.google.com does not work, but https://www.google.com does. 👍
Love it either way. Super clean.
Marked as helpful
