Carousel Rss Feed Reader

carousel-rss-feed-reader.markdown

Carousel Rss Feed Reader

Simple rss feed reader to display the 5 latest posts in a carousel and the others on a list

A Pen by JFarrow on CodePen.

License.

index.html

<div class="wrapper">
	<div class="slider">
		<span class="left-arrow">
			<i class="material-icons">keyboard_arrow_left</i>
		</span>
			<span class="right-arrow">
			<i class="material-icons">keyboard_arrow_right</i>
		</span>
		<ul class="carousel">
		</ul>
	</div>
	<div class="feed">
		<h3>Latest USA Surveying Jobs</h3>
		<ul class="list">
		</ul>
	</div>
</div>

script.js

var slideCount;
var slideWidth;
var slideHeight;
var sliderUlWidth;

$(function() {
	getRssFeed("https://jobs.landsurveyorsunited.org/feed/5891", mapFeed);
	
	$('.left-arrow').on('click', function () {
		moveLeft();
	});

	$('.right-arrow').on('click', function () {
		moveRight();
	});
	
	$(window).on('resize', function () {
		returnCarouselList();
	});
});

function moveLeft() {
	$('.carousel').animate({
		left: + slideWidth
	}, 200, function () {
		$('.carousel li:last-child').prependTo('.carousel');
		$('.carousel').css('left', '');
	});
}

function moveRight() {
	$('.carousel').animate({
		left: - slideWidth
	}, 200, function () {
		$('.carousel li:first-child').appendTo('.carousel');
		$('.carousel').css('left', '');
	});
}

function getRssFeed(url, callback) {
	return feednami.loadGoogleFormat(encodeURI(url), callback);
}

function mapFeed(result) {
	if (result.error) {
      console.log(result.error)
  } else {
		createCarouselList(result.feed.entries.slice(0, 5));
		createFeedList(result.feed.entries.slice(0, 20));
  }
}

function createCarouselList(elements) {
	var list = [];
	$(elements).each(function(index, element) {
		list.push("<li><h3><a href='"+ element.link +"'>"+ element.title +"</a></h3><p>"+ new Date(element.publishedDate).toLocaleDateString("pt-BR") +"</p><span class='carousel-footer'>"+ (index + 1) +" out of 5</span></li>");
	});
	
	$(".carousel").append(list);
	
}

function createFeedList(elements) {
	var list = [];
	$(elements).each(function(index, element) {
		list.push("<li><a href='"+ element.link +"'>"+ element.title +"</a></li>");
	});
	$(".list").append(list);
	returnCarouselList();
}

function returnCarouselList() {
	slideCount = $('.carousel li').length;
	slideWidth = $('.carousel li').width();
	slideHeight = $('.carousel li').height();
	sliderUlWidth = slideCount * slideWidth;
	$('.slider').css({ width: slideWidth, height: slideHeight });
	$('.carousel').css({ width: sliderUlWidth, marginLeft: - slideWidth });
	$('.carousel li:last-child').prependTo('.carousel');
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://storage.googleapis.com/feednami-static/js/feednami-client-v1.0.1.js"></script>

style.scss

$primary-color: #cc0000;
$secondary-color: #ffffff;

$breakpoint-tiny: "only screen and (max-width: 319px)";
$breakpoint-small: "only screen and (min-width: 320px) and (max-width: 479px)";
$breakpoint-medium: "only screen and (min-width: 480px) and (max-width: 679px)";
$breakpoint-large: "only screen and (min-width: 680px) and (max-width: 779px)";
$breakpoint-extra-large: "only screen and (min-width: 780px)";

@mixin tiny-screens() {
  @media #{$breakpoint-tiny} {
    @content;
  }
}

@mixin small-screens() {
  @media #{$breakpoint-small} {
    @content;
  }
}

@mixin medium-screens() {
  @media #{$breakpoint-medium} {
    @content;
  }
}

@mixin large-screens() {
  @media #{$breakpoint-large} {
    @content;
  }
}

@mixin extra-large-screens() {
  @media #{$breakpoint-extra-large} {
    @content;
  }
}



.description {
	margin-top: 50px;
}

span.left-arrow, span.right-arrow {
	color: $secondary-color;
	cursor: pointer; 
	display: block;
	font-size: 1em;
	height: auto;
	padding: 1em;
	position: absolute;
	top: 80%;
	transition: all 0.3s ease;
	width: auto;
	z-index: 999;
	
	&:hover {
		background-color: #212121!important;
		color:#ffffff;
	}
}

.left-arrow {
	right: 60px;
}

.right-arrow {
	right: 0;
}

.slider {
	color: $secondary-color;
	overflow: hidden;
	position: relative;
	
	.carousel {
		height: 200px;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		
		.carousel-footer {
			color: #e40743;
			bottom: -80px;
			position: relative;
		}
		
		li {
			background-color: $primary-color;
			display: block;
			float: left;
			height: 300px;
			margin: 0;
			padding: 70px 0;
			position: relative;
			text-align: center;
			
			h3, a, p {
				color: $secondary-color;
			}
			
			@include extra-large-screens {
				width: 700px;
			}

			@include large-screens {
				width: 600px;
			}

			@include medium-screens {
				width: 400px;
			}

			@include small-screens {
				width: 300px;
			}

			@include tiny-screens {
				width: 200px;
			}
		}
	}
}

.feed {
	background-color: $secondary-color;
	margin: auto;
	
	ul {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	
	h3 {
		color: #424242;
		padding: 0 0.8em;
	}
	
	li {
		align-items: center;
		display: flex;
		justify-content: flex-start;
		list-style: none;
		transition: background-color 0.3s ease;
		width: 100%;
		
		a {color:#cc0000;
			margin: 0;
			padding: 1em;
		}
		
		&:hover {
			background-color: #212121!important;
		  
		}
	}
	a:hover {color:#fff!important;}
	@include extra-large-screens {
		width: 700px;
	}
	
	@include large-screens {
		width: 600px;
	}
	
	@include medium-screens {
		width: 400px;
	}
	
	@include small-screens {
		width: 300px;
	}
	
	@include tiny-screens {
		width: 200px;
	}
}

.wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: auto;
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />