Skip to content
OverviewSolutions
16
Comments
66

Md5 dalton

@md5daltonLesotho1,430 points

I am a 25 year-old web developer from Lesotho. I love making websites and helping others learn how to become web developers. I mainly focus on front-end web development. My tools of choice: React JS and Sass.👌

Latest solutions

View more solutions

Latest comments

  • Md5 dalton•1,430
    @md5dalton

    Hola 👋

    El archivo index.html está en el mismo nivel que tu imagen, así que tiene que cambiar src del <img> a src="image-qr-code.png".

    Sí te das cuenta tiene duplicado 3 veces el código ☝️

    Cheers👌

  • Md5 dalton•1,430
    @md5dalton

    Hi Nayan👋

    I had a similar experience when I was just starting with tailwind but as I got used it, it is an excellent tool in the long run. I did not like how it cluttered my HTML markup however, once I began to use it with a framework like React JS, all I had to do was extract all that repetition into a component or a partial and since then I have never looked back👌

  • Md5 dalton•1,430
    @md5dalton

    Hi there👋

    The idea is to generate a new piece of advice by clicking the dice icon so you don't need to use a timer. So you just attach a click listener on the dice icon like so:

    <div className='quote-dice' onClick={() => getAdvice()}>...</div>

    You can even go further by handling loading and error states. 👍

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Mithun 👋

    Cool you went with the bonus solution😎

    Regarding the background gradient, I noticed you used a pseudo element to achieve the desired effect however, you could still have just applied it directly on #App or body and there would have been absolutely no need to write additional CSS for that pseudo element.

    Cheers 👌

  • Md5 dalton•1,430
    @md5dalton

    Hello Andrey Esman 👋

    Well done with your solution for this challenge 👍

    Excellent advice from @MelvinAguilar and if you were wondering how to add that no-cache option, here's how you can do it:

    fetch ("https://api.adviceslip.com/advice", {cache: "no-cache"})...

    Cheers 👌

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Paul Jin 👋

    Congratulations on finishing this challenge 👍

    Since this bg-pattern-card.svg is a background and does not form part of the page content, use background-image instead of the img element and you'll have less HTML markup to work with.

    Negative margins also do work in placing that profile picture image, however I'd suggest you use CSS Grid instead:

    main {
   ...
   display: grid;
   grid-template-columns: auto;
   grid-template-rows: /* define your rows here */
}

.profile {
    ...
    grid-row: 2 / 3; /* depending on how you defined your rows */
}

    This is just one way to implement this through CSS Grid and there is still other code you can use. That's how flexible CSS Grid is👌

    Marked as helpful
View more comments