cmac4603/fCC: Build a Wikipedia Viewer.markdown

## fCC: Build a Wikipedia Viewer.markdown

      
    Raw
  

              fCC: Build a Wikipedia Viewer.markdown
            
          
    fCC: Build a Wikipedia Viewer

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/pgNRvJ.
Rule #1: Don't look at the example project's code. Figure it out for yourself.
Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style.
User Story: I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
User Story: I can click a button to see a random Wikipedia entry.
Hint #1: Here's a URL you can use to get a random Wikipedia article: http://en.wikipedia.org/wiki/Special:Random.
Hint #2: Here's an entry on using Wikipedia's API: http://www.mediawiki.org/wiki/API:Main_page.
Hint #3: Use this link to experiment with Wikipedia's API.
Remember to use Read-Search-Ask if you get stuck.
When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.
You can get feedback on your project from fellow campers by sharing it in our Code Review Chatroom. You can also share it on Twitter and your city's Campsite (on Facebook).
A Pen by Colin MacRae on CodePen.
License.

  
## index.html
<body>
  <?php
ini_set('user_agent', 'ColinSearch/5.0');
?>
  <div class="search">
    <div class="container">
      <div class="searchglass">
        <svg id="glass" xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 490 490">
<path fill="none" stroke="#ff6b35" stroke-width="24" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/>
</svg>
        <h4>Click to Search <br><br> or...<br><br></h4>
        <a href="http://en.wikipedia.org/wiki/Special:Random" target="http://en.wikipedia.org/wiki/Special:Random">
        <button class="btn" id="random"><h4>Random Article!</h4></button></a>
      </div>
  <form class="form-group" id="searchform">
    <input type="text" id="wikisearch" placeholder="Search Wikipedia"/>
    <div class="btn" id="exit">x</div>
  </div>
    </form>
  </div>


</body>

## script.js
$(document).ready(function() {
   $("#glass").on("click", function(){
     $(".searchglass").hide(function() {
       $(".form-group").show("slow");
     });
});

   $("#exit").on("click", function(){
     $(".form-group").hide(function() {
       $(".searchglass").show("slow");
     });
});

$('.form-group').submit(function() {
  //$("#searchdest").append($("#searchform"));
  var searchvalue = $("#wikisearch").val();
   var toSearch = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchvalue + "&callback=?";
  $(".search").html(toSearch);
  var html = "<ul>";
  $.getJSON(toSearch, function(json) {
    for (var i = 0 ; i <= json.length ; i++) {
      html += "<a href=" + json[3][i] + " target=" + json[3][i] + ">";
      html += "<div class='result'><li>" + json[1][i] + "</li>";
      html += "<p>" + json[2][i] + "</p></div></a>";
    }
    html += "</ul>";

    $(".search").css({'margin-top':'0'});
   //$("#searchform").append($("#searchdest"));
    //$("#searchform").detach().appendTo('#searchdest');
    $(".search").html(html);

  });
});


});

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

## style.css
html,
body {
  margin: 0;
  padding: 0;
  font-weight: 200;
  font-family: "Helvetica";
  background-color: #37123C;
  color: #ff6b35;
}

.search {
  text-align: center;
  margin: 15% auto 20rem auto;
}

#glass {
  height: 10rem;
  width: 10rem;
}

#random {
  color: #ff6b35;
  border: 4px solid #ff6b35;
  border-radius: 0;
  background-color: transparent;
}

#random:hover {
  color: #37123C;
  border: 4px solid #37123C;
  background-color: #ff6b35;
}

.form-group {
  display: None;
  margin: 0 auto;
}

.form-group #wikisearch {
  background-color: transparent;
  padding: .5rem 15rem .5rem 1rem;
  border-radius: 15px;
  border: 4px solid #ff6b35;
}

.search ul {
  list-style-type: none;
}

.result li{
  font-size: 3rem;
  font-weight: 600;
}

.result {
  background-color: #B8C4BB;
  color: #505168;
  margin: 3em auto;
  max-width: 75%;
  border-radius: 5px;
  border: 4px solid #ff6b35;
  padding: 2rem;
  text-decoration: none;
}

.result:hover {
  background-color: #505168;
  color: #B8C4BB;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<body>
	<?php
	ini_set('user_agent', 'ColinSearch/5.0');
	?>
	<div class="search">
	<div class="container">
	<div class="searchglass">
	<svg id="glass" xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 490 490">
	<path fill="none" stroke="#ff6b35" stroke-width="24" stroke-linecap="round" d="m280,278a153,153 0 1,0-2,2l170,170m-91-117 110,110-26,26-110-110"/>
	</svg>
	<h4>Click to Search <br><br> or...<br><br></h4>
	<a href="http://en.wikipedia.org/wiki/Special:Random" target="http://en.wikipedia.org/wiki/Special:Random">
	<button class="btn" id="random"><h4>Random Article!</h4></button></a>
	</div>
	<form class="form-group" id="searchform">
	<input type="text" id="wikisearch" placeholder="Search Wikipedia"/>
	<div class="btn" id="exit">x</div>
	</div>
	</form>
	</div>


	</body>
	$(document).ready(function() {
	$("#glass").on("click", function(){
	$(".searchglass").hide(function() {
	$(".form-group").show("slow");
	});
	});

	$("#exit").on("click", function(){
	$(".form-group").hide(function() {
	$(".searchglass").show("slow");
	});
	});

	$('.form-group').submit(function() {
	//$("#searchdest").append($("#searchform"));
	var searchvalue = $("#wikisearch").val();
	var toSearch = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchvalue + "&callback=?";
	$(".search").html(toSearch);
	var html = "<ul>";
	$.getJSON(toSearch, function(json) {
	for (var i = 0 ; i <= json.length ; i++) {
	html += "<a href=" + json[3][i] + " target=" + json[3][i] + ">";
	html += "<div class='result'><li>" + json[1][i] + "</li>";
	html += "<p>" + json[2][i] + "</p></div></a>";
	}
	html += "</ul>";

	$(".search").css({'margin-top':'0'});
	//$("#searchform").append($("#searchdest"));
	//$("#searchform").detach().appendTo('#searchdest');
	$(".search").html(html);

	});
	});


	});
	html,
	body {
	margin: 0;
	padding: 0;
	font-weight: 200;
	font-family: "Helvetica";
	background-color: #37123C;
	color: #ff6b35;
	}

	.search {
	text-align: center;
	margin: 15% auto 20rem auto;
	}

	#glass {
	height: 10rem;
	width: 10rem;
	}

	#random {
	color: #ff6b35;
	border: 4px solid #ff6b35;
	border-radius: 0;
	background-color: transparent;
	}

	#random:hover {
	color: #37123C;
	border: 4px solid #37123C;
	background-color: #ff6b35;
	}

	.form-group {
	display: None;
	margin: 0 auto;
	}

	.form-group #wikisearch {
	background-color: transparent;
	padding: .5rem 15rem .5rem 1rem;
	border-radius: 15px;
	border: 4px solid #ff6b35;
	}

	.search ul {
	list-style-type: none;
	}

	.result li{
	font-size: 3rem;
	font-weight: 600;
	}

	.result {
	background-color: #B8C4BB;
	color: #505168;
	margin: 3em auto;
	max-width: 75%;
	border-radius: 5px;
	border: 4px solid #ff6b35;
	padding: 2rem;
	text-decoration: none;
	}

	.result:hover {
	background-color: #505168;
	color: #B8C4BB;
	}