I have completed the Calculator project (actually I just realized it doesn’t like decimals…working on that). You can find my project here. I based the overall layout on the example solution.
I found the button placement to be a little tricky and would like to discuss the best way to position the buttons. This was my approach:
-
Wrap all the buttons in a div and set its width to 300px
-
Make the buttons 60px by 60px and leave 20px between them. I accomplished this by adding classes to the middle two columns and then setting the font size of the div to 0 (if this is not done there is extra whitespace).
-
For the equals button, set its height to be 140px (60 + 20 + 60) and add vertical-align: top to its css.
-
For the 0 button, set its width to 140px.
-
Wrap the bottom two rows in a div and set its height equal to 160px
-
wrap the 0 and . button in a span and give it the following css:
position: relative;
top: -80px;
This produces the desired layout, but I’m not overly fond of this approach, particularly steps 5 and 6. How would you accomplish a similar layout?
One thing I would suggest is this:
Your container div is already specified by px, so your elements inside can be defined as a percent. If you want to scale later on with a media query, then you need to only change the css for the larger box, and then those percentages inside will scale automatically.
I think I see why you are uncomfortable with your solution for 5/6, but I’m not sure. Simply moving the buttons down with “top: -80px” seems artificial? One solution could be to have your right column be one div and the rest of the buttons be a separate div. That way the extra tall equals button wouldn’t have to be accounted for, and the inline buttons (specifically the longer 0 button) would still wrap naturally.
Have you worked with display: flex much? I’m just starting to use it myself, so I can’t give much advice, but it might be able to handle this in a more natural fashion. The link is to css tricks, which seems to be a fairly straightforward guide.
One thing I would suggest is this:
Your container div is already specified by px, so your elements inside can be defined as a percent. If you want to scale later on with a media query, then you need to only change the css for the larger box, and then those percentages inside will scale automatically.
Good suggestion. The layout of the calculator is simple enough that I don’t have any media queries but I will bear that in mind for future projects.
I think I see why you are uncomfortable with your solution for 5/6, but I’m not sure. Simply moving the buttons down with “top: -80px” seems artificial?
More or less. It’s not terrible, but I’m not 100% satisfied with my solution (if I was I wouldn’t have made this post in the first place 
).
One solution could be to have your right column be one div and the rest of the buttons be a separate div. That way the extra tall equals button wouldn’t have to be accounted for, and the inline buttons (specifically the longer 0 button) would still wrap naturally.
That would work. I don’t think I’ll change my code, but that’s a nice workaround.
Have you worked with display: flex much? I’m just starting to use it myself, so I can’t give much advice, but it might be able to handle this in a more natural fashion. The link is to css tricks, which seems to be a fairly straightforward guide.
Only a little bit. I had a feeling Flexbox would come up in discussion though.