jQuery Plugin Workshop Box Color

index.html

<h2>Colors</h2>
<ul>
  <li>1</li>
  <li>2</li>
  <li data-color="blue">3</li>
  <li>4</li>
  <li>5</li>
</ul>

script.js

// Clear the console
console.clear();

(function ($) {
  $.fn.boxColor = function () {    
    return this.each(function () {
      $(this).css("background", $(this).data("color") || "red");
    });
  };
  
  $.expr[":"].boxcolor = function (element) {
    return $(element).data("color");
  };
})(jQuery);

$("li").boxColor();

$("li:boxcolor").css("border", "5px solid blue");

style.scss

@import "compass";
body { padding: 10px; }

ul {
  list-style: none;
  margin: 0;
  
  li {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 50px;
  }
}