Raned items based on checked items

by Saksham Malhotra

HTML

<div class="rankedContainer">
        <div class="options">
            <h2>Get platform suggestion</h2>
            <div class="subHeading">Choose your requirements below and get the suggested platform at the right</div>
            <div class="option">
                <input type="checkbox" id="cbOption1">
                <div class="custCBContainer"><label class="lbCB" for="cbOption1"></label></div><label for="cbOption1" class="cbOption">Collaborate with people outside the firm</label>
            </div>
            <div class="option">
                <input type="checkbox" id="cbOption2">
                <div class="custCBContainer"><label class="lbCB" for="cbOption2"></label></div><label for="cbOption2" class="cbOption">Share not just documents but have a workflow around it.</label>
            </div>
            <div class="option">
                <input type="checkbox" id="cbOption3">
                <div class="custCBContainer"><label class="lbCB" for="cbOption3"></label></div><label for="cbOption3" class="cbOption">Access your documents on the go</label>
            </div>
            <div class="option">
                <input type="checkbox" id="cbOption4">
                <div class="custCBContainer"><label class="lbCB" for="cbOption4"></label></div><label for="cbOption4" class="cbOption">Have personalised groups to exchange instant messages</label>
            </div>
            <div class="option">
                <input type="checkbox" id="cbOption5">
                <div class="custCBContainer"><label class="lbCB" for="cbOption5"></label></div><label for="cbOption5" class="cbOption">Collaborate with people outside the firm</label>
            </div>
            <div class="option">
                <input type="checkbox" id="cbOption6">
                <div class="custCBContainer"><label class="lbCB" for="cbOption6"></label></div><label for="cbOption6" class="cbOption">Share not just documents but have a workflow around it.</label>
           ...

CSS

.rankedContainer {
  margin: 0 auto;
  width: 65%;
  min-width: 500px;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #F9F9F9;
  padding: 20px;
  border: 1px solid #DDD;
  border-radius: 5px;
}

.rankedContainer h2 {
  padding-left: 20px;
}

.rankedContainer .subHeading {
  padding: 0px 0px 20px 20px;
}

.rankedContainer .options {
  flex: 2;
}

.rankedContainer .options .option {
  padding: 10px;
  display: flex;
  align-items: center;
}

.rankedContainer .options .option input {
  display: none;
}

.rankedContainer .options .option label.cbOption {
  cursor: pointer;
  line-height: 17px;
  padding: 0px 10px;
}

.rankedContainer .custCBContainer {
  display: inline-block;
  height: 17px;
  width: 17px;
  border: 1px solid #AAA;
  border-radius: 2px;
  margin: 5px 10px;
}

.rankedContainer label.lbCB {
  margin: 3px;
  width: 11px;
  height: 11px;
  display: inline-block;
  border-radius: 2px;
}

.rankedContainer input[type="checkbox"]:checked+.custCBContainer label.lbCB {
  background-color: #AAA;
}

.rankedContainer .items {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.rankedContainer .items .item {
  flex: 1;
  color: #FFF;
  display: flex;
  align-items: center;
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: right 50px center;
  margin: 5px;
  position: relative;
  transition: background-color 0.5s ease-out;
}

/*.rankedContainer .items .item:nth-child(0) {
            flex: 10;
        }

        .rankedContainer .items .item:nth-child(1) {
            flex: 9;
        }

        .rankedContainer .items .item:nth-child(2) {
            flex: 8;
        }

        .rankedContainer .items .item:nth-child(3) {
            flex: 7;
        }

        .rankedContainer .items .item:nth-child(4) {
            flex: 6;
        }*/

.rankedContainer .items .item:before {
  position: absolute;
  content: '';
  top: 10px;
  left: 10px;
  font-size: 40px;
  color: #DDD;
}

.rankedContainer...

JavaScript

$(function() {
  var optionsMapping = {
    'cbOption1': ['dox', 'onedrive', 'sharefile'],
    'cbOption2': ['onedrive', 'teams'],
    'cbOption3': ['onenote', 'sharefile', 'teams'],
    'cbOption4': ['dox', 'onenote', 'sharefile', 'teams'],
    'cbOption5': ['dox'],
    'cbOption6': ['teams'],
    'cbOption7': ['dox', 'onenote', 'sharefile', 'teams'],
    'cbOption8': ['dox', 'onedrive', 'onenote', 'sharefile', 'teams'],
    'cbOption9': ['dox', 'onenote', 'sharefile', 'teams'],
    'cbOption10': ['dox'],
  };
  var platformsMapping = {
    'dox': 0,
    'onedrive': 0,
    'onenote': 0,
    'sharefile': 0,
    'teams': 0
  }
  var totalSelected = 0;
  $('.rankedContainer input[type="checkbox"]').on('change', function() {
    if ($(this).is(':checked')) {
      totalSelected++;
      for (platform in optionsMapping[$(this).attr('id')]) {
        platformsMapping[optionsMapping[$(this).attr('id')][platform]] += 1;
      }
    } else {
      totalSelected--;
      for (platform in optionsMapping[$(this).attr('id')]) {
        platformsMapping[optionsMapping[$(this).attr('id')][platform]] -= 1;
      }
    }
    for (platformMapping in platformsMapping) {
      var percentBar = totalSelected == 0 ? 0 : parseInt(platformsMapping[platformMapping] / totalSelected * 100);
      $('.rankedContainer .item.' + platformMapping + ' .percentage').text(percentBar + '%');
      $('.rankedContainer .item.' + platformMapping + ' .bar').css('width', percentBar + '%');
      if (percentBar == 0)
        $('.rankedContainer .item.' + platformMapping).addClass('disabled');
      else
        $('.rankedContainer .item.' + platformMapping).removeClass('disabled');
    }
  });
});