Skip to content
OverviewSolutions
27
Comments
19
Eren
@erenymo

All comments

  • Eren•720
    @erenymo

    Hi There👋

    Congratulations to finish the project, it looks pretty good!🎉

    BUT❗

    Like most coders that I reviewed their solutions, you missed an important detail while doing this project. The leap year algorithm has critical role while calculating the age correctly.Basically, we care the leap year whether February will be 28 or 29 days in this project. Please check this website to have an idea how to calculate the leap year and please integrate it into your code.

    Except this little but critical bug, you did a great job! Have fun and keep coding !🔥🚀

    Marked as helpful
  • Eren•720
    @erenymo

    Hi There👋

    Congratulations for giving a chance to the project and trying your best.! 🔥

    Here are some my suggestions :

    • You must consider about Error Handling. If there is some issue or something else, the user must be informed and guided. In this example, you can show an error message. For example, the month input can't be higher than 12. If user tries to input higher value than 12, than you can show 'invalid input' text message next to the input box.
    • Also there is a logical error in calculating the age. As you know, February has maximum 29 days. You can take a look at this website to have an idea how to integrate leap year algorithm into your code to calculate the exact age.
    • Finally, If you are a beginner, do not care much about writing PERFECT code. The most important thing that you should be focused is to make sure the code works correctly. Than you will be able to write clean code day by day ^^.

    Except those, you did a great job 💪! Have fun and keep coding🔥🚀

  • Eren•720
    @erenymo

    Hi There 👋

    Congratulations, good done !💪

    Here is a little bug on your JS Logic :

    • As you know, the day of February can be less or equal to 29 (leap year). To overcome this logical error, you can visit this website to have an idea about leap year algorithm.

    Except this little bug, you did a great job! Have fun and keep coding 🚀🔥

    Marked as helpful
  • Eren•720
    @erenymo

    Hi Patricia👋

    To solve your problem, please look at event delegation concept.

    Marked as helpful
  • Eren•720
    @erenymo

    Hi There👋

    Congratulations on your first step towards Frontend Mentor projects 🥳! By these projects, you will become more confident and practice your coding skills.💪🏻

    In order to clear your confuses:

    • You will be familiar to choose right colors from the styling guide. Do not hesitate to make mistakes, just try it. If it doesn't fit, than change it, no big deal.🙂
    • If you are beginner, do not focus on writing clean code. The most important point is to focus on the concept of the language at the beginning level. When you become more confident by building projects like this, than you can consider how to write clean code.
    • You can check this video to learn about how to add custom font on webpage with html and css.

    Great job dude, have fun and keep coding 🚀

  • Eren•720
    @erenymo

    Hi 👋

    Congrats to finish your first challenge on Frontend Mentor!

    At the beginning of your roadmap, do not care how to write clean code while you just learning the fundamentals of the language.Give your attention to understanding the concepts. You should take care when you have confidence and hands-on experiences.

    • Do not forget to fill the alt attribute of img tag. For example : <img src="./images/image-qr-code.png" alt="QR Code image"> This will increase the accesibility and SEO of your website.

    Therefore, your code is also looks nice👏. Have fun and keep coding 🚀

    Marked as helpful
  • Eren•720
    @erenymo

    Hi Patricia👋

    First of all, welcome to the Frontend Mentor and congratulations to finish your first challenge🥳🎉! By these projects, you will practice your web development skills so much and gain hands-on experiences. 💪

    To answer your question:

    • No, it is not necessary to put the image and text into the divs everytime. Actually, it depends on the situation. If you . Sometimes divs can help you to style your components easily while working with flexbox or grid. If you know what you're doing, this won't cause much confusion for you. You will be confident when you build more projects.

    • What is more, please do some search about css units. At the beginning, there is no problem to use px unit while writing css to cover the fundamentals of the css BUT it will cause some responsive problems in the future.

    You did a great job, have fun and keep coding🔥🚀

    Marked as helpful
  • Eren•720
    @erenymo

    Hi there👋

    Overall, the solution looks good and fits on design but there is some lack of javascript :).

    • One of aims of this project is practice your basic Javascript and DOM Manipulations. So, Mark all as read button should toggle the visual state of the unread notifications and set the number of unread messages to zero.

    Before starting your project, reading Brief section of the project may give you more opportunities and get most out of the Frontend Mentor projects. These projects are valuable chance to practice and gain hands-on experiences.

    Have fun and keep coding 🔥🚀

    Marked as helpful
  • Eren•720
    @erenymo

    Hi there 👋

    Firstly, congratulations to give a chance to finish this project.

    It is impossible not to make mistakes, we faces problems everytime and this is natural. Important point is think about how to solve issues during the coding process.

    To solve and avoid making same mistakes again, here are some suggestions by me :

    • Sometimes declaring manuel values (height: 1440px) to the containers or something else can cause problems in responsive web design. Please search on youtube how to improve your responsive skills. I suggest you to follow Kevin Powell on youtube. He has tons of videos like how to use the correct units for responsive design.
    • While building the website, you can check easily how your website will look at any device. To check that, open chrome developer tools and use the toggle device toolbar a lot. This will make your coding process easier.
    • Finally, please review other coders' solutions to the related project. This will provide you a different perspective.

    I hope it will helpful for you.

    Have fun and keep coding 🚀🚀

    Marked as helpful
  • Eren•720
    @erenymo

    Hi there👋

    First of all, welcome to the Frontend Mentor Community !🔥

    You will face many problems and bugs while building your projects and this will force you to solve problems and fix bugs. This is the most powerful way of how to learn coding along !

    Lets start with some suggestions :

    • First of all, you should know how to center a div exactly. You can check the video to how to center div in different ways : Click here !
    • Secondly, the websites you create MUST also be compatible with mobile devices. You have to learn what is responsive design and improve it as much as you can.

    You are at the beginning of the road and there is so much things to learn. Never give up and keep coding 🚀🚀🚀

  • Eren•720
    @erenymo

    Hi coder 👋

    Congratulations to finish another Frontend Mentor Project!

    The design looks very nice.

    Rather than design, I found some bugs in your JS Logic to calculate the age.

    • As you know, the february can not be 30 days, its value can be maximum 29 ( if it is leap year) or less.
    • Except the leap year, you may have some calculation errors. I tried October 20, 2023 and expected the result should be 2 days, but it showed me 6 days. You may need to revise your calculation algorithm.

    To reach out more information about leap year algorithm, you can click here!

    Have fun and keep coding 🚀🚀😎😎

  • Eren•720
    @erenymo

    Hi there 👋

    This is a very well solution, it really fits on design and hover effects are pleasing to the eyes. 😎

    I really liked the project but here is a little bug on the logic.

    • When I enter negative values in the Number of People section, the calculation shouldn't continue. Same issue happens in Bill section.

    You can handle this little bug too.

    In a nutshell, very well-done project, keep coding 🚀🚀

    Marked as helpful
  • Eren•720
    @erenymo

    Hi Khawar, great job !

    • To fix the first problem, just add these to the header class.

    header { position: absolute; width: 100%; ... }

    -To solve the second problem, I would do the same thing as well the mockup img. Create an img tag in hero__right div. And basically, name it id as mockup__bg and add these properties to that id in css.

    #mockup__bg { position: absolute; right: -283px; top: -120px; width: 960px; }

    I hope it will help you and fix your problems. Keep coding ! :)🤗

    Marked as helpful
  • Eren•720
    @erenymo

    Well Done ! A beautiful website 👏

    • Firstly let's talk about style of box class. Avoid from giving exact values like height: 75vh. Instead of it, you can use max-heigh: 75vh (in this project, it is not necessary to give any heigh declaration on container.). Same goes for width property. Use max-width or min-width instead of declaring exact width.

    • To make the container locate in the center of page, declare a min-height : 100vh to body tag and also add flex, justify items center, align items center. This will make container located exactly in the center of page.

    • A small bug in calculating part, when I enter an invalid input, it is still calculating the age (i.e: day: 45 month: 2 year: 2004).

    In Conclusion, You did a great job ! Keep Coding ^^ :).

  • Eren•720
    @erenymo

    Hi, Well done!

    To improve your responsive design skills, some basic tips are :

    1- Use rem instead of using px.

    2- Try not to give exact values as much as you can. For example, you can use max-width property instead of using width in some cases.

    3- To fix this project's mobile design, change the flex-direction to column, and also make some adjustments in text sizes.

    I hope it is helpful for you, keep coding ^^ :)

    Marked as helpful
  • Eren•720
    @erenymo

    Hi, you had a great job !👋

    I found some bugs on your website, here are some ;

    1- It is still calculating when I enter invalid values. Make it doesn't calculate when you enter invalid values.

    2- Because of leap year, Check if the month is February. The program shouldn't work when month is equal to 2(February) and day is greater or equal then 30. And also the program should realize it is a leap year if year % 4 == 0, month is equal to 2 and day is equal to 29.

    *I hope this is helpful for you, Keep coding dude ! 💻 *

  • Eren•720
    @erenymo

    Hi,

    1- I'm using 27" monitor and unfortunatelly your website does not fit on the screen. Maybe you should make adjustments for widescreen.

    2- Using style tag in HTML element is not best practice. I highly recommend to create a css file and using all script tag in css, not in index.html

    3- Try to fix other reports that provided by the AI.

    Nice Solution, Keep Coding dude 👏 !

  • Eren•720
    @erenymo

    Hi,

    It seems that the <img> element is not working clearly, maybe you should use

    'src="/images/image-product-desktop.jpg"'

    and then use @media tag to apply the screen to the mobile or desktop device.

    Other than this, this is a really clear solution, Congratulations 👏🎉!

    Nice Solution, Keep Coding !