Skip to content
OverviewSolutions
8
Comments
6
Shonuff
@TheShonuff

All comments

  • Shonuff•280
    @TheShonuffPosted over 2 years ago

    Yeah it does work fine and looks fantastic. Great job on the challenge!! I would suggest now to go through and try to correct your HTML validation issues. Seems like your CSS isn't filled out correctly based on the error types and should be a relatively easy fix for you. Once again, great job using just HTML and CSS

    Marked as helpful
    0
  • Shonuff•280
    @TheShonuffPosted over 2 years ago

    I looked at your project and noticed you're not loading in a new quote on the button click event. I Struggled with this for a bit myself and found this to be helpful. Here is the code I implemented

    let response = await fetch("https://api.adviceslip.com/advice", { cache: "no-store", });

    Good job on the design and implementing the hover feature correctly. You just have to get that new quote loaded in when you click the button. You're almost there.

    Marked as helpful
    0
  • Shonuff•280
    @TheShonuffPosted over 2 years ago

    I looked at your project and noticed you're not loading in a new quote on the button click event. I Struggled with this for a bit myself and found this to be helpful. Here is the code I implemented

    let response = await fetch("https://api.adviceslip.com/advice", { cache: "no-store", });

    It would also appear you might want to adjust some of your design parameters. You have your sizing a bit off. Like your .item class is way too big and your font for para is too small.

    0
  • Shonuff•280
    @TheShonuffPosted over 2 years ago

    I looked at your project and noticed you're not loading in a new quote on the button click event. I Struggled with this for a bit myself and found this to be helpful. Here is the code I implemented

    let response = await fetch("https://api.adviceslip.com/advice", { cache: "no-store", });

    I would also recommend adding a hover event to your button. Per the design you need to add a glow effect. That can be done with a little CSS box-shadow and an alpha value. Good job on getting the cursor to be a pointer. I forgot that aspect when submitting my solution. Don't forget to try and eliminate all of your HTML errors in the report generated with the solution. Figuring out where to stick the h1 tag was a little mini-challenge.

    Marked as helpful
    1
  • Shonuff•280
    @TheShonuffPosted over 2 years ago

    I was looking through solutions to see where people where sticking there h1 tag to fix all the accessibility issues and I checked out your solution. I would recommend you check out the Request.cache MDN documentation. I believe you able to solve the issue for reloading in a new quote when a new button click events occurs. I struggled with this for a bit myself and was actually pretty upset when I learned it was solved with 3 words.

    Also I would think about adding a hover to your .dice class. I added a box shadow with this code to achieve the look in the design. box-shadow: 2px 2px 30px rgba(83,255,171, .8);

    Marked as helpful
    1
  • Shonuff•280
    @TheShonuffPosted over 2 years ago

    You're missing an important feature. The ability to load a new quote on button click. I recommend you check this out. Specifically read the {no-cache} feature. With 3 words you can get this feature working with no problem. I struggled with this for a minute myself.

    Also your button is not responding when you hover over it. I would recommend adding a box shadowing with an alpha channel.

    Marked as helpful
    1