Wikipedia Search

Developer
Sicontis
Size
3,279 Kb
Views
56,672
  1. Wikipedia Search Previews
  2. Wikipedia Search HTML Codes
  3. Wikipedia Search CSS Codes
  4. Wikipedia Search JS Codes

How do I make an wikipedia search?

What is a wikipedia search? How do you make a wikipedia search? This script and codes were developed by Sicontis on 12 July 2022, Tuesday.

Wikipedia Search Previews
IQ Test

Wikipedia Search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Search</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <meta charset="UTF-8" /> <title>Vue JS Template</title>
</head>
<body> <div class="container" id="app"> <h1>{{ title }}</h1> <div id="searchbox" class="search" :class="closeSearch" @click="openAni($event)"> <input v-show="isOpen" type="text" v-model="query" @keydown.enter="searchWiki(query)" /> <div class="close-btn" v-show="isOpen" @click="closeAni"> <div class="line left" :class="closeLeft"></div> <div class="line right" :class="closeRight"></div> </div> </div> <div class="handle" :class="closeHandle"></div> <div id="resultsbox"> <ul> <li v-for="item in results" @click="gotoWiki(item.title)"> <h3>{{ item.title }}</h3> <p v-html="item.snippet"></p> </li> </ul> </div> </div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.14.0/axios.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Search - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: Helvetica, Arial, sans-serif; display: flex; flex-direction: column; align-items: center; background: #f4f4f4;
}
.container { width: 80%; padding: 20px; display: flex; flex-direction: column; align-items: center;
}
h1 { font-size: 2em; margin: 30px 0;
}
#searchbox { border: 3px solid #45d9fd; height: 40px; border-radius: 40px; transform-origin: 50% 50%; cursor: pointer; display: flex; justify-content: space-around; align-items: center; position: relative; overflow: hidden; margin: 30px 0;
}
#searchbox input { border: none; outline: none; background: none; width: 80%; padding: 0 10px;
}
.handle { width: 3px; height: 1px; background: #45d9fd; transform: translate(13px, -37px) rotate(-45deg); transform-origin: 0 0;
}
.handle-start { height: 20px;
}
.close-btn { display: block; width: 20px; height: 20px; position: relative; display: flex; justify-content: center; align-items: center;
}
.line { width: 2px; height: 15px; background: brown; position: absolute;
}
.search { width: 42px;
}
.left { transform: rotate(45deg) translateY(-40px);
}
.right { transform: rotate(-45deg) translateY(40px);
}
.left-out { animation: left-out .5s forwards;
}
.right-out { animation: right-out .5s forwards;
}
.left-in { animation: left-in .5s .3s forwards;
}
.right-in { animation: right-in .5s .3s forwards;
}
.open { animation: expand .3s .3s forwards;
}
.close { animation: shrink .7s forwards;
}
.handle-in { animation: handleIn .3s forwards;
}
.handle-out { animation: handleOut .3s .6s forwards;
}
@keyframes handleIn { 0% { height: 20px; opacity: 1; } 100% { height: 1px; opacity: 0; }
}
@keyframes handleOut { 0% { height: 1px; opacity: 0; } 100% { height: 20px; opacity: 1; }
}
@keyframes expand { 0% { width: 42px; } 100% { width: 200px; }
}
@keyframes shrink { 0% { width: 200px; } 100% { width: 42px; }
}
@keyframes left-out { 0% { transform: rotate(45deg) translateY(0px); opacity: 1; } 100% { transform: rotate(45deg) translateY(-30px); opacity: 0; }
}
@keyframes right-out { 0% { transform: rotate(-45deg) translateY(0px); opacity: 1; } 100% { transform: rotate(-45deg) translateY(30px); opacity: 0; }
}
@keyframes left-in { 0% { transform: rotate(45deg) translateY(-30px); opacity: 0; } 100% { transform: rotate(45deg) translateY(0px); opacity: 1; }
}
@keyframes right-in { 0% { transform: rotate(-45deg) translateY(-30px); opacity: 0; } 100% { transform: rotate(-45deg) translateY(0px); opacity: 1; }
}
#resultsbox { padding: 40px;
}
#resultsbox li { margin-bottom: 20px; border-bottom: 1px dotted #45d9fd;
}
#resultsbox li:hover { cursor: pointer; border-bottom: 2px dotted #ee2560;
}
#resultsbox h3 { color: #ee2560; margin: 10px 0; font-weight: 600; font-size: 1.3em;
}
#resultsbox p { padding: 10px 5px; color: #08182b; font-size: .9em;
}

Wikipedia Search - Script Codes JS Codes

new Vue({ // ELEMENT el: '#app', // DATA data: { title: 'Wikipedia Viewer' , results: [], query: '', isOpen: false, closeLeft: '', closeRight: '', closeSearch: '', closeHandle: '', isHandle: true }, methods: { searchWiki: function(query) { let url = 'https://en.wikipedia.org/w/api.php?action=query&utf=1&format=json&list=search&srsearch=' + this.query; return axios.get(url) .then(res => { //console.log(res.data.query.search); this.results = res.data.query.search; }) .catch(error => console.log(error)); }, closeAni: function() { this.closeLeft = 'left-out'; this.closeRight = 'right-out'; let vm = this; setTimeout(() => { vm.isOpen = false; vm.closeSearch = 'close'; vm.query = ''; this.closeHandle = 'handle-out' }, 500); }, openAni: function(e) { let input = document.getElementById('searchbox'); this.isOpen = true; this.closeHandle = 'handle-in'; this.closeSearch = 'open'; let vm = this; setTimeout(() => { vm.isHandle = false; vm.closeLeft = 'left-in'; vm.closeRight = 'right-in'; input.children[0].focus(); }, 500); }, gotoWiki: function(title) { let url = 'https://en.wikipedia.org/wiki/' + title; window.open(url, '_blank'); } }, created() { this.closeHandle = 'handle-start'; }
});
Wikipedia Search - Script Codes
Wikipedia Search - Script Codes
Home Page Home
Developer Sicontis
Username Sicontis
Uploaded July 12, 2022
Rating 3
Size 3,279 Kb
Views 56,672
Do you need developer help for Wikipedia Search?

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!

Sicontis (Sicontis) Script Codes
Name
Vue JS Typeahead
Weather API Test
VueJS Todo App
Simple Calendar
Striped Sliding Navigation
Sign Up Form
Simple Day Timer
VueJS Logo SVG
3D Flip Subscribe Button
TV Search for Latest Episode
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!