Project - Build a Wikipedia Viewer

Developer
Luciano Boaventura Britis
Size
2,640 Kb
Views
6,072
  1. Project - Build a Wikipedia Viewer Previews
  2. Project - Build a Wikipedia Viewer HTML Codes
  3. Project - Build a Wikipedia Viewer CSS Codes
  4. Project - Build a Wikipedia Viewer JS Codes

How do I make an project - build a wikipedia viewer?

What is a project - build a wikipedia viewer? How do you make a project - build a wikipedia viewer? This script and codes were developed by Luciano Boaventura Britis on 11 January 2023, Wednesday.

Project - Build a Wikipedia Viewer Previews
IQ Test

Project - Build a Wikipedia Viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Project - Build a Wikipedia Viewer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="text-center">Wikipedia Viewer</h1> <form class="form-search text-center"onsubmit="return search()"> <input type="search"id="srch" class="input-medium search-query" placeholder="Search for..."> <button class="btn btn-info" type="submit"> <span class="glyphicon glyphicon-search"></span> </button> </form> </div><!-- /input-group --> <!-- <div class="well well-lg"></div>-->
<div id="display">
</div> <div id='footer'> Create by<a href="https://github.com/LucianoBritis/Portfolio_Webpage"> Luciano Britis</a> </div> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Project - Build a Wikipedia Viewer - Script Codes CSS Codes

* { padding:0px;
}
body { background-color:#8B0000;
}
h1 { font-size: 53px; color:#fff; line-height:30px; padding-top:20px; padding-bottom:40px; font-family:Comic sans, monospace;
}
.btn-info:hover{ color:#000000; background-color:transparent; text-decoration:none; }
.glyphicon-search{ font-size:30px; padding-left:10px;
}
.glyphicon-search:hover{ font-size:35px; text-decoration:none;
}
#srch {	font-size: 25px; color: #000; border-radius:50px; background-color:#fff; padding-bottom:-10px;
}
.btn-info { padding-left:20px; font-size:29px; border-radius:50%; background-color:transparent; border:0; }
.btn-info:hover { text-decoration:none;
}
#footer { padding-top:40px; padding-bottom:40px; text-align:center; color:#ffffff;
}
#footer a:hover { text-decoration:none; color:#ffffff;
}
.entry { width:1000px;	border: 0;	background:#ffffff;	color: #000000;	box-shadow: 0 0 6px 2px rgba(0,0,0,.10);	margin: 0 auto;	padding: 15px 8px;
}
.entry:hover {	border-bottom: 4px solid #000000;
}
.title { color:#698B69;	font-weight: bold;	font-size: 25px;
}
.snippet {	font-size: 19px; padding-left:15px;
}

Project - Build a Wikipedia Viewer - Script Codes JS Codes

$('.form-search').submit(function(e){	e.preventDefault();
});
function search(){
$("#display").empty(); $.getJSON("https://commons.wikimedia.org/w/api.php?action=query&list=search&format=jsonfm&srsearch="+$('#srch').val()+"&format=json&callback=?", function(data) {	$.each(data.query.search, function(i,item){ var wiki ='<div class="entry">'+ '<div class="title">'+item.title+'</div>'+ '<div class="snippet">'+item.snippet+'</div></div>'; $("#display").append(wiki);	});	});
$('#srch').val();
}
Project - Build a Wikipedia Viewer - Script Codes
Project - Build a Wikipedia Viewer - Script Codes
Home Page Home
Developer Luciano Boaventura Britis
Username Luciano_Britis
Uploaded January 11, 2023
Rating 3
Size 2,640 Kb
Views 6,072
Do you need developer help for Project - Build a Wikipedia Viewer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luciano Boaventura Britis (Luciano_Britis) Script Codes
Name
Build a Tribute Page
Example the DOM object
Dating Web Site Assessment
A Pen by Luciano Boaventura Britis
Project -Show the Local Weather
Quotes
Luciano_Britis
Color Guessing Game
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!