Wikipedia viewer

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

This awesome code was written by zdflower, you can see more from this user in the personal repository.
You can find the original code on
Copyright zdflower ©
  • HTML
  • CSS
  • JavaScript
<div class="container"> 

	<header class="page-header">
		<h1> <i class="fa fa-wikipedia-w well-sm fondo-verde"></i> Wikipedia viewer</h1>

	<div class="jumbotron text-center">
		<p><a href="" class="btn btn-link btn-lg" role="button">Cliquea aquí para ver un artículo al azar</a></p>
		<div class="row">
			<div class="col-sm-2 col-xs-2"></div>
			<div class="col-sm-8 col-xs-8" id="buscador">
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<div class="input-group">
							<input type="text" class="form-control" id="buscadorInput" placeholder="Escribe lo que quieres buscar">
							<div class="input-group-btn">
								<a id="lupa" href="#" class="btn btn-link btn-lg" role="button"><i class="fa fa-search"></i></a>
			<div class="col-sm-2 col-xs-2"></div>
		<p class="text-success">Cliquea la lupa para buscar</p>

	<div class="well" id="resultados"></div>


/*Downloaded from */
    	.fondo-verde {
		background-color: LightGreen;

/*Downloaded from */
    $('#lupa').on('click', function buscar(){
	var aBuscar = $('#buscadorInput').val();
	console.log("Quiere buscar: " + aBuscar);
	var cantidadDeResultados = 10;
	$.getJSON("" + aBuscar + "&origin=*", function(data){
		//mostrar los resultados
		$('#resultados').html("<h2> Resultados obtenidos: </h2>");
		for (var i = 0; i < cantidadDeResultados; i++){
			var titulo =[i].title; //tengo que partirlo por los espacios y unir el resultado con _
			$('#resultados').append("<h3><a href='" + titulo.split(" ").join("_") + "'>" + titulo + "</a></h3>");
			$('#resultados').append("<p class='lead'>"+[i].snippet + " ... </p>");	
		$('#resultados').css("background-color", "#2E2D88");
		$('#resultados').css("color", "white");