Advice generator app - HTML, SCSS, JS, API and mobile-first!

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Darryncodes, Great job!

  To make it look less square and as close to the design as possible I would use width: 30rem instead of max-width in the slip class and in the mobile I would use padding-inline on the body to make sure there is some space around the card

  Hope this help and happy coding!

  1

  ---

  

  darryncodes•6,370

  @darryncodesPosted over 2 years ago

  Hi @denielden thanks for the feedback.

  Have you tested this? It'd cause a blowout at any screen size 430px or less.

  I went with a little creative license with the shape so that regardless the length of the advice in most cases the slip doesn't jump around.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @darryncodes Yes, the slip doesn't jump thanks to min-height

  0
• 

  Grover Richardson•60

  @groverrichardsonPosted over 2 years ago

  Great job man! The loading animation is a great touch. I would trim the timing of it to match up better with when the advice actually loads. I haven’t gone too far in the code, but my assumption the animation is hard coded or preset time-wise. The loading should stop when the page is fully loaded.

  Also the dimensions of the card seem to be more square than intended. The original design dimensions are rectangular so I would go back and make sure the width and height match the design. But stay responsive.

  Overall great job!

  1

  ---

  

  darryncodes•6,370

  @darryncodesPosted over 2 years ago

  Cheers Grover and thanks for taking the time to feedback.

  Perhaps my use of the loading animation might be confusing, my intention was to feedback to the user when a new piece of advice is available. The advice is cached for 2 seconds. Any repeat-request within 2 seconds will return the same piece of advice.

  Good spot. The shape was intentional as I didn’t want the card to jump around.

  All the best!

  0

  

  Grover Richardson•60

  @groverrichardsonPosted over 2 years ago

  @darryncodes gotcha! That makes more sense. Lol, I didn’t get that at first.

  Maybe, take away the loading animation, and just gray out the button until it’s loaded? Either way, that was a great idea.

  It’s probably just user preference anyways.

  Overall this was great!

  0