Wikipedia viewer

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

Thumbnail
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 Codepen.io
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>
	</header>

	<div class="jumbotron text-center">
		<p><a href="https://es.wikipedia.org/wiki/Especial:Aleatoria" 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>
						</div>
					</div>
				</form>
			</div>
			<div class="col-sm-2 col-xs-2"></div>
		</div>
		<p class="text-success">Cliquea la lupa para buscar</p>
	</div>

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

</div>


/*Downloaded from https://www.codeseek.co/zdflower/wikipedia-viewer-bWrEOL */
    	.fondo-verde {
		background-color: LightGreen;
	}


/*Downloaded from https://www.codeseek.co/zdflower/wikipedia-viewer-bWrEOL */
    $('#lupa').on('click', function buscar(){
	var aBuscar = $('#buscadorInput').val();
	console.log("Quiere buscar: " + aBuscar);
	var cantidadDeResultados = 10;
	$.getJSON("https://es.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=" + aBuscar + "&origin=*", function(data){
		//mostrar los resultados
		console.log(data);
		$('#resultados').html("<h2> Resultados obtenidos: </h2>");
		for (var i = 0; i < cantidadDeResultados; i++){
			var titulo = data.query.search[i].title; //tengo que partirlo por los espacios y unir el resultado con _
			$('#resultados').append("<h3><a href='https://es.wikipedia.org/wiki/" + titulo.split(" ").join("_") + "'>" + titulo + "</a></h3>");
			$('#resultados').append("<p class='lead'>"+ data.query.search[i].snippet + " ... </p>");	
		}
		$('#resultados').css("background-color", "#2E2D88");
		$('#resultados').css("color", "white");
	});
});


Comments