FCC-Wikipedia Viewer

In this example below you will see how to do a FCC-Wikipedia Viewer with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by peter88850, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright peter88850 ©
  • HTML
  • CSS
  • JavaScript
    #viewer
	#search_box
		.search_description CLICK ICON TO SEARCH WIKI
		.search_bar
			.search_icon
			input#search_input.searched
			#cancel_box
	.random_article
		a(href="https://en.wikipedia.org/wiki/Special:Random" target="_blank").random_description CLICK HERE FOR A RANDOM ARTICLE
		i.fa.fa-hand-o-left
	ul#article_list
		li
			a.article.article_1(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_2(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_3(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_4(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_5(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_6(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_7(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_8(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_9(href="#" target="_blank")
				h4.title 
				p.description
		li
			a.article.article_10(href="#" target="_blank")
				h4.title 
				p.description

/*Downloaded from https://www.codeseek.co/peter88850/fcc-wikipedia-viewer-ZLXPwx */
    $color_black: #2A363B
$color_white: #F2F2F2
$color_grey: #CDCDCD
$color_red: #E84A5F
$color_orange: #FF847B
$color_yellow: #FECEA8

* 
	// border: solid 1px
	transition: 0.5s

html,body
	margin: 0
	width: 100%
	background: $color_black
		
#viewer
	max-width: 1000px
	margin: 0 auto
	margin-top: 300px
	text-align: center
	font-family: 'Abel', sans-serif
	font-weight: bold
	color: $color_white
	#search_box
		.search_description
			font-size: 24px
			margin-bottom: 15px
		.search_bar
			width: 20px
			height: 20px
			border: solid 3px $color_red
			border-radius: 100px
			margin: 0 auto
			position: relative
			cursor: pointer
			.search_icon
				position: absolute
				top: 22px
				left: 14px
				transform: rotate(45deg)
				width: 10px	
				border: solid 2px $color_red
				border-radius: 100px
			#search_input
				vertical-align: middle
				border: none
				background: transparent
				cursor: pointer
			.searched
				width: 90%
				padding-bottom: 3px
				color: $color_white
				&:focus
					outline: none	
			#cancel_box
				display: none
				position: absolute
				top: -5px
				right: -2px
				width: 30px
				height: 30px
				cursor: pointer
				// border: solid 2px $color_red
				&:before
					content: ""
					display: block
					width: 10px
					border: solid 1px $color_red
					border-radius: 100px
					position: absolute
					top: 50%
					left: 50%
					transform: translate(-50%,-50%) rotate(-45deg)
					
				&:after
					content: ""
					display: block
					width: 10px
					border-radius: 100px
					border: solid 1px $color_red
					position: absolute
					top: 50%
					left: 50%
					transform: translate(-50%,-50%) rotate(45deg)
			

	#article_list
		margin: 30px auto 50px auto
		padding: 0
		width: 90%
		display: none
		li
			margin-top: 15px
			list-style: none
			background: $color_white
			&:hover
				border-left: solid 8px $color_red
				box-shadow: 0 0 10px $color_red
			.article
				display: block
				width: 100%
				height: 100%
				text-decoration: none
				color: $color_black
				text-align: left
				.title,.description
					margin: 0
				.title
					padding: 15px 20px 5px 20px
					font-size: 24px
				.description
					padding: 5px 20px 15px 20px
					font-size: 14px

	.random_article
		margin-top: 20px
		.random_description
			margin-right: 8px
			cursor: pointer
			color: $color_white
			text-decoration: none
				
	


/*Downloaded from https://www.codeseek.co/peter88850/fcc-wikipedia-viewer-ZLXPwx */
    //click event
$(".search_bar").on("click",function(){
	$(this).css("width","200px");
	$(this).css("cursor","text");
	$(".search_description").text("PRESS ENTER TO SEARCH WIKI");
	$(".search_icon").css("border","0px");
	$(".search_input").css("cursor","text");
	$(".search_input").addClass("searched");
});

$("#cancel_box").on("click",function(){
	$("#viewer").css("margin-top","300px");
	$(".search_bar").css("width","20px");
	$("#search_input").val("");
	$(".random_article").css("display","block");
	$("#article_list").css("display","none");
	
})


//wiki API
var url = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch={{search_value}}&callback=?";


//enter event
$("#search_input").keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

$("#search_input").bind("enterKey",function(e){
   //do stuff here
	$("#viewer").css("margin-top","30px")
	$("#cancel_box").css("display","block");
	$(".random_article").css("display","none");
	$("#article_list").css("display","block");
	
	var input_value = $(this).val();
	var new_url = url.replace("{{search_value}}",input_value)

	$.getJSON(new_url,function(data){
		var result = data.query.pages
		for(var i=0;i<10;i++){
			var article = result[Object.keys(result)[i]];
			var article_title = article.title;
			var article_extract = article.extract;
			var article_pageid = article.pageid;
			var article_url = "https://en.wikipedia.org/?curid="+article_pageid;
			
			$(".article_"+(i+1))
				.attr("href",article_url)
				.find("h4").text(article_title);

			$(".article_"+(i+1))
				.find("p").text(article_extract)
		}
	})
	
	$("#search_input").val("");

});







Comments