Silver Challenge: Color Coding by Flavor Shot

Frontend Web Development: The Big Nerd Ranch Guide Chapter 11: From Data to DOM
1

I added the lines below in the Row() function in checklist.js, just before calling $div.append($label);:

var backgroundColor = "";
switch (coffeeOrder.flavor) {
  case 'caramel': backgroundColor = '#F5F5DC'; break;
  case 'almond': backgroundColor = '#DEB887'; break;
  case 'mocha': backgroundColor = '#D2691E'; break;
}
if (backgroundColor) {
  $label.css('background', backgroundColor);
}

The colors came from https://www.w3schools.com/cssref/css_colors.asp; they are labeled as “Beige”, “BurlyWood”, and “Chocolate”, respectively.

1 Like
2

Awesome Solution @adamba
Here’s mine:

I added the following code to the Row function in checklist.js.
This is before assigning $div to this.$element.

var clr = {
caramel: ‘#cc812c’,
almond: ‘#462e2e’,
mocha: ‘#1b0808’
};
$div.css({‘background-color’: clr[coffeeOrder.flavor], ‘color’ : ‘white’});