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 Hudson Taylor on 21 January 2023, Saturday.
Wikipedia Viewer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wikipedia Viewer</title> <link href="https://fonts.googleapis.com/css?family=Quicksand:700" rel="stylesheet">
<script src="https://use.fontawesome.com/4c744a65a4.js"></script> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.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> <div class="container"> <h1 class="text-center">Wikipedia Viewer</h1> <div class="row"> <div class="col-md-5 col-md-offset-1"> <h2>Find a random article.</h2> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><i class="fa fa-random"></i></a> </div> <div class="col-md-5"> <h2>Search Wikipedia.</h2> <div id="magnifying-glass"> <input type="text" placeholder="Search"> </div> </div> </div>
</div>
<div class="container" id="resultDiv"></div> <p class="text-center" id="attribution">Slaved over by <a href="https://www.freecodecamp.com/hudsontaylor" target="_blank">hudsontaylor</a>. A <a href="https://freecodecamp.com" target="_blank">Free Code Camp</a> project. Hudson Allen <i class="fa fa-copyright"></i> 2016</p> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Wikipedia Viewer - Script Codes CSS Codes
body { text-align: center; font-family: 'Quicksand', sans-serif;
}
h1 { margin-top: 40px;
}
.col-md-5 { margin-top: 30px;
}
.col-md-5:nth-child(1) { border: 10px solid aquamarine; border-radius: 10px;
}
.col-md-5:nth-child(2) { border: 10px solid crimson; border-radius: 10px; transition: 2s;
}
@media (min-width: 992px) { .col-md-5:nth-child(1) { position: relative; left: -10px; } .col-md-5:nth-child(2) { position: relative; left: 10px; }
}
@media (max-width: 991px) { .col-md-5 { margin-left: 20px; margin-right: 20px; }
}
.fa-random { margin-top: 20px; margin-bottom: 20px; transition: 1s ease-in-out; color: #333;
}
.fa-random::before { font-size: 1000%;
}
.fa-random:hover { transform: rotateX(180deg); color: #555;
}
#magnifying-glass { display: flex; justify-content: center; height: 125px; width: 125px; border-radius: 100px; border: 14px solid #333; margin: 0 auto; margin-top: 27px; margin-bottom: 38px; transition: width 0.9s 0.3s;
}
#magnifying-glass::after { content: ""; height: 40px; width: 14px; border-radius: 10px; background-color: #333; transform: rotate(-45deg); position: relative; top: 85px; left: 50px; transition: height 0.3s 1.2s;
}
#magnifying-glass.height::after { height: 0;
}
form { display: none;
}
input { display: none; border: none; padding-left: 10px; width: 70%; font-size: 2.5em; border-radius: 60px;
}
input:focus { outline: none;
}
#magnifying-glass:hover { width: 70%; transition: 0.9s 0.4s;
}
#magnifying-glass:hover::after { height: 0; transition: 0.3s;
}
#attribution { margin: 60px 20px;
}
#resultDiv { display: none;
}
.result-box { border-radius: 10px; border: 10px solid #333; margin-top: 30px; transition: 0.5s;
}
.result-box:hover { border-color: #555;
}
.result-link { text-decoration: none !important;
}
.result-box p { color: #333; margin-bottom: 25px;
}
@media (max-width: 992px) { .result-box { margin-left: 5px; margin-right:5px; }
}
Wikipedia Viewer - Script Codes JS Codes
$(document).ready(function() { /* Following hover function courtesy of Paolo Bergantino; http://stackoverflow.com/questions/1089246/how-to-tell-hover-to-wait */ $('#magnifying-glass').hover(function() { clearTimeout($(this).data('timeout')); var t = setTimeout(function() { $("input").fadeIn(); }, 700); }, function() { if ($("input").val() == "") { $("input").fadeOut(); } else { $(this).css("width", "70%"); $(this).toggleClass('height'); } $(this).data('timeout', t); }); /* $("#magnifying-glass").css("border-color", "blue"); Code for triggering event on input enter courtesy of TheSuperTramp; http://stackoverflow.com/questions/6524288/jquery-event-for-user-pressing-enter-in-a-textbox */ $('input').bind("enterKey", function(e) { var input = $("input").val(); var searchURL = "https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=" + input + "&callback=?"; $.getJSON(searchURL, function(json) { var resultTitle; var resultSnippet; var content; for (var i = 0; i < json.query.search.length; i++) { resultTitle = JSON.stringify(json.query.search[i]["title"]); resultTitle = resultTitle.substring(1, resultTitle.length - 1); resultSnippet = JSON.stringify(json.query.search[i]["snippet"]); resultSnippet = resultSnippet.substring(1, resultSnippet.length - 1); content += "<a href='https://www.wikipedia.org/wiki/" + resultTitle + "' target='_blank' class='result-link'><div class='col-md-6 col-md-offset-3 result-box'><h3>" + resultTitle + "</h3><p>" + resultSnippet + "</p></div></a>"; } if (json.query.search.length > 0) { content = content.substring(9, content.length); } else { content = "<div class='col-md-6 col-md-offset-3 result-box'><h3>Error</h3><p>No results found. Please check your search for spelling errors.</p></div>"; } $("#resultDiv").html(content); $("#resultDiv").css("display", "block"); $(".result-box").addClass("animated bounceInUp"); }); }); $('input').keyup(function(e) { if (e.keyCode == 13) { $(this).trigger("enterKey"); } });
});
Developer | Hudson Taylor |
Username | Hudson_Taylor11 |
Uploaded | January 21, 2023 |
Rating | 3 |
Size | 3,596 Kb |
Views | 6,072 |
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 |
Preloading Screen | 2,026 Kb |
A Pen by Hudson Taylor | 2,425 Kb |
Weather App | 2,905 Kb |
Twitch App | 3,354 Kb |
Cool Modal Idea | 3,296 Kb |
Pixelated Retro Bowser | 3,080 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 |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Click handler test | Snapson | 2,329 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Simple content swap | Snografx | 1,859 Kb |
Minimal Menu | Achudars | 3,430 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 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!