Skip to content
OverviewSolutions
5
Comments
17
Giovanni Ruberto
@Rabberpoli

All comments

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi, Well done for doing this challenge! The final result is great!

    Back at your questions:

    • Using em or rem would be better than using just px. That's because px will be the same size for every screen resolution; this could be a problem in term of accessibility and responsiveness. So: yes, best practice suggests em or rem. You can read more here
    • Talking about commenting code: I usually comment code that it would be hard to understand if I read it after long long time. I would avoid to comment every single line and usually is best practice to write code that explains itself without the need of commenting every line.

    Hoping to be helpful, keep going and happy coding!

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congratulations for completing this challenge! I think there was some error uploading your solution on github. That's because your project doesn't show your graphic solution. Maybe you're pointing to the wrong file or it is not where you're pointing to!

    That said, keep going and happy coding!

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congratulations for completing this challenge! I think there was some error uploading your solution on github. That's because your project still has the same template frontend mentor provided when you enrolled in this challenge. Maybe you developed on another branch but you're pointing on master branch.

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Well done completing this challenge! As you said, you used only margin and padding properties. This lets you achieve a pretty good result but it doesn’t guarantee a responsive behavior. A powerful property that can ease your job in term of responsiveness is flexbox (you can give a look at the documentation here). This property along with justify-content and align-items let you center automatically your DOM object without struggling with margins and paddings.

    Hope to be helpful, keep going and happy coding!

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congrats on completing your challenge! Graphically speaking it’s pretty good, you did a great job! The corresponding GitHub code is not available at the moment, so I cannot give you further informations.

    That said, keep going and happy coding!

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congrats on completing this challenge! You did a really good job! Back to your question, it is possible to render your results dinamically using JS. I try to explain one of the multiple solutions you can develop:

    const scores = [ ]; // here you can put your score objects

