button from template string

by Berat Emre NebioÄźlu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>
<script id="myTemplate" type="text/x-handlebars-template">
  <div class="buttonscounters">
    <div class="counters">
      <button class="counterClass redCounter">
        <div class="number"> 0 </div>
      </button>
      <button class="counterClass orangeCounter">
        <div class="number"> 0 </div>
      </button>
      <button class="counterClass grayCounter">
        <div class="number"> 0 </div>
      </button>
    </div>
    <div class="buttons">
      <button class="buttonClass">
        <div class="buttonText">
        </div>
      </button>
      </div>
    </div>
</script>

CSS

.counterClass {
  position: relative;
  width: 3%;
  margin-left: 10px;
  height: 0;
  padding: 10px;
  border-radius: 50%;
  border: none;
  outline: none;
}

.counterClass .number {
  position: absolute;
  margin-top: -7px;
  margin-left: -3px;
}

.redCounter {
  box-shadow: 0 0 1em rgba(204, 0, 0, 0.9);
  /*box-shadow: 0 0 1em red;*/
  background-color: #FF9999;
}

.redCounter:hover {
  background-color: transparent;
}

.orangeCounter {
  box-shadow: 0 0 1em rgba(204, 102, 0, 0.9);
  background-color: #FFCC99;
}

.orangeCounter:hover {
  background-color: transparent;
}

.grayCounter {
  box-shadow: 0 0 1em rgba(64, 64, 64, 0.9);
  background-color: #E0E0E0;
}

.grayCounter:hover {
  background-color: transparent;
}

.buttonClass {
  padding: 5px;
}

.buttonscounters {
 
  position: relative;
 /* height:175px;*/
 
  margin-top:20px;
  
}

.buttonscounters .counters {
  position: absolute;
  margin-left: -3px;
  margin-top: -18px;
  z-index: 2;
}

.buttonscounters .buttons {
 /* position: absolute;*/
  margin-top: 0;
}

.buttonscounters .buttons .buttonClass {
  
  font-size: 12px;
  border: none;
  outline: none;
  width: 100px;
  object-fit:fit;
}

.buttonscounters .buttons .buttonClass .buttonText {

  text-align: middle;
  /*white-space: nowrap;*/
  word-break:break-all;
/*  overflow: hidden;*/
 /* text-overflow: ellipsis;*/
}
.emptyDiv
{
   background-color:white;
 
   min-height:50px;  

}

JavaScript

var products = [{
  "project_name": "ECourse",
  "environment": "Prod",
  "frontend": "Monitor",
  "button_name": "Prod: Ecourse"
}, {
  "project_name": "NewsSite",
  "environment": "Prod",
  "frontend": "Monitor",
  "button_name": "Prod : NewsSite"
}, {
  "project_name": "Question",
  "environment": "Prod",
  "frontend": "Monitor",
  "button_name": "Prod : Question"
}, {
  "project_name": "SearchEngine",
  "environment": "Prod",
  "frontend": "Monitor",
  "button_name": "Prod : SearchEngine"
}, {
  "project_name": "University",
  "environment": "Prod",
  "frontend": "Monitor",
  "button_name": "Prod: University"
}];

$(function() {

  var usingTemplateforCreatingInstance = function() {
    var template = $($.parseHTML($('#myTemplate').html()));
			 /*var emptyDiv = $('<div>');
      emptyDiv.attr('class', 'emptyDiv');
      template.append(emptyDiv);*/
		
    $('body').append($.map(products, function(product) {
     
      var row = template.clone();
      row.find('.buttonText').text(product.button_name);
      return row[1];
    }));
  }
  usingTemplateforCreatingInstance();




});