Skip to content
OverviewSolutions
26
Comments
8

Jaylou Rasonabe

@JlordS32720 points

Imma start grinding the Pro challenges next, these free challenges are getting too repetitive.

Latest solutions

View more solutions

Latest comments

  • Jaylou Rasonabe•720
    @JlordS32

    Hi Subhadip,

    Congrats on finishing this challenge. This must have given you enough challenge to learn a lot of things and I hope you continue in doing so. To answer your question about the problem. Due to me not being to directly see the code (please add the github repo source code).

    I can see that you might have some javascript going that toggles container to none when rating is submitted, however because you set it to block when Rate Again is clicked, it puts the container at the top left of the page.

    What you can do in this scenario is to adjust the javascript to adjust from none to flex, instead of none to block. I hope that helps.

    Marked as helpful
  • Jaylou Rasonabe•720
    @JlordS32

    Congrats on completing this challenge Hibi4. A couple of suggestions that I can maybe add to your solution:

    You can try adding padding: 0 30px for your div_advice just so it looks a little nicer and also add 'box-shadow: 0px 0px 30px -3px #52FFA8;' for the class .dice_icon_logo to give that green shadow effect as the design suggested and make sure that it only happens on hover.

    I have also noticed that the quote never loads on page reload, you can maybe try invoking the function you've created generateAdvice() at the bottom of your main.js, make sure to wrap it in DOMContentLoaded listener so it only calls the function on page reload. It should look something like this:

    document.addEventListener('DOMContentLoaded', () => {
   generateAdvice()
})

    Overall, you're doing pretty great! You're off in a good start my friend. Happy coding!

    Marked as helpful
  • Jaylou Rasonabe•720
    @JlordS32

    Your project looks absolutely awesome. Congrats for finishing this challenge, I hope you enjoyed your time while doing this.

    There is no problem in using column-start/column-end or row-start/row-end. This all comes down to preference, grid-template-areas is just a shorthand for writing column/row-start/end for shorter code, if you feel more comfortable and maybe you find it easier to read column/row-start/end, then go for it.

    Overall, your code looks all good to me, I can suggest to maybe remove margin: 6rem auto auto for your testimonial.container, just so the container is centered. Nicely done!

    Marked as helpful
  • Jaylou Rasonabe•720
    @JlordS32

    Here's some suggestions to make it a little better:

    • Try looking up before and after pseudo classes to give the image that purple filter effect.
    • Alternatively, you can add a sibling element for the img and set position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: COLOROFYOURCHOICE
    Marked as helpful
  • Jaylou Rasonabe•720
    @JlordS32

    You should try looking up localStorage. It may solve your problem.

  • Jaylou Rasonabe•720
    @JlordS32

    you may need to work a little with the image, maybe some issue with linking it

View more comments