scores.foreach(score => {
   const categoryId = score.category + ‘-score’; // Here I’m creating the Id of the HTML element I have to modify

   const categoryHtmlElement = document.getElementById(categoryId);
   categoryHtmlElement.innerText = score.score;
});

    This should give the desired output.

    Let me know if it can be useful! Keep going and happy coding!

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Well done completing this challenge! Just a simple tip: looking at your code I saw you using margin and padding properties. This lets you achieve a pretty good result but it doesn’t guarantee a responsive behavior. In fact you had to use media queries to adjust for specific screen size; A powerful property that can ease your job in term of responsiveness is flexbox (you can give a look at the documentation here). This property along with justify-content and align-items let you center automatically your DOM object without struggling with margins and paddings.

    Hoping to give helpful tips keep going and happy coding!

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congratulations for completing your challenge! Just one thing:

    • height and width properties are fine on desktop resolution; but shrinking the window size I see that there is a resolution gap before mobile layout kicks in. In that gap components gets a little bit messy. In order to avoid this you can use media queries (more details here). Using media queries you can adjust card's width in order to contain everything until mobile responsiveness comes up. As another alternative, if you are using flexbox you can play with flex property (you can check flex documentation and flexbox in general).

    Hope you will find it useful! Keep going and happy coding!

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Well done doing this challenge! Looking at your code I see you have 5 html elements: one for each rating. If you'd like to change background color on hovering you should do the following:

    • Take the CSS class that defines background color of your rating components
    • Write this on your css: .<classname>:hover { background-color: <color>; }

    :hover property gets fired on CSS class when mouse passes over the targeted block.

    Hope you can find it useful! Keep going and happy coding!

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congratulations on completing this challenge! Talking about your questions:

    • The solution you provided is fine, not the best efficient I guess, because of the several ALT+TABs. But it's still fine to get similar result
    • Another solution could be: you get your index.html on a chrome page and, at the same time, on another chrome page you can have the desired output screenshot. Once you have these 2 web pages you can split your screen in half: on the left the first web page and on the right the second one. Alhough this is not the best practice either, it prevents you from clicking several times combination of your keyboard. The best one would be having the figma prototype, which is not available on free plan.

    By the way, I would suggest that the purpose of these challengese, here on frontend mentor, is not to get mad at getting the exact result pixel-by-pixel. Instead, the most important thing is to get max quality out of your project, no matter if they smaller/bigger/wider than the original; providing best quality code will be better than focusing on pixels

    After all, you did a great job on this challenge! Just keep going and happy coding!

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Congratulation for completing this challenge! Just some tips that might be helpful:

    • I see that the upper part of "calculator card" gets cut on browser window even if page is scrollable; in order to avoid this you could set min-height: 100vh;. This lets you to see the entire card without being cut.
    • Regarding dates calculation, if you don't want to use plain JS logic you can use MomentJS library (you can find more details here). It provides you a lot of methods like isValid() (giving a formatted date it returns a boolean which gives you the information about its correctness) or diff(), combined with duration(), that can be used to subtract 2 dates and get the results subdivided in days/months/years (you can give a look at my github code; I solved it using the methods I mentioned you before).

    Hope these suggestion will be helpful and, again, keep going! Happy coding!

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Well done doing your first challenge! 😎 You’ve done a great job! Looking at your question I would say that you can’t import your json data directly into your HTML file; HTML is just a markup language, you can’t put logic in. In order to achieve your goal you have to write a JS file in which you import your JSON. After that you can create an array of object containing your scores; for each element you can create an HTML element (always JS speaking) with desired HTML/css attributes (“foreach” method in JS lets you iterate over array elements) and append every HTML element to its parent “div”. Once your JS file is done you have to import it in your HTML file. I hope to have given you some helpful tip. That said, keep going and happy coding 😎

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! I like your component! Well done 🎉 I’ll try to answer your questions trying to be helpful:

    • I solved this challenge in about 3/4 hours; this is un unhelpful statistic because it really depends on your skills and practice on doing front end components; so don’t be scared! If it takes you more than expected it’s normal, most important is to get knowledge that you didn’t have before
    • usually I start doing HTML along css. Once there is a sort of “skeleton” of what the final result will be I start developing JS code.
    • Here goes the same answer at first question: it really depends on what your knowledge is: the more you practice the less you need to search things
    • When I’m stuck on something I try to debug if it’s possible (if I’m stuck on JS code); otherwise I try to convert the problem in smaller ones (classic “divide et impera” approach). If not works then I’ll try to check on Google and understand what I’m doing wrong
    • I think that a project is “good enough” when you have a clean code and a neat html/css styles organization. Secondly the project has to be just as good as I imagined before implementing (in term of ux/ui and graphics).
    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Great job submitting your solution 😎 I try to answer your questions:

    • In order to fit your component on multiple size you could use “flex” properties combined with media queries (these will help you set the right font-size)
    • To calculate the current age I just used a JS library called “momentJS”. It provides a lot of APIs to format dates and make operations with dates. Anyway there are a lot of libraries that can get your work easier!
    • The animation of counting number was made it entirely with JavaScript code; is fairly simple but it doesn’t provide a lot of customization such as speed of the animation
    • Here momentJS can help you by passing the date to “isValid” method; this will return a Boolean giving you the information about the correctness of input date

    I hope these tips can be useful! Keep going and happy coding 👋🏻

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Great job doing this challenge! 🎉🎉 Just a few tips to improve graphically:

    • set same width and height for the circle surrounding your score; doing this you will achieve a full circle
    • instead of having 2 separate cards (score and summary) you could have a parent div that contains the 2 sections: score at left and summary at right (you can achieve this using “display: flex” and setting each section width at 50%). The left card gets background color as it is now, you just have to set border radius appropriately. Doing this it will get easier to set “box shadow” property because you can apply it directly at the parent div (you can have a look at my GitHub code just to understand better what I am saying).

    That said, congrats for having submitted your solution! Well done and keep going; happy coding! 😎

    Marked as helpful
  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! 👋🏻 I gave a look at your GitHub code; looks really nice! Congrats on your first challenge 🎉

    Just one thing: Your “preview site” button redirects to a white landing page (You’re using Vercel as hosting service). This issue is given because Vercel is pointing to your “index.HTML” file (which is the one created by front end mentor) and not to your .jsx file where all your components are declared. You should set this configuration on your Vercel dashboard.

    By the way, keep going with your challenges, you’re doing a great job! Happy coding! 😎

  • Giovanni Ruberto•260
    @Rabberpoli

    Hi! Well done, you did a great job 😎

    Below some advice just in case you would like to improve your code

    • HTML :

    Best practice is to use <main> tag to wrap all the main content of the page instead of the <div> . This can help you improving the accessibility of the page. The tag header ‘<h1>’ should be present even if you are not displaying it. You can create it and let it be hidden visually and, at the same time, readable by screen readers.

    • Alt text:

    The purpose of ‘alt’ text is to provide useful information about the meaning of the image. In this case the QR code will redirect the user to the frontendmentor.io site, so you could improve your attribute explaining what it does.

    I hope these information could be useful as they were (and actually still are) to me! ☺️

    Don’t stop creating great solution and seek for continuous improvement 😎

    Happy coding!