Wikipedia viewer
How do I make an wikipedia viewer?
What is a wikipedia viewer? How do you make a wikipedia viewer? This script and codes were developed by Matheus on 03 September 2022, Saturday.
Wikipedia viewer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>wikipedia viewer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<div ng-app="wikiApp" ng-controller="wikiController"> <h1> Wikipedia Viewer </h1> <p id="description"> Search, or click <a target="_blank" href="https://en.wikipedia.org/wiki/Special:Random">here</a> to get a random article </p> <form ng-submit="funcSearch()"> <input type="text" name="search" placeholder="Search.." ng-model="input"> </form> <div id="articleContent" ng-repeat="items in articlesList.items"> <a href={{items.articleLink}} target="_blank"> <p id="articleTitle"><b> {{items.articleTitle}}</b></p> <p id="articleExtract"> {{items.articleText}} </p> </a> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular-animate.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wikipedia viewer - Script Codes CSS Codes
body{ background-color: purple;
}
h1{ text-align: center; font-family: 'Abril Fatface', cursive; font-size: 50px;
}
#description{ font-size: 20px; text-align: center; position: relative; top: 10px;
}
a{ color: black;
}
input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png'); background-size: 30px 30px; background-position: 6px 6px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; margin: auto; display: block; border-style: solid; border-color: black; border-width: 3px; border-radius: 10px; position: relative; top: 10px;
}
input[type=text]:focus { width: 50%;
}
#articleContent{ width: 900px; height: 75px; background-color: white; margin: auto; position: relative; top: 30px; border-style: solid; border-color: black; border-width: 2px; border-radius: 10px;
}
#articleTitle{ font-size: 20px; position: relative; bottom: 13px; left: 10px;
}
#articleExtract{ font-size: 15px; position: relative; bottom: 13px; left: 10px;
}
a{ text-decoration: none;
}
Wikipedia viewer - Script Codes JS Codes
//https://www.mediawiki.org/w/api.php
//https://en.wikipedia.org/w/api.php?action=query&generator=links&titles=Metallica
//https://en.wikipedia.org/w/api.php?format=jsonfm&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=metallica&callback=JSON_CALLBACK
var myApp = angular.module('wikiApp', []);
myApp.controller('wikiController', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) { $scope.funcSearch = function(){ //declares new empty articles object list $scope.articlesList = { items: [ ] }; //set url for wikipedia 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=" + $scope.input + "&callback=JSON_CALLBACK"; //http connection fails with jquery $http.jsonp(url).success(function(data) { //evaluetes and organizes received data var pagesList=Object.keys(data.query.pages); console.log(pagesList); for (var i=0; i<pagesList.length; i++){ var extract; if (data.query.pages[pagesList[i]].extract.length > 110){ extract=data.query.pages[pagesList[i]].extract.substring(0,110); extract+="..." } else extract=data.query.pages[pagesList[i]].extract; var auxObj = { articleTitle: data.query.pages[pagesList[i]].title, articleLink: "https://en.wikipedia.org/?curid=" + pagesList[i], articleText: extract } $scope.articlesList.items.push(auxObj); } console.log($scope.articlesList); }); }
}]);
Developer | Matheus |
Username | MatheusLima92 |
Uploaded | September 03, 2022 |
Rating | 3 |
Size | 3,085 Kb |
Views | 32,384 |
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!
Name | Size |
Quote Machine | 2,578 Kb |
Javascript Calculator | 3,484 Kb |
Weather App | 4,587 Kb |
Pomodoro Clock | 3,705 Kb |
Game of Life | 6,575 Kb |
Markdown Previewer | 3,402 Kb |
Camper LeaderBoard | 4,784 Kb |
Voting App | 2,012 Kb |
Tic-Tac-Toe Game - v3 | 5,827 Kb |
Voting App - register | 1,948 Kb |
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!
Name | Username | Size |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Tic Tac Toe | Volv | 4,862 Kb |
P1 | Vivi_Lai | 1,533 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Pure CSS candle light animation by One element | Ksksoft | 2,193 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!