Calculate height based on clicks or a number

Question

I'm working on something exactly like (Your reaction?) in Buzzfeed

I don't know how they making this chart height average percentage?

Hi you need to put your code so we can debug it and find a solution — elreeda, Jan 05 '16 at 12:15
This will give you some idea: https://jsfiddle.net/rayon_1990/1ukt79wn/ — Rayon, Jan 05 '16 at 12:31

score 0 · Accepted Answer · answered Jan 06 '16 at 12:27

I have done a solution: HTML:

var counts = $('.bar-container').find('.value').val();
var counter = counts;
var barHight = (90 * counts) / 122;

$(document).ready(function() {

    $('.the-bar').css('height', barHight + 'px');
    $('.mood-a').click(function() {
        counter++;
        $('.value').val(counter);

    });


});

          <div class="bar-container">
              <a class="mood-a">
                  <span class="the-bar"></span>
                  <span class="react-icon">
                   <span>Peace <img src="images/ico-react-peace-w.png"></span>
                  </span>
              </a>
              <p><input class="value" type="text" value="64" disabled="disabled"></p>
          </div>

90 is the max height and 122 is the number of clicks i set it reached 100% of the bar height and all numbers beyond that will be same. — Eiad Ashraf, Jan 06 '16 at 12:28

Calculate height based on clicks or a number

1 Answers1