Advice generator app by Wahyu Fatur Rizki

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Great work with this one. Regarding the solution you submitted, I think you should also take notes of the following…

  • Simplify the margin in .container-dice-icon rule set into margin: 0 auto;
  • Increase the breakpoint into max-width:551px; for the responsive design
  • Simplify the padding into padding: 0 16px; in .container-layout rule set in the media query
  • This part can be refactor into...

  From:
   <div className="container-card-quote">
        <p className="header-font header-number-id">
          ADVICE # {props.isLoading ? "Loading..." : props.stateQuote?.id}
        </p>
        <p className="quote content-font">
          {props.isLoading ? "Loading..." : props.stateQuote?.advice}
        </p>
  
  Into:
   <section className="container-card-quote">
        <h3 className="header-font header-number-id">
          ADVICE # {props.isLoading ? "Loading..." : props.stateQuote?.id}
        </h3>
        <p className="quote content-font">
          {props.isLoading ? "Loading..." : props.stateQuote?.advice}
        </p>
  
  

  Advice I got:

  ADVICE # 89

  Don't be afraid to ask questions.

  Above all, The design looks good. Keep it up!

  1

  ---

  

  Wahyu Fatur Rizki•270

  @wahyufaturrizkyPosted almost 3 years ago

  @RioCantre wow thankyou before for reviewing my code, very insightful

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  And Change the background color into Black. 😊👍

  0

  ---

  

  Wahyu Fatur Rizki•270

  @wahyufaturrizkyPosted almost 3 years ago

  @GitHub-dev12345 hmmm I just follow guide style, I think the creator challenge forget to update code color Lol

  0
• 

  Dev Rathore•2,600

  @GitHub-dev12345Posted almost 3 years ago

  Congratulation 🚀😁 complete your challenge. Used this code want your card in center position :

  in body tag Used this CSS Code: body{ display : flex; justify-content: center; align-item: center; }

  in Card Design CSS Code used this property: align-self: center;

  I hope you find this helpful 😊

  0

  ---

  

  Wahyu Fatur Rizki•270

  @wahyufaturrizkyPosted almost 3 years ago

  @GitHub-dev12345 wow thankyou for advise

  0