Skip to content
Submitted over 1 year ago

Responsive Age Calculator using HTML,CSS,JQUERY

Nermeen Nasim•20
@nermeennasim
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 find it difficult to make responive UI I am stil unsure of responsive ness of t his design and if there is any edge case i havent handled in Calculation of age. Yes I have questions about best practices, i would like to learn more about best practices , what other frameworks i could use in this challenge

Community feedback

  • Ruan Figuereido•500
    @huanfsPosted over 1 year ago

    In de code above i show you my easiest solution to turn layouts responsive, first i recommend you to separate your code in small pieces like this:

    <div id="container"> <--! Here comes all pieces of your code--!> <div id="top"><--!1st piece--!></div>

    <"middle"><<--!2nd piece--!>/div>

    <div id="bottom"><--!3th piece--!></div> </div> Now, use "display:flex" property of CSS to turn this small pieces responsive. This is one method to turn layouts responsive. You can use "Bootstrap" framework to turn you code mobile-first layout for all screen size responsiveness. I recommend bootstrap because its easiest!
    Marked as helpful
    1
  • Nermeen Nasim•20
    @nermeennasimPosted over 1 year ago

    Ao I thought the challenge had to be done using html, css and jQuery mainly, yes we have bootstrap and Tailwind css etc. So I can improve solutiontwo improving UI and responsivrness.

    Thanks for reviewing my code

    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