Skip to content
OverviewSolutions
10
Comments
11

Michael Godfrey

@michagodfreyAustralia340 points

I want to practice CSS and JavaScript

Latest solutions

View more solutions

Latest comments

  • Michael Godfrey•340
    @michagodfrey

    Hi Asfer,

    Great work on the challenge! It looks good and works well despite the difficulties you mentioned.

    It sounds like you were having problems with rendering the data, I had a look at your code and I think you could try ternary operators to render the data. For example.

    <p> <b>Capital: </b> {capital ? capital : null} </p>

    Without that condition, my React app would crash whenever the component was fed an object without a capital field.

    Hope that helps :)

    Marked as helpful
  • Michael Godfrey•340
    @michagodfrey

    Oh and well done keeping the accessibility issues to just one. I see that one is about no <h1> element. But there is no clear place to put a <h1>, is there. A cool trick to get rid of that is:

    h1 { font-size: 0px; }

    This style will make it invisible to users, but screen readers will still see it and you won't get the pesky issue on your frontend mentor challenges.

    Hope that's helpful. Good luck on your future challenges!

    Marked as helpful
  • Michael Godfrey•340
    @michagodfrey

    Hi Anderson,

    A solid effort here. Well done. Imo, yours actually looks better than than the design due to the shadows and slightly larger text makes it more readable.

    Feedback: The desktop design is good, but it's not mobile responsive. I don't think your css is verbose, but I can see why this challenge would be tricky to do with flexbox. A simpler way might be to use flexbox for the mobile display and grid and grid-template-columns at desktop size with media-queries.

    Below is a link to my solution, it's definitely not the best example of this challenge, but it shows what I mean:

    https://www.frontendmentor.io/solutions/testimonials-grid-T_Nxd_c5z

    Marked as helpful
  • Michael Godfrey•340
    @michagodfrey

    It's looking good Florencio!

    As for feedback, on my firefox browser, the button does not generate a new advice. But when I checked on Opera, it is working fine.

    This could be an issue on my end though, I'm using linux ubuntu. There's a lot I don't know, and it seems strange that fetch would not work with firefox, - the problem my end. Maybe give it a go on firefox on your device?

  • Michael Godfrey•340
    @michagodfrey

    Hi Md Azharuddin, this is looking great. The bouncy feature and dark mode are working perfectly I think. A great way to enhance this project.

    As for using pseudo elements for the background, the feedback I got for this challenge was that is the best way to go. The background is the hardest part of this challenge (without doing extras) and not really newbie territory imo.

    As for the dark mode on image, I don't know how darkmode could be applied to an image, you'd need a separate image I think, or directly edit the fill property of the svg.

    Marked as helpful
  • Michael Godfrey•340
    @michagodfrey

    Hi Cesar, this calculator is looking very close to the design nice work!

    One tip that I hope is helpful, I managed to eliminate the arrow buttons on the inputs with this code:

    /* remove default input styles Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* remove default input styles Firefox */ input[type=number] { -moz-appearance: textfield; }

    On my firefox those buttons appear by default, and when I checked on opera, they appear when the input is active.

View more comments