FreeCodeCamp : Build a Wikipedia Viewer

Developer
Markku Lehmonen
Size
2,993 Kb
Views
16,192
  1. FreeCodeCamp : Build a Wikipedia Viewer Previews
  2. FreeCodeCamp : Build a Wikipedia Viewer HTML Codes
  3. FreeCodeCamp : Build a Wikipedia Viewer CSS Codes
  4. FreeCodeCamp : Build a Wikipedia Viewer JS Codes

How do I make an freecodecamp : build a wikipedia viewer?

What is a freecodecamp : build a wikipedia viewer? How do you make a freecodecamp : build a wikipedia viewer? This script and codes were developed by Markku Lehmonen on 30 November 2022, Wednesday.

FreeCodeCamp : Build a Wikipedia Viewer Previews
IQ Test

FreeCodeCamp : Build a Wikipedia Viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp : Build a Wikipedia Viewer</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row testBorder"> <div class="col-xs-12 testBorder"> <h1 class="text-center">Wikipedia Machine</h1> </div> </div> <div class="row testBorder"> <div class="col-xs-8 col-xs-offset-1 testBorder"> <div class="input-group"> <input id="textSearch" type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn"> <button id="buttonSearch" class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button> </span> </div> </div> <div class="col-xs-1 testBorder"> <div id="separator" class="center-block"></div> </div> <div class="col-xs-1 testBorder"> <button id="buttonRandom" class="btn btn-default dice" type="button"> <div id="diceLayout"> <div class="dot dotLeft"></div> <div class="dot dotRight"></div> <div class="dot dotLeft"></div> <div class="dot dotRight"></div> <div class="dot dotLeft"></div> <div class="dot dotRight"></div> </div> </button> </div> </div> <div class="row"> <div id="output" class="col-xs-12"></div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp : Build a Wikipedia Viewer - Script Codes CSS Codes

body { min-height:100vh; display:flex; align-items:center; font-family:calibri; color:#444444; }
.testBorder { /*border:1px solid red;*/ }
.container { width:500px; }
.dice {height:34px; width:34px;}
h1 {margin-bottom:35px; font-size:45px; font-weight:lighter; font-family:"Open Sans Condensed", sans-serif; color:#888888; user-select:none; cursor:default; }
span {color:#888888;}
#separator { margin-top:-10px; height:55px; width:0px; border:1px dashed #bbbbbb; }
#output {padding-top:50px;}
h4 {margin-bottom:0px; padding:0px; font-weight:bold;}
p {margin-bottom:25px;}
#diceLayout {position:relative; top:-7px; right:13px; height:34px; width:34px; }
.dot { width:6px; height:6px; border:1px solid #888888; display:block; border-radius:3px; background-color:#888888; }
.dotLeft {margin:5px 5px -2px 6px; float:left;}
.dotRight {margin:5px 6px -2px 5px; float:right;}

FreeCodeCamp : Build a Wikipedia Viewer - Script Codes JS Codes

$(document).ready(function() { $("#buttonRandom").click(random); $("#buttonSearch").click(search); $("#textSearch").bind("enterKey", search); $("#textSearch").keyup(function(e){ if(e.keyCode == 13) { $(this).trigger("enterKey"); } });
});
function random() { window.open("https://en.wikipedia.org/wiki/Special:Random"); return false;
}
function search() { var searchStr = $("#textSearch").val(); if (searchStr !== "") { var url = "https://en.wikipedia.org/w/api.php?"; var queryData = "action=opensearch&search="+ searchStr +"&format=json&callback=?"; $.ajax( { url: url, data: queryData, dataType: 'json', // TODO: 'json' type: 'POST', headers: { 'Api-User-Agent': 'Example/1.0' }, success: function(data) { $("#output").empty(); $("#textSearch").val(""); if(data[1].length > 0){ for(var i = 0; i < data[1].length; i++) { $("#output").append("<h4>" + data[1][i] + " <small><a href='" + data[3][i] + "' target='_blank'>Read more</a></small>" + "</h4>"); $("#output").append("<p>"+ data[2][i]); } }else { $("#output").html("<p class='text-center'>No results were found.</p>"); } } }); }
}
FreeCodeCamp : Build a Wikipedia Viewer - Script Codes
FreeCodeCamp : Build a Wikipedia Viewer - Script Codes
Home Page Home
Developer Markku Lehmonen
Username SharpDal
Uploaded November 30, 2022
Rating 3
Size 2,993 Kb
Views 16,192
Do you need developer help for FreeCodeCamp : Build a Wikipedia Viewer?

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!

Markku Lehmonen (SharpDal) Script Codes
Name
A Pen by Markku Lehmonen
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!