Dynamic Star Rating Generation using Java Script and CSS

Here i am sending GET request to REST service for fetching result. Extracting 'image' and 'rating' keys from result.

• Rating is string value  for example in output it's like: "rating":"3.2"
• To display this value as a star, using width variable

                    var width = ((actual rating/5)*100)

        

         setting width in style attribute through DOM.


Html :

 <div id="main">  
 </div>  

Java Script :

 var theUrl = "https://hackerearth.0x10.info/api/problems?type=json&query=list_problems";  
 var xmlHttp = new XMLHttpRequest();  
 xmlHttp.open("GET", theUrl, false);  
 xmlHttp.send("NULL");  
 var result = JSON.parse(xmlHttp.response);  
 for (var i = 0;i < result.problems.length;i++) {  
   var container = document.createElement("div");  
   container.className = "container";  
   var obj = result.problems[i];  
   var right = document.createElement("div");  
   right.className = "right";  
   var empty = 0;  
   for (var key in obj) {  
     if (key == "image") {  
       var x = document.createElement("IMG");  
       x.className = "image";  
       x.setAttribute("src", obj[key]);  
       x.setAttribute("width", "130");  
       x.setAttribute("height", "130");  
       var left = document.createElement('div');  
       left.className = "left";  
       left.appendChild(x);  
       container.appendChild(left);  
     }  
     else if (key == "rating") {  
       var starRatingsCss = document.createElement('div');  
       starRatingsCss.className = "star-ratings-css";  
       var width = (obj[key] / 5) * 100;  
       var starRatingsCssTop = document.createElement('div');  
       starRatingsCssTop.className = "star-ratings-css-top";  
       starRatingsCssTop.setAttribute("style", "width:" + width + "%");  
       starRatingsCssTop.innerHTML = "<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>";  
       starRatingsCss.appendChild(starRatingsCssTop);  
       var starRatingsCssBottom = document.createElement('div');  
       starRatingsCssBottom.className = "star-ratings-css-bottom";  
       starRatingsCssBottom.innerHTML = "<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>";  
       starRatingsCss.appendChild(starRatingsCssBottom);  
       var content = document.createElement('div');  
       content.className = "content";  
       content.innerHTML = "<span><b>" + key.toUpperCase() + "</b></span>";  
       content.appendChild(starRatingsCss);  
       right.appendChild(content);  
     }  
     if (obj[key] === null) {  
       empty = 1;  
       break;  
     }  
   }  
   if (empty == 0) {  
     container.appendChild(right);  
     document.getElementById('main').appendChild(container);  
   }  
 }  

CSS:

 .container {  
  width: 40%;  
  float: left;  
  border-radius: 25px;  
  border: 2px solid #73AD21;  
  margin: 10px 10px 10px 10px;  
  background: #d9f2d9;  
  overflow:hidden;  
 }  
 .left {  
  width: 150px;  
  height: 150px;  
  padding: 10px 10px 10px 10px;  
  float: left;  
 }  
 .right {  
  margin-left: 150px;  
   height: 160px;  
  padding: 10px 5px 2px 11px;  
  overflow: hidden;  
 }  
 #main {  
  border: 1px solid yellow;  
  width: 100%;  
 }  
 .star-ratings-css {  
  unicode-bidi: bidi-override;  
  color: #c5c5c5;  
  font-size: 25px;  
  height: 25px;  
  width: 100px;  
  position: relative;  
  margin-bottom: 5px;  
  margin-top: -5px;  
 }  
 .star-ratings-css-top {  
  color: #e7711b;  
  padding: 0;  
  text-shadow: 0px 1px 0 #ab5414;  
  position: absolute;  
  z-index: 1;  
  overflow: hidden;  
 }  
 .star-ratings-css-bottom {  
  z-index: 0;  
 }  

Output:

Note: 

Fiddle Link:
https://jsfiddle.net/rashmi9425/579z9p48/