0

I want to create a simple HTML rating bar. My rating bar got has a dynamic number of containers. For example 5:

RatingBar

And I need to calculate the color values [first+2,last-1]. The first and last colors are given.

$(document).ready(function() {
  ratingElements = $(".ratingEle"); // Find all rating containers

  ratingColors.push(initialColorDefault); // if not selected, set the container to gray // index 0
  ratingColors.push(initialColorMin); // red color // index 1

  // !! Calculate the missing colors here !!
  // from index 2 to ratingColors.length - 1
  // ratingColors.push("#" + hexValue);

  updateRatingBar(0); // set all containers to gray

  $(ratingElements).each(function(index, element) { // add some event handlers to the containers
    var ele = $(element);
    var i = index + 1;

    ele.click(function() {
      setRating(i);
    });

    ele.hover(function() {
      updateRatingBar(i);
    });

  });

});

var ratingElements;
var ratingColors = [];

var initialColorDefault = "#cccccc"; // pre set colors
var initialColorMin = "#ff0000";
var initialColorMax = "#80ff00";

function setRating(currentValue) { // click handler
  $("#ratingOutput").html(currentValue + " / " + ratingElements.length);
  updateRatingBar(currentValue);
}

function updateRatingBar(currentValue) { // set colors
  $(ratingElements).each(function(index, element) {
    var i = index;

    if (i > currentValue) {
      i = 0;
    }

    $(element).css('background-color', ratingColors[i]);
  });
}
.ratingEle {
  float: left;
  cursor: pointer;
  height: 10px;
  width: 30px;
  margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rating">

  <div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
  </div>

  <div>
    <p id="ratingOutput"></p>
  </div>

</div>

So as you can see, I need to calculate the colors to make it work. I set a missing part in my JS file and need help, calculating it.

I don't know if I should go for hex or rgb values.

When hovering over the containers the colors should get updated automatically. When clicking a container, it should set a value.

But I already archieved this I just need to calculate the missing color range.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
peterHasemann
  • 1,550
  • 4
  • 24
  • 56
  • 1
    Create an array containing the 5 colour values and link them to the elements by index. Unless the start/end colours are dynamic you're very much over-engineering this – Rory McCrossan Dec 04 '17 at 10:23
  • well I need a dynamic way because I don't know if I have 5 or 7 or 13 containers :/ – peterHasemann Dec 04 '17 at 10:25
  • 1
    Ok, that would be helpful information to include in the question. I edited it for you. To calculate colour changes is relatively straightforward. Split the start/end colours to RGB values, then get the difference between start and end R/G/B values individually and divide by the number of steps -1. Then you can place them all back together – Rory McCrossan Dec 04 '17 at 10:27

1 Answers1

1

With this answer as base

$(function() {
  var color1 = 'ff0000';
  var color2 = '80ff00';
  var ratio = 1 / $('.ratingEle').length;
  
  var hex = function(x) {
      x = x.toString(16);
      return (x.length == 1) ? '0' + x : x;
  };
  $i=1;
  $('.ratingEle').each(function() {
    var r = Math.ceil(parseInt(color1.substring(0,2), 16) * (ratio*$i) + parseInt(color2.substring(0,2), 16) * (1-(ratio*$i)));
    var g = Math.ceil(parseInt(color1.substring(2,4), 16) * (ratio*$i) + parseInt(color2.substring(2,4), 16) * (1-(ratio*$i)));
    var b = Math.ceil(parseInt(color1.substring(4,6), 16) * (ratio*$i) + parseInt(color2.substring(4,6), 16) * (1-(ratio*$i)));

    var color = hex(r) + hex(g) + hex(b);
    $(this).css('background-color', '#'+color);
    $i++;
  });

});
.ratingEle {
  float: left;
  cursor: pointer;
  height: 10px;
  width: 30px;
  margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rating">

  <div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
  </div>

  <div>
    <p id="ratingOutput"></p>
  </div>

</div>

with more elements

$(function() {
  var color1 = 'ff0000';
  var color2 = '80ff00';
  var ratio = 1 / $('.ratingEle').length;
  
  var hex = function(x) {
      x = x.toString(16);
      return (x.length == 1) ? '0' + x : x;
  };
  $i=1;
  $('.ratingEle').each(function() {
    var r = Math.ceil(parseInt(color1.substring(0,2), 16) * (ratio*$i) + parseInt(color2.substring(0,2), 16) * (1-(ratio*$i)));
    var g = Math.ceil(parseInt(color1.substring(2,4), 16) * (ratio*$i) + parseInt(color2.substring(2,4), 16) * (1-(ratio*$i)));
    var b = Math.ceil(parseInt(color1.substring(4,6), 16) * (ratio*$i) + parseInt(color2.substring(4,6), 16) * (1-(ratio*$i)));

    var color = hex(r) + hex(g) + hex(b);
    $(this).css('background-color', '#'+color);
    $i++;
  });

});
.ratingEle {
  float: left;
  cursor: pointer;
  height: 10px;
  width: 30px;
  margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rating">

  <div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
    <div class="ratingEle"></div>
  </div>

  <div>
    <p id="ratingOutput"></p>
  </div>

</div>
Community
  • 1
  • 1
GreyRoofPigeon
  • 17,833
  • 4
  • 36
  • 59