Wikipedia Viewer Exercise

Developer
Nathaniel Horwitz-Willis
Size
3,314 Kb
Views
6,072
  1. Wikipedia Viewer Exercise Previews
  2. Wikipedia Viewer Exercise HTML Codes
  3. Wikipedia Viewer Exercise CSS Codes
  4. Wikipedia Viewer Exercise JS Codes

How do I make an wikipedia viewer exercise?

What is a wikipedia viewer exercise? How do you make a wikipedia viewer exercise? This script and codes were developed by Nathaniel Horwitz-Willis on 06 December 2022, Tuesday.

Wikipedia Viewer Exercise Previews
IQ Test

Wikipedia Viewer Exercise - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Viewer Exercise</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section> <div class="container-fluid"> <h1>Wikipedia Viewer</h1> <article class="search-position"> <p class="search-icon"> <input name="search" id="search" type="search"> </p> </article> <article class="random"> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"> <button type="button" class="btn btn-primary">Random Article!</button> </a> </articles> <article class="results"> </article> </div>
</section>
<footer> <p>A codepen by Nate Horwitz-Willis 2017.</p>
</footer> <script src="js/index.js"></script>
</body>
</html>

Wikipedia Viewer Exercise - Script Codes CSS Codes

h1 { font-size: 52px; font-family: Sans Serif; text-align: center; font-family: Cambria;
}
section { min-height: 90vh; padding-top: 10px; padding-bottom: 10px; color: #1e1d1d; background-color: #c4efee; bottom: 10px;
}
.well { margin-left: 100px;
}
.results { margin-top: 10%;
}
.random { text-align: center;
}
footer { background-color: black; color: white; line-height: 20px; padding-top: 10px; padding-bottom: 6px; position: relative; text-align: center; font-family: cursive, sans-serif;
}
.search-position { position: absolute; left: 51.5%; top: 8%; transform: translate(-50%, -50%);
}
/* Search Bar CSS */
#search { -webkit-appearance: none; font-family: Times; width: 25px; padding: 0 10px; height: 24px; font-size: 14px; color: #666; line-height: 24px; border: 0; border-radius: 50px; box-shadow: 0 0 0 1px rgba(0, 150, 200, .5), inset 0 2px 5px rgba(0, 100, 150, .3), 0 2px 0 rgba(255, 255, 255, .6); position: relative; z-index: 5; -webkit-transition: .3s ease; -moz-transition: .3s ease;
}
/* When clicked */
#search:focus { outline: none; width: 200px;
}
.search-icon { margin: 50px auto 0 -50%; left: 50%; z-index: 4; position: relative; padding: 5px; line-height: 0; border-radius: 100px; background: #b9ecfe; background-image: -webkit-linear-gradient(#ffffff, #1e1d1d); background-image: -moz-linear-gradient(#1e1d1d, #1e1d1d); display: inline-block; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 5px rgba(0, 100, 150, .4);
}
.search-icon:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 3px 2px rgba(100, 200, 255, .5);
}
.search-icon:after { content: ''; display: block; position: absolute; width: 5px; height: 20px; background: #1e1d1d; bottom: -10px; right: -3px; border-radius: 0 0 5px 5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); box-shadow: inset 0 -1px 0 rgbA(255, 255, 255, .6), -2px 2px 2px rgba(0, 100, 150, .4);
}
.search-icon:hover:after { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6), -2px 2px 2px 1px rgba(100, 200, 255, .5);
}

Wikipedia Viewer Exercise - Script Codes JS Codes

var arrResults = [];
var html = '';
// Create structure for the data
function Result(title, snippet) { this.title = title; this.snippet = snippet;
}
function search() { // Use Ajax to handle things $.ajax({ url: 'https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + $('#search').val(), dataType: 'jsonp', type: 'POST', headers: { 'Api-User-Agent': 'Example/1.0' }, success: function(data) { // First we clear the children from our class to make sure no previous results are showing. $('.results').empty(); // Then we also clear the array with the results before providing new information. arrResults.length = 0; var resArr = data.query.search; //For each result, generate the html data. for (var result in resArr) { arrResults.push(new Result(resArr[result].title, resArr[result].snippet)); html = '<div id="articles" class="well"><a href="https://en.wikipedia.org/wiki/' + resArr[result].title + '"target="_blank"><h3>' + resArr[result].title + '</h3><p>' + resArr[result].snippet + '</p></a></div>'; // Displays the elements to the page $('.results').append(html); } } }); // This will handle when to display results based on the search bar. if ($('#search').val().length > 0) { $('.articles').css('display', 'none'); } else if ($('#search').val().length < 1) { // display everything again $('.articles').css('display', 'block'); } // This make things tick with each key stroke $('#search').unbind('keyup'); $('#search').keyup(function() { search(); });
}
$('#search').keyup(function() { search();
});
Wikipedia Viewer Exercise - Script Codes
Wikipedia Viewer Exercise - Script Codes
Home Page Home
Developer Nathaniel Horwitz-Willis
Username natewillisii
Uploaded December 06, 2022
Rating 3
Size 3,314 Kb
Views 6,072
Do you need developer help for Wikipedia Viewer Exercise?

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!

Nathaniel Horwitz-Willis (natewillisii) Script Codes
Name
Random Quote Machine Exercise
Show the local weather exercise
Twitch Exercise
Create amazing Facebook ads 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!