Skip to content
OverviewSolutions
23
Comments
8
P
Jaylou Rasonabe
@JlordS32

All comments

  • Jaylou Rasonabe•650
    @JlordS32Posted 12 months ago

    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
    1
  • Hibi4•240
    @Hibi4Submitted about 1 year ago

    I didn't get to make the height divide the button in the middle like what was on the design picture. **Any help is welcome. **

    For the rest, everything works correctly.

    Advice-generator-app using Fetch API in JS

    2
    Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

    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
    0
  • Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

    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
    1
  • mericcintosun•150
    @mericcintosunSubmitted about 1 year ago

    Hello Frontend Mentor community!

    In this project, I tackled Frontend Mentor's Responsive Web Design Challenge and I'd like to share my solution with you all. This project was a learning experience aimed at improving my HTML and CSS skills.

    Technologies and Tools Used:

    HTML5 CSS3 (Using Flexbox and Grid) Visual Studio Code Google Chrome Developer Tools

    Objectives: While working on this project, I aimed to achieve the following goals:

    Learn and apply the fundamental concepts of responsive web design. Gain a better understanding and usage of CSS Flexbox and Grid.

    Challenges and Learning Experience: I encountered some challenges during the project, particularly the intricacies of responsive design kept me engaged. However, overcoming these challenges significantly enhanced my skills, making me a better frontend developer.

    Thank you for taking the time to review my project. I welcome any feedback and suggestions. Your input is invaluable as I strive to further my learning journey.

    I'm also looking forward to seeing your projects on the Frontend Mentor platform. Let's continue learning and growing together!

    Thanks, [Meric Cintosun]

    Stats Preview Card Component - Meric Cintosun

    2
    Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

    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
    1
  • ABid Hasan•60
    @ABidhasan134Submitted about 1 year ago

    I have found many difficulties in this project like an array or for each loop working, selecting a number value in times and sending the value of this to a new js file. My thanking page is unsure. How could I improve my for each (array) logic?

    Ratting App

    1
    Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

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

    0
  • Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

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

    0
  • Jaylou Rasonabe•650
    @JlordS32Submitted about 1 year ago

    Can't seem to figure out the background bit. Tips and feedback are appreciated!

    Profile Card

    1
    Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

    Thanks to that random guy who did the same challenge. I figured out background without going through so much complexity like I did previously.

    0
  • Jaylou Rasonabe•650
    @JlordS32Posted about 1 year ago

    You're a legend for that background. I couldn't figure it out until I looked at yours.

    0