All comments

• 

  magv01• 40

  @magv01

  Submitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  First time working from Figma and I think I got this pretty close to the design file . I started off using root styling also for the first time.

  What challenges did you encounter, and how did you overcome them?

  The padding and margin to get it matching the design file as I couldn't see that the exact sizes are in the style guide. I created small, medium, large root styles and calculated 320px wide container against the 288px image size to find the padding size.

  What specific areas of your project would you like help with?

  would like feedback on html structure and css decisions..what could I improve also did I miss anything from the figma design file?

  

  QR-Code Component -Flex

  2

  30

  

  Matheu46• 120

  @Matheu46

  Posted 6 months ago

  wow, it's almost perfect!

  The only thing different from design that I see is the shadow. In the design there is more blur and maybe offset-y needs a little adjust.

  1

  This comment has received 1 replyShow
• 

  LynnArsa• 20

  @LynnArsa

  Submitted over 1 year ago

  At first, I used basic CSS Styling because it's more convenient for small projects. But we decided to change to Tailwind CSS, hoping that we can learn more by doing it. I have trouble with styling the glowing hover button using Tailwind CSS, also I'm sure I still can make the JavaScript code simpler but still don't understand how to do it.

  

  Responsive Advice App Generator using TailwindCSS

  3

  60

  

  Matheu46• 120

  @Matheu46

  Posted over 1 year ago

  an easy way to turn your javascript code simpler is call the function once, so you don't have to make fetch two times in the code

  function getAdvice() {
    fetch("https://api.adviceslip.com/advice")
      .then((response) => response.json())
      .then((data) => {
        console.log(data)
        document.getElementById("advice-id").innerHTML = "A D V I C E  # " + data.slip.id;
        document.getElementById("advice-word").innerHTML = data.slip.advice;
      })
   }
   getAdvice()
  

  the code will generate a phrase when the website is opened, just like your first fetch

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Yuzuki9• 20

  @Yuzuki9

  Submitted over 1 year ago

  

  3 column cards

  1

  30

  

  Matheu46• 120

  @Matheu46

  Posted over 1 year ago

  Great solution! But look at the border radius of the rectangles, you can set different values ​​of the border radius for the corners

  Ex.: border-radius: 10px 40px 40px 10px; which reffer to top-left, top-right, bottom-right and bottom-left respectively

  Marked as helpful

  1

  This comment has received 1 replyShow