Skip to content
OverviewSolutions
4
Comments
2
Marija H.
@mh1251

All comments

  • Marija H.•110
    @mh1251Posted over 2 years ago

    I checked the live version of the exercise, it returns a new quote everytime i click on the button and it works :)) good job!

    Also i wanted to comment about your commented out part (with fetch) of the app.js file. The code would work like that also, if you didn't store everything in the obj variable. In the obj variable you should store the data you retrieve from the fetch and then use it. Instead you should do it like this:

    async function adviceGen(){
let obj = await fetch("https://api.adviceslip.com/advice") .then(res => res.json())

 // It returns a promise by default, so you wont need the 'return' in front of res.json() 
 // Now the data is stored in the obj variable, and we wait for the promise inside the fetch(with async/await) and now you can use it do the following:

  id.innerText = obj.slip.id ;
  advice.innerText = obj.slip.advice ;
}

    so your function should work likes this:

    async function adviceGen(){
  let obj = await fetch("https://api.adviceslip.com/advice") .then(res => res.json())
  id.innerText = obj.slip.id ;
  advice.innerText = obj.slip.advice ;
}

    I hope this will help you also with further exercises, fetch is easier to use in my opinion so it will come in handy :)!!

    Marked as helpful
    1
  • Jem0•120
    @Jem0Submitted over 2 years ago

    I'm having trouble creating the hover effect in the design. Any advice would be appreciated!

    advice generator app

    3
    Marija H.•110
    @mh1251Posted over 2 years ago

    Great job on the solution!! For the hover effect you can do this, it worked for me:

    #btn-generate:hover {
  box-shadow: 0px 0px 30px 5px hsl(150, 100%, 66%);  /*for a neon green color*/
  transition: ease-in-out 500ms;
}

    the box shadow property syntax is: horizontal-offset / vertical-offset / blur / spread / color

    Marked as helpful
    1