lseffer/index.html

## index.html
<body>
  <div class="outerrim">
    <div class="center">
      <span>Search for Wikipedia articles.</span>


      </div>
    <div class="center">
      <a href='#' id='randomlink'>Random search</a>
      </div>
    <div class="center">

    <input id="wikisearchbar" type="text" name="search" placeholder="Search Wikipedia..">

      </div>
    <div class="searchresults">

    </div>
  </div>
  </body>

## script.js
function getWikiResults(searchString) {
  console.log(searchString);
  $.getJSON(
    "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&namespace=0&limit=20&callback=?&search=" +
      searchString,
    function(json) {
      // console.log(json[0]);
      // return json;
      generateSearchresults(json);
    }
  );
}

function generateSearchresults(json) {
  $(".searchresults").html("");
  var titles = json[1];
  var desc = json[2];
  var urls = json[3];
  for (var i = 0; i < titles.length; i++) {
    $(".searchresults").append('<div class="line-separator"></div>');
    $(".searchresults").append(
      '<a class="wikilink" href=' + urls[i] + ">" + titles[i] + "</a>"
    );
    $(".searchresults").append('<p class="description">' + desc[i] + "</p>");
    // $(".searchresults").append('</div>')
  }
  // $(".searchresults").html(json);
}

document
  .getElementById("wikisearchbar")
  .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode == 13) {
      var input = document.getElementById("wikisearchbar");
      getWikiResults(input.value);
    }
  });

function getRandomWiki() {
  $.getJSON(
    "https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=1&format=json&callback=?",
    function(json) {
      getWikiResults(json.query.random[0].title);
    }
  );
}
var rand = document.getElementById("randomlink");
rand.onclick = getRandomWiki;

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

## style.css
* {
 font-size: 100%;
 font-family: Calibri;
}

.outerrim {
  width: 600px;
  margin: 0 auto;
  border: 2px solid #313030;
}

.wikilink {
  padding-left: 10px;
  padding-right: 10px;
}

.description {
  padding-left: 10px;
  padding-right: 10px;
}

.center {
  display: block;
  text-align: center;
  margin: auto;
}
.line-separator{
margin-bottom: 10px;
  margin-top: 10px;
height:1px;

background:#717171;

border-bottom:1px solid #313030;

}

input[type=text] {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;

}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
    width: 100%;
}

## zzvbpv.markdown

      
    Raw
  

              zzvbpv.markdown
            
          
    zzvbpV

A Pen by Leonard on CodePen.
License.
	<body>
	<div class="outerrim">
	<div class="center">
	<span>Search for Wikipedia articles.</span>



	</div>
	<div class="center">
	<a href='#' id='randomlink'>Random search</a>
	</div>
	<div class="center">

	<input id="wikisearchbar" type="text" name="search" placeholder="Search Wikipedia..">

	</div>
	<div class="searchresults">

	</div>
	</div>
	</body>
	function getWikiResults(searchString) {
	console.log(searchString);
	$.getJSON(
	"https://en.wikipedia.org/w/api.php?action=opensearch&format=json&namespace=0&limit=20&callback=?&search=" +
	searchString,
	function(json) {
	// console.log(json[0]);
	// return json;
	generateSearchresults(json);
	}
	);
	}

	function generateSearchresults(json) {
	$(".searchresults").html("");
	var titles = json[1];
	var desc = json[2];
	var urls = json[3];
	for (var i = 0; i < titles.length; i++) {
	$(".searchresults").append('<div class="line-separator"></div>');
	$(".searchresults").append(
	'<a class="wikilink" href=' + urls[i] + ">" + titles[i] + "</a>"
	);
	$(".searchresults").append('<p class="description">' + desc[i] + "</p>");
	// $(".searchresults").append('</div>')
	}
	// $(".searchresults").html(json);
	}

	document
	.getElementById("wikisearchbar")
	.addEventListener("keyup", function(event) {
	event.preventDefault();
	if (event.keyCode == 13) {
	var input = document.getElementById("wikisearchbar");
	getWikiResults(input.value);
	}
	});

	function getRandomWiki() {
	$.getJSON(
	"https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=1&format=json&callback=?",
	function(json) {
	getWikiResults(json.query.random[0].title);
	}
	);
	}
	var rand = document.getElementById("randomlink");
	rand.onclick = getRandomWiki;
	* {
	font-size: 100%;
	font-family: Calibri;
	}

	.outerrim {
	width: 600px;
	margin: 0 auto;
	border: 2px solid #313030;
	}

	.wikilink {
	padding-left: 10px;
	padding-right: 10px;
	}

	.description {
	padding-left: 10px;
	padding-right: 10px;
	}

	.center {
	display: block;
	text-align: center;
	margin: auto;
	}
	.line-separator{
	margin-bottom: 10px;
	margin-top: 10px;
	height:1px;

	background:#717171;

	border-bottom:1px solid #313030;

	}

	input[type=text] {
	width: 130px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;

	}

	/* When the input field gets focus, change its width to 100% */
	input[type=text]:focus {
	width: 100%;
	}