README.md

Frontend Mentor - Advice generator app solution

This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Users should be able to generate new advice each time the button is clicked.
• Users will view the optimal layout for the app depending on their device's screen size

Screenshot

Links

• Solution URL: Click here to see the solution
• Live Site URL: Click here to see the live demo

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• React - JS library

What I learned

<div id={advices.id} className="card-container">
  {loading ? (
    "Loading, please wait"
  ) : (
    <>
      <p className="card-id">ADVICE #{advices.id}</p>
      <p className="card-advice">"{advices.advice}"</p>
      <Previews />
    </>
  )}
</div>

in this code, where the ui is displayed. If loading is true then will generate the string. but if it is false then it will generate the id, advices and then the svg image.

Continued development

i will continue learning css, and ofcourse React.

Useful resources

• resource 1 - This help me to get the width of the user current screen size dynamicly. i use it in Previews component where I need to generate either the desktop svg or mobile svg.
• resource 2 - This StackoverFlow solution helped me in center the svg image within the div.

Author

• LinkedIn - @HermawanGan
• Frontend Mentor - @hermawangan