Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Krystel Hagan
Krystel Hagan
4,731 Points

CSS style questions for my calculator

I have an image that was made, and I'm trying to get my code as close as possible to the image. It seems like some of the things I won't be able to actually do, but I'd like to get as close as possible to it! <br> Here is the image I'm comparing to: http://imgur.com/NF6UjN4 <br> Here is the CodePen: http://codepen.io/anon/pen/iBlau Any tips are appreciated!

1 Answer

Ian Svoboda
Ian Svoboda
16,639 Points
Ian Svoboda
Ian Svoboda
16,639 Points

I know that I kind of defeated the point but I thought i'd just whip up a little something for you to go back and look at:

http://codepen.io/Akthalian/pen/fzieL

That appears to match more towards the picture. Here are a few personal suggestions:

  • Don't apply box-model styles to TR tags. They don't really accept those anyways. The best option is to go for the TD's instead
  • Don't wrap inputs in <label> elements. This is not semantic and unnecessary
  • Try to remember DRY (Don't repeat yourself) principles when coding. It makes it alot easier when you have classes to apply consistent styling.
  • If you HAVE to use tables, be careful with the way you lay them out. If you have to do alot of "spot fixing" with your CSS, you're probably using the wrong HTML tags in the TD's.

Let me know if you have any questions about this pen and i'll be sure to help you out.

Krystel Hagan
Krystel Hagan
4,731 Points

That's exactly what I needed Ian! It looks great, and thanks for the extra pointers. Now the only problem I'm having is that the JavaScript doesn't seem to give me a result when I try to run a calculation in the calculator :/ The page loads just fine and everything, but the results box is blank after inputting any number and clicking on the calculate button

Ian Svoboda
Ian Svoboda
16,639 Points

Sorry about that. The issue was because the original ID you had was totalResult, I had changed it to totalresult. I updated this to reflect the change and all is working.

Krystel Hagan
Krystel Hagan
4,731 Points

Yup, that did the trick! Thanks so much, Ian!