Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Age Calculator using HTML,CSS,JQUERY

@nermeennasim

Desktop design screenshot for the Age calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@huanfs

Posted

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

@nermeennasim

Posted

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
Discord logo

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