@RoksolanaVeres
Posted
Hi, Bhavya! Good job. I've tested your app and found a few minor issues, which are easy to fix:
First of all your button is not centered on small screens. That's because you set a fixed left position of the .btn. Just set it to 50% instead of 233px:
.btn {
position: absolute;
left: 50%;
...
}
Then your button doesn't have any hover effect. There should be a green shadow around the button on the hover. Try to set this box-shadow:
.btn:hover {
box-shadow: 0 0 25px hsl(150, 100%, 66%);
}
And the most widespread problem with this app (which by the way I also had) is that it doesn't work in Firefox. It takes an eternity to generate a new piece of advice in this browser. I'm not aware of all the details, but as other people explained to me the problem is in the very API and some browsers including Firefox need much more time than Chrome, for example, to get a new quote. One of the options to overcome this issue is to modify fetch method in this way:
fetch("https://api.adviceslip.com/advice", {
method: "GET",
mode: "cors",
cache: "no-cache",
})
That's all, keep going and happy coding 🙂
