@ShvayneSubmitted 12 months ago
I am yet to get it perfectly. Suggestions are very much appreciated. Thank you
Ruan Figuereido
@huanfsAll comments
- @huanfsPosted 12 months ago
i've looked at your code, i realized that you divide the code in much, much pieces unnescessary. first, to build this layout using flex-box, keep in mind, the body is already an element, that being the case, it's an element with other elements inside him. divide the code only if necessary pieces, like boxes inside other boxes, visualy, the body is one box, you can resize then using "width:100vw; height:100vh" and set it to "display:grid", now use "place-items:center" and all other pieces inside body will be in the center. after that, create another "box" using and "div","section" or "article" tag, set it to a "display:flex" and, inside him you can finally build other two boxes, and set then to "width:50%" and they will have half width of parent element created before
1 - @coding-stockSubmitted 12 months ago
Can't believe i actually did it , anyway can some one tell me how to make the background dark when someone clicks on the hamburger... when the tab menu opens (in mobile view)
@huanfsPosted 12 months agoto solve this problem you can do like me, i've created and variable called "wid", she's contain the width of the screen, i've used "let wid = window.availWidth", and then, in javascript i've switched the layout of menu (in mobile and desktop), according the value of wid, using an if/else conditional, is more easy controls some pieces of layout using javascript, like the menu and they background color, so you can do this think: build the desktop layout and, using javascript you can hide the menu items and create others with a different layout (for mobile) in javascript. if you have any trouble, check my solution or reply
1 - @emmeceeSubmitted 12 months ago
This was a struggle because Im not good at Grid and I feel for this it would've been best. Also how were you guys able to make the first number ( 72 / 100) to be bold without having to create extra classes if possible?
@huanfsPosted 12 months agoin smaller components like this, you can use flexbox to build the layout, its more easy
Marked as helpful0 - @AymaneOnlineSubmitted 12 months ago
The most difficult part on this project was the Javascript code, but it was good to learn. There is one problem (I think) on my screen when I press submit without filling any of the inputs some elements go outside of the screen and cannot be visible. If you got any solution for that, or any other things that you found not correct in my code I would like to give me some feedback. 👍
@huanfsPosted 12 months agoto solve the problem, you can turn ".error-text" in a positioned element, using "position:relative" and fixing it in a fixed position under the form, and finaly turns it invisible in two ways, or using "display:none" and making it a "display:inline", or making it invisible using "opacity:0" and turning it visible using "opacity:1". in that way, the error message will exists invisible fixed in a position declared and the layout not change while they apears
Marked as helpful0 - @kayswatSubmitted 12 months ago
I would really appreciate your contribution on how to perfect my design in the future by giving me an honest review on this project
@huanfsPosted 12 months agotry to change the color of label elements to grey, reading the readme-style-guide you can see, the size of elements "--years, ---days, --months" is 35px. try to increase the border-radius to 10px or more. you don't need a ".container" element if you have a ".hero" to house the contents. the input type can be text type too, and in the javascript you turn the value to number using something like "Number(input.value)". and finaly, instead use static values like "px" , try to use "%" or "rem/em" to make all elements responsible, Thus eliminating the need to use media queries
0 - @nermeennasimSubmitted over 1 year ago
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
@huanfsPosted over 1 year agoIn 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 helpful1
