Wiki Search Clone

Developer
Katie Inkblotty
Size
4,800 Kb
Views
40,480
  1. Wiki Search Clone Previews
  2. Wiki Search Clone HTML Codes
  3. Wiki Search Clone CSS Codes
  4. Wiki Search Clone JS Codes

How do I make an wiki search clone?

Built using Angular.js, SCSS, Flexboxgrid, and the Wikipedia API-- Made for FreeCodeCamp challenge "Zipline: Build a Wikipedia Viewer". What is a wiki search clone? How do you make a wiki search clone? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

Wiki Search Clone Previews
IQ Test

Wiki Search Clone - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wiki Search Clone</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/flexboxgrid/6.2.0/flexboxgrid.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="wikiApp">
<div class="main" ng-controller="searchCtrl as ctrl"> <div class="row center-xs"> <div class="col-xs-6 center-search"> <div class="box search magnify"> <input type="text" id="search-input" ng-keyup="search()" inkDown="$('#dropdown').focus()"> <span class="invisible-span"><i class="fa fa-times" id="x"></i></span> </div> </div> </div> <div class=""> <ul ng-show="selected===false" class="drop-down opts" id="dropdown" ng-repeat="result in results | limitTo:5 track by $index"> <li ng-click="select($index)" class="button dropdown">{{ result.title }}</li> </ul> </div> <div class="row"> <div ng-click="random()" class="button rand"> Random Search </div> </div> <div class="row center-xs"> <div class="col-xs-6 center-search"> <div class="box" id="caption">Click icon to search</div> </div> </div> <div class="results"> <div class="row" ng-show="selected"> <a target="_blank" ng-href="{{ baseUrl }}{{results.title }}"> <div class="title">{{ results.title }}</div> <div class="line"></div> <div class="description"> <div ng-bind-html="results.snippet | unsafe"></div><span>...</span> </div> </a> </div> </div>
</div>
</body> <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>

Wiki Search Clone - Script Codes CSS Codes

body { background-color: #232c3b; color: #f0f0f0; font-size: 1.5em; transition: ease all 2s;
}
a { color: #161d28; text-decoration: none;
}
.button { background-color: #ff6c3a; border-radius: 0.5em; color: #232c3b; cursor: pointer; font-size: 0.8em; min-width: 9em; padding: 1% 1.5%; text-align: center;
}
.button.rand { margin: 2% auto 0 auto; padding: 0.8% 1.1%;
}
.button.dropdown { border-radius: 0; display: block; margin: -1.6% auto; width: 12em;
}
.button:hover { background-color: #cc562e;
}
.line { background-color: #6a7483; height: 2px; margin: 0; margin-bottom: 1%; width: 100%;
}
.main { margin-top: 3em;
}
.main .center-search { text-align: center;
}
.main .magnify { background-color: #232c3b; border: 4px solid #ff6c3a; border-radius: 50%; cursor: pointer; display: inline-block; font-size: 1em; height: 1.8em; position: relative; transition: all ease 0.1s; width: 1.8em; z-index: 1001;
}
.main .magnify.after-click { border-radius: 0.5em; color: #ff6c3a; padding: 0.2em 0.5em; transition: ease all 0.5s; width: 12em; z-index: 1;
}
.main .magnify.after-click:before { display: none; transition: ease all 1s;
}
.main .magnify.after-click input { cursor: pointer; display: inline-block; z-index: 2;
}
.main .magnify.after-click span { z-index: 2;
}
.main .magnify:before { content: ""; display: inline-block; position: absolute; right: -0.35em; bottom: -0.2em; border-width: 0; background: #ff6c3a; width: 0.8em; height: 0.15em; transition: all ease 1s; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);
}
.main .magnify input { background-color: #232c3b; border: none; display: none; height: 100%; outline: none; width: 90%; z-index: 0;
}
.main .magnify span { color: #ff6c3a; font-size: 1em; pointer-events: auto; transition: all ease 0.5s; transition-delay: 1s;
}
.main .magnify .invisible-span { height: 0; opacity: 0; z-index: 0; pointer-events: none; transition: ease all 0s; transition-delay: 0s;
}
#caption { letter-spacing: 0.09em; margin-top: 0.75em;
}
.results { color: #161d28; margin: 0 auto; padding: 2% 2%; width: 90%;
}
.results .row { background-color: #f0f0f0; border-radius: 0.5em; margin-top: 1%; padding: 3%;
}
.results .row:hover .line { background-color: #ff6c3a;
}
.results .row .title { margin-bottom: 0;
}
.results .row .description { padding: 0 4%;
}

Wiki Search Clone - Script Codes JS Codes

var app = angular.module('wikiApp', []);
app.directive('inkDown', function(){ // found on thelarkinn's codepen post return function(scope, element, attrs){ element.bind("keydown keypress", function(event){ var keyCode = event.which || event.keyCode; if (keyCode === 40) { scope.$apply(function() { scope.$eval(attrs.inkDown); }); event.preventDefault(); } }); }
});
app.filter('unsafe', function($sce) { return function(val) { return $sce.trustAsHtml(val); };
});
app.controller('searchCtrl', function($scope, $http) { var ctrl = $scope; ctrl.baseUrl = 'https://en.wikipedia.org/wiki/'; ctrl.selected = false; ctrl.search = function(){ var value = $('#search-input').val(); var url = 'https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + value + '&callback=?JSON_CALLBACK' ctrl.selected = false; $http.jsonp(url) .then(function(data){ ctrl.results = data.data.query.search; }) .then(function(err){ console.log("error: " + err); }) } ctrl.random = function(){ $('#caption').fadeOut(500); ctrl.selected = true; var url = 'https://en.wikipedia.org/w/api.php?&action=query&format=json&&rnnamespace=0&list=random&callback=?JSON_CALLBACK'; $http.jsonp(url) .then(function(data){ ctrl.results = data.data.query.random[0]; console.log(ctrl.results); }) } ctrl.select = function(index) { var chosenKey = ctrl.results[index]; ctrl.results = chosenKey; ctrl.selected = true; }
});
$('.magnify').on('click', function(){ $('.magnify').addClass('after-click'); $('.invisible-span').removeClass('invisible-span'); $('#search-input').focus(); $('#caption').fadeOut(500);
});
$('#x').on('click', function(e){ $(".magnify").removeClass('after-click'); $('.magnify > span').addClass('invisible-span'); $('#search-input').val(''); e.stopPropagation();
});
Wiki Search Clone - Script Codes
Wiki Search Clone - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 4,800 Kb
Views 40,480
Do you need developer help for Wiki Search Clone?

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!

Katie Inkblotty (inkblotty) Script Codes
Name
US GDP Bar Chart
Google Calendar Event Feed
Simon game
Tic Tac Toe
Random Quote Generator
Weather App
JQuery Calculator
React Recipe Box
Angular Task App
Monthly Global Land Surface Temperature
Create amazing SEO content 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!