Skip to content
OverviewSolutions
5
Comments
5
P

Daniel

@obriedanIreland140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • P
    Daniel•140
    @obriedan

    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
  • P
    Daniel•140
    @obriedan

    You can set your font size to be variable using clamp(). It works by taking three values

    • the smallest size acceptable
    • the target size
    • the largest size

    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
  • P
    Daniel•140
    @obriedan

    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
  • P
    Daniel•140
    @obriedan

    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. 👍

  • P
    Daniel•140
    @obriedan

    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