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

JavaScript JavaScript Loops, Arrays and Objects Simplify Repetitive Tasks with Loops The Refactor Challenge Solution

Posted by Matthew Toomb
Matthew Toomb
3,246 Points

What do you Think?

Turns the multi-colored circles into multi-colored squares when you hover -

https://w.trhou.se/c9sfb9qhqm

I was playing around with transitions because of a project I'm working on and wanted to try a small tweak to this challenge - it took me a few tries, but I got it to work in the end. Going off of the last lesson, I'm wondering how bad my code is, and if there's a simpler way to do it. :)

Thanks for everything!

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Nice! Here's what I would do to make it better. First of all, you have many css styles that are not being used inside your CSS. I would remove all those so that it doesn't slow down load time, not that it would since it is a small project but it doesn't hurt to get used to writing clean code. After that these are the styles I would keep and the changes I would make.

@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');

/*General*/
body {
  max-width: 980px;
  margin: 50px auto;
  padding: 0 20px;
}

#color div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
  /*THIS TRANSITION IS A CATCH ALL FOR ANY CHANGES*/
  transition: all 0.2s;
}

#color div:hover {
  border-radius: 0;
  box-shadow: 0px 8px 6px -4px rgba(0, 0, 0, 0.3);  
}

JsFiddle Demo

Matthew Toomb
Matthew Toomb
3,246 Points
Matthew Toomb
Matthew Toomb
3,246 Points

Awesome feedback! I think that extra code was left over from the lecture's workspace... I thought perhaps it was meant to build on in a later video so I left it.

I am so determined to get this down! I'm still struggling with the CSS and exactly how to label and arrange, but I'm figuring it out. I just can't help but play with the code every time its sitting in front of me like that... Especially when there is a wealth of knowledge just a tab away. :) Ok, back to work.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Well you're certainly on the right path and you'll only get better with pratice. Keep up the good work.