I know most of you have knowledge about this , but i want to share my blog may it will help you more regarding this in very easiest way and more user friendly.
In my blog , i will do the task in 3 steps basically.
In first step,** i will go through the requirement and create a basic html for our requirement**.
In second step, i will show you and describe you most about the java script for our objective.
In third step ,** i will show the output and the complete code for this**.
So let me start with first step:
Step 1:will go through the requirement and create a basic html for our requirement
Get News Feed by URL and Number of Feed to Fetch on Button Click Event
To complete our requirement objective we need basically three files
so our folder structure looks like :
Folder name (jsFeed) - index.html Folder name (js) - main.js Folder name (css) - style.css Folder name (images) - loading.gif
Let’s First create a basic html for this, as per our requirement we need 2 text boxes which represents respectively “Feed URL” , which takes input of rss feed url and the second text box html element will take “Number of Feed to Fetch”.
Once , we create both of the text box element , i will create an event handler element by name button html element , which will perform the action when both of the inputs are available , by checking validation for both of the fields when click on button.
So my first step to create an html for our requirement is as shown below :
I create an onclick event on button click and call
So, i am writing the result oriented html below , which will included in above html , in div element by class name
Did you get all the points and requirement defiend in Step-1, if you are ok will this , than i will now move to step-2 , where i will write the js code for the above.
Step-2: will show you and describe you most about the java script for our objective.
In step-2 , we will discuss how i will perform validation before getting rss feed and how i will get rss feed , if validation are successfully completed on button click event and calling
getFeed method as defined in html in step-1.
main.js file by name
and checking the value of
feedURL and fetchFeed text box’s values if these are filled
rssReader.init function by passing the
id of the div element in which we have to show the desired result or feeds.
Our getFeed function looks like:
in rssReader we define 2 function , first one is init which is called when we complete validation step , and in this step we create a script tag element in which we pass the google api service to get rss feed url , which holds the information about
- “number of feed to fetch”,
- “feedurl from where we have to fetch url” ,
- “call back function when this api will got result from the sending url” ,
- “the element where we have to show the required result”.
after initialization we parse the required output to out
post_result1 div element and create dynamic ul , li listing with the required information like the
- Title of the news
- Description about the news
- Link to the news
and append it, after append we hide the loading feed image which was loaded earlier on button click until we didn’t get the result, as we got the result, we will hide this element.
Now , i would like to move to step-3 , where i will show you the complete code for this with output.
step-3 : will show the output and the complete code for this.
So , all of this i have done here to complete the requirement, i hope you all got very well my blog, if you got any question regarding this, you can send me comments on this or if you like my post you can also share me your valuable feedback.
Please check the complete source code by clicking the below button or to download.