Skip to content
Submitted about 2 years ago

Responsive landing page using SCSS and JavaScript

accessibility, bem, sass/scss
Oleksandra•40
@OlSerkes
A solution to the Age calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I would like to hear reviews of my JavaScript code, it's very important for me, maybe some recomendations how to do it better. Especially interest recommendation how to improve isValidDate function.

Code

Please log in to post a comment

Log in

Community feedback

  • itsKrish01•420
    @Itskrish01

    Hello there,

    Great work on completing the project using vanilla JavaScript! I discovered a bug that requires fixing. It occurs in the month input field. When you enter an invalid month, it shows an error in the day input field, even if the day is valid. To replicate the bug, fill in all the input fields and enter an invalid month in the month field. Additionally, another bug occurs when you enter "1" in the month field. It displays as invalid but still shows the correct age below as well. There might be a logic issue causing these problems. Please investigate and figure out why this is happening. I hope you find my feedback helpful.

    Thanks!

    Marked as helpful
  • _nehal💎•6,710
    @NehalSahu8055

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    ➨ Use Semantics for proper design of your code.

    <body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>

    or alternatively

    <body>
<div class="container" role="main">
/html code goes here: 📃
</div>
</body>

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
  • Abdul Khaliq 🚀•72,380
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    CSS 🎨:

    • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.
    • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states
    • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
    • For this demonstration we use css Grid to center the component.
    body {
min-height: 100vh;
display: grid;
place-items: center;
}
    • Now remove these styles, after removing you can able to see the changes
    @media (min-width: 768px)
.wrapper {
margin-top: 170px;
}

@media (min-width: 375px)
.wrapper {
margin: 50px;
}
    • Now your component has been properly centered

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord