Andy• 520
@AndyAshley
Submitted
I'm sure the Javascript could have been done in a better way, but it works fine.
Shonuff
@TheShonuff
All comments
- Shonuff• 280
@TheShonuff
Posted
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 - Neethu Sasidharan Nair• 340
@nees101
Submitted
Looking for feedbacks for improvement.
Thank you
Shonuff• 280@TheShonuff
Posted
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 - RUTVIK-SANATHARA• 190
@RUTVIK-SANATHARA
Submitted
Hello Everyone, please give me feedback and some suggestion to improve coding skills. thank you!
Shonuff• 280@TheShonuff
Posted
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 - Rishav Kumar Das• 60
@RishavDas0307
Submitted
It took some time to work with the api (around 3 to 4 days). Any feedback is appreciated.
Shonuff• 280@TheShonuff
Posted
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 - Mack• 210
@MNRSkills
Submitted
Shonuff• 280@TheShonuff
Posted
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 - Carlos Manuel Gonzalez• 30
@cmglezpdev
Submitted
Shonuff• 280@TheShonuff
Posted
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
