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/

Extract latest posts of a Blog (Blogger) using JSOUP API

JSoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods Refer. Using JSoup DOM traversal you can extract data. Manipulation of HTML attributes and elements is very easy through JSoup  library.

In this post, extraction of latest posts through JSoup API will be discussed. 

• Select a blog URL. Here i have selected my own blog url to get my latest posts.

 String rashmiBlog="http://rashmi9425.blogspot.in/";  

• JdoupGet method has been written to extract posts, where i am passing value which is defined for "rashmiBlog". This method is returning a list of posts.

1:    public static List<String> JsoupGet(String rashmiBlog) {  
2:        Document doc = null;            
3:        List<String> list = new ArrayList();  

4:         try {  
5:           doc = Jsoup.connect(rashmiBlog).get();  
6:         } catch (IOException e) {  
7:             e.printStackTrace();  
8:             System.out.println("not able to connect");  
9:             return null;  
10:           }  

11:        //Extract useName  
12:        String userName =doc.getElementsByClass("post-footer").select ("span[itemprop]").first().text();  
13:        list.add(userName);  

14:        //select  "posts" class  
15:        Element posts = doc.getElementsByClass("posts").first();  
16:        ListIterator<Element> link = posts.getElementsByTag("a").listIterator(); 
 
17:        while (link.hasNext()) {  
18:            String href = link.next().getElementsByTag("a").first().attr("href");  
19:            list.add(href);  
20:        }  
21:       
         return list;  
22:   }  

1. In line 5, connecting to blog url and parse it to a DOM. 


2. In line 11, Extracting Username or author of blog.

 <div class="post-footer">   
       <div class="post-footer-line post-footer-line-1">  
            <span class="post-author vcard"> Posted by <span class="fn" itemprop="author" itemscope itemtype="http://schema.org/Person">   
              <meta content="https://plus.google.com/113911429732794531347" itemprop="url"> 
                <a class="g-profile" href="https://plus.google.com/113911429732794531347" rel="author" title="author profile"> 
                  <span itemprop="name">Rashmi Verma</span> </a> </span> </span>   
       </div>   
 </div>  

(1)
This is code snippet of generated document. To get author select class "post-footer" then select tag span which has a attribute 'itemprop'. There are other span tag with itemprop attribute also present so we are selecting first span tag and extracting "text" from it.


3. In line 14, 

    <ul class="posts">   
       <li><a href="http://rashmi9425.blogspot.in/2015/04/programmatically-execution-of-create.html">Programmatically execution of CREATE operation in ...</a>  
       </li>   
       <li>  
         .   
         .  
       </li>  
         .  
         .  
     </ul>  
   

   (2)
   Select element from class 'posts', create a list iterator of latest posts. as you can see in code (2) document snippet, post url is present inside tag '<a>' . In Jsoup its very easy to get a element  using "getElementbyTag"


4. In line 18, Extract the value of  'href' attribute, in code (2) value of attribute is 'http://rashmi9425.blogspot.in/2015/04/programmatically-execution-of-create.html'
   In this scenario only one latest post available.


• Here is the code to print list, first value inside list is author name and after that all latest posts.
  

       List<String> url = JsoupGet(rashmiBlog);  
       int i = 0;  
       System.out.println("Author:::" + url.get(i)+"\n");  
       i++;  
       System.out.println("Latest Posts");  
       while (url.size() != i) {  
         System.out.println(url.get(i)+"\n");  
         i++;  
       }  
  

• Output on console.
  

   Author:::Rashmi Verma  
  
   Latest Posts  
   http://rashmi9425.blogspot.in/2015/04/programmatically-execution-of-create.html  
  

Limitation: This code is only specific to Blogger URL. other blogs may have different code line.