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

Posted by David Perkins
David Perkins
9,607 Points

How can i write this Javascript append(); better?

I've been playing around with the Color Thief plugin and i've finally figured out how to get the whole script working but i know this is very, very, VERY messy... Can someone please explain to me, a better way of writing the below?

$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[0][0]+','+cp[0][1]+','+cp[0][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[1][0]+','+cp[1][1]+','+cp[1][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[2][0]+','+cp[2][1]+','+cp[2][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[3][0]+','+cp[3][1]+','+cp[3][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[4][0]+','+cp[4][1]+','+cp[4][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[5][0]+','+cp[5][1]+','+cp[5][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[6][0]+','+cp[6][1]+','+cp[6][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[7][0]+','+cp[7][1]+','+cp[7][2]+');"></div>');
$("#swatches").append('<div class="swatch" style="background-color:rgb('+cp[8][0]+','+cp[8][1]+','+cp[8][2]+');"></div>');

Thanks in advance :)

Dave

1 Answer

Jonathan Johnson
.a{fill-rule:evenodd;}techdegree
Jonathan Johnson
Full Stack JavaScript Techdegree Student 952 Points

If you look at the repetition, you'll notice the only thing that is changing is the array indexes of your cp variable.

You could likely use a loop as a first measure of cleanup.

$.each(cp, function(index, color) {
  $("#swatches").append('<div class="swatch" style="background-color:rgb('+color[0]+','+color[1]+','+color[2]+');"></div>');
});

Additionally, you might consider building the div with jQuery.

$.each(cp, function(index, color) {
  $("#swatches").append(
    $('<div/>', {
        class: "swatch",
        style: {
          backgroundColor: "rgb("+color[0]+","+color[1]+","+color[2]+")"
        }
    });
  );
});

:grin: This is untested, but it might give you some direction to refactor it a bit

David Perkins
David Perkins
9,607 Points

The loop works perfectly! Thanks for this.

I'm still in the very early stages of learning javascript but i can pretty much understand every part of the loop. I'm sure the jquery version works equally as well, but i'm not using jquery to create the palette of colours so i'll leave that for another day ;)

Thanks for the help though! Getting the colour palette working has been causing me all shades of headaches ha ha

David Perkins
David Perkins
9,607 Points

Sorry to revisit this again, but say if i've got the console logging 9 separate values. How would i get these to display sequentially in separate div's?

For example, if i had the below 3 column layout, each column has 3 div's inside it and i want display each console value in a different instance of .info.

In this case, i have 9 correct console logs and i need to display the value of color in each of the .info instances. I'm just getting confused how to transfer the console value into the .info div.

<div class="col-1">
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
</div>

<div class="col-3">
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
</div>

<div class="col-3">
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
<div class="project">
  <img src="#" class="targetImage" />
  <div class="info">
  </div>
</div>
</div>

        var colorThief = new ColorThief();
        $('.project').each(function() {
            $(this).find('.targetImage').each(function() {
                var color = colorThief.getColor(this);
                console.log(color);

            });

        });

I hope i've explained this ok? ha ha