Building a RSS Reader – Part 3

This is the part 3 of How to Build a Working RSS Reader for your Website series. If you haven’t read the first part, you can go to this link.

At last we have arrived at building something that we could show. People always categorize your projects and work based on how it looks. So that’s what we will do today.

HTML

Now the HTML part is very simple. We will just create some hollow containers to hold our dynamic feed information. Let’s start with adding an Article tag to wrap around our entire UI.

rss_reader

 




<article id="reader">
    ...
</article>


The RSS Reader UI will mainly constitute of three parts –

  1. Left Sidebar to hold the RSS Groups
  2. Right Sidebar to show information related to focused RSS Group.
  3. Center part to show all the feeds related to focused RSS Group.

Let’s start with the left Sidebar


<!-- Sidebar to show feed groups -->

<nav id="sidebar">

    <div id="addFeed">
        <span></span>
    </div>

</nav>


Now the main container that will hold three things.

  1. Feeds
  2. Form for Feed Group input
  3. Loader to show when feed is loading

<!-- Feed Container -->

<article id="feedContainer">
    <!-- Feeds interior container to show all the feeds -->
    <div id="feeds"></div>

    <!-- Loader to show when feed is loading -->
    <div id="feedLoader">
        <div class="loader"></div>
        <span>Loading</span>
    </div>


    <!-- Form for adding Feed Groups -->
    <div id="feedInput">
        <form>
            <input type="text" pattern="[a-zA-Z0-9_-\s]+" title="Can only accept Alphanumeric Characters, -, _ and space." id="feedName" placeholder="CNN Top News" required="required"></input>
            <input type="url" id="feedURL" placeholder="http://cnn.com/feed/" required="required"></input>
            <input type="submit" id="feedInputSubmit" value="add"></input>
        </form>
        <span id="closeInputForm"></span>
    </div>

</article>


Finally The Right Sidebar to show information about a particular Feed Source.


<!-- Right Sidebar for specific Feed Group Information and deletion -->

<article id="feedInfo">
	<span id="feedImg">
		<img src="">
	</span>
	<span id="feedTitle"></span>
	<span id="feedSubTitle"></span>
	<span id="feedUpdateInterval">15 Minutes</span>

    <div id="settingToggle">
		<span class="toggleInfo">Auto Update</span>
		<span class="toggle on"></span>
	</div>

    <div id="deleteFeed"></div>

</article>


Let’s add a bit of flavor of delicious CSS.

CSS

Create a file name UI.css and put it in styles directory. This is the only CSS file I will be using for this project. Now the CSS file is fairly large. So I won’t be able to describe it in the post. I suggest you take a field trip down the styles.

You can access the file here.

JAVASCRIPT

Now we will need to build some javascript that would allow us to communicate with our RSS Reader using our UI. I will be doing it using jQuery just to make it easier.

You can access the file here.

Finally it’s time to put the pen down (hypothetically) and go on another adventure. Maybe I will see you on it.

Clone or download the project from here. I am exited to see what changes you make.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s