Skip to content
Submitted over 1 year ago

Age Calculator Using HTML, CSS, and JS [responsive]

jessicadong101•20
@jessicadong101
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Age calculator app
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I found the CSS to be difficult. I'm unsure about my layout and if it matches the solution as well as the responsiveness to different screen sizes. I'm unsure about HTML, CSS, and JS best practices.

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Also

    • It would be good practice if you use Google font linking within <head> instead of importing it css file, it impact a lot in speed loading site.
    • Every page needs only one <h1> tag. Replace all your <h3> with <h1>.
    Marked as helpful
    1
  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    HTML

    • Use <form></form> and embed <input> tags inside it.
    • In this project instead of type="text" use

    <input type="month"> <input type="number">

    because i am able to type alphabets which is weird because dob is always in digits.

    • Use <input type="submit"> or <button type="submit"> to retreive data from user.

    • Use Semantics for the proper design of your code.

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

    CSS

    • Replace height with min-height in body for proper centering of your age card.
    • You can use cursor:pointer for button for more user friendly.

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    1
  • John Mirage•1,590
    @john-miragePosted over 1 year ago

    Hello,

    HTML

    • It should be better to use a form for your inputs and button so you can submit.
    • your inputs should have a label indicating what the user should input (<label></label>) and the labels should be linked to the inputs with an id.

    CSS

    • check the BEM css methodology to organise css selectors, it can help you organize css files
    • if you use flex to have two elements in a row, you need to setup the elements inside (flex: 1 or flex: 0) so flex knows what he should do (shrink or/and grow). your button is not round because of that.

    Javascript

    • best practice is to use const or let but not var anymore because of the scope
    Marked as helpful
    0
  • jessicadong101•20
    @jessicadong101Posted over 1 year ago

    I would appreciate any feedback!

    0

Please log in to post a comment

Log in with GitHub

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