Google-News-App

Google-News-App is made using Python Flask, HTML5, CSS3 and JavaScript

Project link

Description: Google-News-App shows top news and allows to search for news.

Page 1:

Page 2:

Python Flask code to create GET API to fetch the Top CNN News:

@app.route('/getTopHeadlinesCNN')
def getTopHeadlinesCNN():
    top_response = newsapi.get_top_headlines(sources='cnn',language='en')
     
    top4_headlines={}
    top4_headlines["TopHeadlines"]=[]
    count=0
    for ele in top_response["articles"]:
        if ele["description"] !=None and ele["description"] !="null":
            if ele["title"]!=None and ele["title"]!="null" and ele["url"]!=None and ele["url"]!="null" and ele["urlToImage"]!=None and ele["urlToImage"]!="null" and ele["source"]["id"]!=None and ele["source"]["id"]!="null" and ele["source"]["name"]!=None and ele["source"]["name"]!="null":
                count+=1
                top4_headlines["TopHeadlines"].append(ele)
                if count==4:
                    break
    return top4_headlines

JavaScript Ajax code to Asynchronously call the Rest API:

function getTopCNNHeadlines(){
		 var req = new XMLHttpRequest();
		  req.open("GET", "https://pythonapp-286309.wn.r.appspot.com/getTopHeadlinesCNN", true);
      req.onreadystatechange = addTopHeadlinesCNN; // the CALLBACk
      req.send(null);
      var doc="";
      function addTopHeadlinesCNN() {
            if (req.readyState == 4) {
              if (req.status == 200) {
               doc =  JSON.parse(req.responseText); 
			         createCNNHeadlines(doc["TopHeadlines"]);
              }
            }
         }
		};

The JSON response:

Notable Features:

• News Carousal:
  The carousal shows the top 5 news headlines in a sliding format. On clicking on an article, it redirects to the full news article.

• Word Cloud:
  Created using D3 library, shows the top 30 frequent words from the title of news articles with the word’s frequency of occurence directly proportional to the word’s size.
  

• News Cards:
  Each card shows the image, title and description. Clicking on the individual news card item, redirects to the news article.

• Page Toggle:
  Switching between the two pages is handled by the toggle box, which highlights the current selected page and changes color when hovered over.
  

• Search Box:
  Search Box allows to search for news using the keywords, from date, to date and the category of the news. There are 8 categories to choose from. On select of a category, the user gets an option to select the source of the news.
  

• Search Cards with onClick Expand:
  The search card, highlights when hovered over and expands when clicked. The box contains the link to the orginal post. The expanded box can be contracted back to its original form by a cross sign on the top right.
  

Link to github repo for the entire code. The project is hosted at Google App Engine at Google Cloud Platform.

Additional Materials:

1. Google News API: Documentation
2. D3 library for word cloud: Site
3. Google Cloud Platform Google App Engine