Wikipedia Application

Developer
Vinny
Size
3,518 Kb
Views
22,264
  1. Wikipedia Application Previews
  2. Wikipedia Application HTML Codes
  3. Wikipedia Application CSS Codes
  4. Wikipedia Application JS Codes

How do I make an wikipedia application?

A clean, versatile application that allows you to search for whatever your heart desires. . What is a wikipedia application? How do you make a wikipedia application? This script and codes were developed by Vinny on 15 October 2022, Saturday.

Wikipedia Application Previews
IQ Test

Wikipedia Application - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Application</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<body ng-app="MyApp"> <div class="container-fluid" ng-controller="inputCtrl as ctrl"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form class="form-group margin-lg-top margin-md-bottom" ng-submit="getValue()"> <div class="brand-box"><span class="fa fa-search"></span><h1 class="brand">Wiki Search</h1></div> <input ng-model="title" class="search form-control input-lg"> <span class="go" ng-click="getValue()">Go!</span> </form> </div> </div> <!--end row--> <div class="feed row" ng-repeat="wikis in wikiValues"> <a href="{{wikis.page}}" target="_blank"> <div class="wiki-box center-block"> <h4 class="title">{{wikis.title}}</h4> <p class ="wiki-text">{{wikis.text}}</p> </div> </a> </div> <!--end feed div --> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Application - Script Codes CSS Codes

body { font-family: 'Libre Baskerville', serif; background-color: #333333;
}
/* Paddings, Margins .. */
.margin-lg-top { margin-top: 30%;
}
.margin-sm-top{ margin-top: 10%;
}
.margin-md-bottom{ margin-bottom: 15%;
}
.test{ background-color: red;
}
/*input field */
.search { border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; width: 85%; background-color: #292929; color: white;
}
.search-btns { float: right; position: relative; top: -2.5em;
}
#random { display: inline-block
}
.feed{ margin-top: 1%;
}
.wiki-box { width: 80%; padding: 2em; background-color: #292929; margin-bottom: 2%; box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.wiki-box:hover{ border-left: 7px solid yellow;
}
.searchmatch { font-color: green;
}
@media screen as (max-width: 750px){ .wiki-box{ text-align: center; }
}
.title{ color: yellow; font-family: 'Bangers', cursive; font-size: 2.6em; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.wiki-text{ color: white;
}
a{ color:inherit;
}
a:hover{ text-decoration: none; color: inherit;
}
a:visited, a:link{ text-decoration: none;
}
.brand-box{ margin-bottom: 6%;
}
.brand{ font-size: 4em; font-family: 'Bangers', cursive; color: yellow; text-shadow: -1px 0 black, 3px 9px black, 1px 0 black, 0 -1px black; position: relative; top: -.8em; left: 30%;;
}
.fa{ font-size: 8em !important; color: #EFEAEA; text-shadow: -1px 0 black, 0 3px black, 3px 0 black, 0 -1px black; position: relative; top: 60px; left: 22%; z-index: -1;
}
.go{ color: yellow; font-family: 'Bangers', cursive; font-size: 2.6em; text-shadow: -1px 0 black, 3px 9px black, 1px 0 black, 0 -1px black; float: right; position: relative; top: -54px; padding-right: 2%;
}
.go:hover{ font-size: 3em; cursor: pointer;
}
.form-control:focus { border-color: white; box-shadow: inset 0 1px 1px rgba(rgb(255, 255, 0, 0.075), 0 0 8px rgba(rgb(255, 255, 0, 0.6);
}

Wikipedia Application - Script Codes JS Codes

(function() { var app = angular.module("MyApp", []); app.controller('inputCtrl', function($scope, $http) { $scope.wikiValues = [], $scope.objs = []; $scope.getValue = function() { $scope.results; if (!$('form').hasClass("margin-sm-top")) { $('.form-group').fadeOut('fast',function(){ $('.brand-box').fadeOut('fast'); $(this).addClass('margin-sm-top'); $(this).fadeIn(2200); }); }//end if $('.feed').empty(); var title = $scope.title; //var searchTitle = $scope.title; var url = "http://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&exintro&explaintext&exsentences=1&exlimit=max&rawcontinue=&gsrsearch="; var callBack = "&callback=JSON_CALLBACK"; var pageUrl = "http://en.wikipedia.org/?curid="; /*var regEx=/(<([^>]+)>)/ig; var removeHtml = function(re,str){ var newString = str.replace(re,''); return newString; }*/ $http.jsonp(url + title + callBack).success(function(response) { $scope.results = response.query.pages; //clear arrays $scope.wikiValues = []; $scope.objs = []; for(var prop in $scope.results) { $scope.objs.push($scope.results[prop]); } $scope.objs.forEach(function(val) { $scope.wikiValues.push({ 'text': val.extract, 'title': val.title, 'page': pageUrl + val.pageid }); }); });//end http console.log($scope.wikiValues); } //end get value function }); //end wiki controller
}()); //end closure
Wikipedia Application - Script Codes
Wikipedia Application - Script Codes
Home Page Home
Developer Vinny
Username vinnyA3
Uploaded October 15, 2022
Rating 3
Size 3,518 Kb
Views 22,264
Do you need developer help for Wikipedia Application?

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!

Vinny (vinnyA3) Script Codes
Name
Tic Tac Toe Bro
Your Favorite Twitch App
CSS Binary Sunset on Tatooine
Dragon Ball in Pure CSS
Rotating CSS Cube
CSS Animations and Effects
Pure CSS Image Slider
Image Card Animation
Movie Card
Raw JS Image Slider
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!