cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="jumbotron wiki1">
  <div class="container">
    <div class="row">
      <div class="col-md-12 center">
        <h1>The Great and Powerful Wiki&nbsp;Tiki</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3" id="tiki-image">
        <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><img src="http://www.mikemorkes.com/codepen/wiki/tiki2.png" class="img-responsive img-restraint" alt="The Great and Powerful Wiki Tiki"></a>
        <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><img src="http://www.mikemorkes.com/codepen/wiki/tiki-rect2.png" class="img-responsive tiki-rect" alt="The Great and Powerful Wiki Tiki"></a>       
      </div>
      <div class="col-sm-9" id="form-section">
        <form class="topper2" id="wiki-form">
          <div class="form-group">
            <input type="text" placeholder="Enter your query here, puny mortal!" class="form-control input-lg" id="submission">
          </div>
          <button type="submit" class="btn btn-lg btn-danger btn-width" id="submit">I humbly submit my query, great Wiki Tiki!</button>

        </form>
      </div>
    </div>
  </div>
</div>

<!-- search results here -->

<!-- this section hidden on load, displays when search button clicked-->
<div class="container wiki2" id="wiki2">
  
  <!-- this section will be wiped with the clear button-->
  <div class="row" id="results-row">
    <div class="col-md-12">
      <div class="row" id="row1">
      <!-- results dropped here -->
      </div>
      <div class="row" id="row2">
      <!-- results dropped here -->
      </div>
      <div class="row" id="row3">
      <!-- results dropped here -->
      </div>      
    </div>
  </div>
  
  <!-- clear button-->
  <div class="row center">
    <button type="submit" class="btn btn-lg btn-danger btn-width topper" id="clear">Remove your unworthy results, mortal!</button>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Freckle+Face|Inika:400,700);

input:focus,
I select:focus,
textarea:focus,
button:focus {
	outline: none !important;
}

body {
  background: #ffcc33 url("http://www.mikemorkes.com/codepen/wiki/wiki_bkgd2.png") no-repeat fixed bottom left / cover;
  font-family: 'Inika', serif;
  font-weight: normal;
}

h1 {
  font-family: 'Freckle Face', cursive;
  color: #773311 !important;
}

.submit-btn {
    font-family: 'Freckle Face', cursive;
  font-size: 30px !important;
}

.center {
  text-align: center;
}

.topper {
  margin-top: 25px;
}

.topper2 {
  margin-top: 55px;
}

.wiki1 {
  background: #ffcc33 url("http://www.mikemorkes.com/codepen/wiki/wiki_bkgd1.png") no-repeat fixed top left / cover;
}

.wiki2 {
  color: #fff;
  display: none;
}

.random {
  background: #773311 !important;
  border: 1px solid #773311;
}

.random:hover {
  background: #471f0a !important;
  border: 1px solid #471f0a;
}

.btn-width {
  width: 100%;
  min-width: 360px;
  font-size: 15px;
}

@media only screen and (max-width:767px) {
  .img-restraint {
    display: none;
  }
}

@media only screen and (min-width:768px) {
  .tiki-rect {
    display: none;
  }
}

#clear {
  margin-bottom: 30px;
}
            
          
!
            
              // slide in animations
$(document).ready(function() {
  $(".wiki2").addClass("animated slideInUp");
  $(".jumbotron").addClass("animated slideInDown");

});

//submit button stuff
$('#submit').click(function(evt) {

  evt.preventDefault();

  // clear out any pre-existing content in case the user didn't hit the reset button first  
  document.getElementById("wiki2").style.display = "none";

  document.getElementById("results-row").innerHTML = '<div class="col-md-12"><div class="row" id="row1"><!-- results dropped here --></div><div class="row" id="row2"><!-- results dropped here --></div><div class="row" id="row3"><!-- results dropped here --></div></div>';

  //grab text from form
  var submissionText = document.getElementById('submission').value;

  if (submissionText === "") {
    document.getElementById("results-row").innerHTML = '<div class="col-md-12"><div class="row" id="row1"><h2 id="articleHead">Do not anger the Great Tiki by forgetting to type your query, mortal!</h2></div><div class="row" id="row2"><!-- results dropped here --></div><div class="row" id="row3"><!-- results dropped here --></div></div>';

    document.getElementById("wiki-form").reset();
  }

  //grab json data
  $.getJSON("https://en.wikipedia.org/w/api.php/?action=opensearch&search=" + submissionText + "&limit=9&namespace=0&format=json&callback=?", function(result) {
      if (result[1][0] === undefined && submissionText !== "") {
        document.getElementById("results-row").innerHTML = '<div class="col-md-12"><div class="row" id="row1"><h2 id="articleHead">Your pathetic query produced no results!</h2></div><div class="row" id="row2"><!-- results dropped here --></div><div class="row" id="row3"><!-- results dropped here --></div></div>';
      }

      //loop to grab data for results for first row
      for (a = 0; a <= 2; a++) {
        if (result[1][a] === undefined) { //hide the div if we run out of results
          $("#row1").append('<div class="col-md-4"></div>');
        } else if (result[2][a] === "") { //add placeholder text if summary is empty
          $("#row1").append('<div class="col-md-4"> <h2 id="articleHead">' + result[1][a] + '</h2> <p id="articleSummary1">No summary available.</p> <p id="articleLink1"><a class="btn btn-warning" href="' + result[3][a] + '" role="button">View Article</a></p> </div>');
        } else {
          $("#row1").append('<div class="col-md-4"> <h2 id="articleHead">' + result[1][a] + '</h2> <p id="articleSummary1">' + result[2][a] + '</p> <p id="articleLink1"><a class="btn btn-warning" href="' + result[3][a] + '" role="button">View Article</a></p> </div>');
        }
      }

      //loop to grab data for results for second row
      for (b = 3; b <= 5; b++) {
        if (result[1][b] === undefined) { //hide the div if we run out of results
          $("#row2").append('<div class="col-md-4"></div>');
        } else if (result[2][b] === "") { //add placeholder text if summary is empty
          $("#row2").append('<div class="col-md-4"> <h2 id="articleHead">' + result[1][b] + '</h2> <p id="articleSummary1">No summary available.</p> <p id="articleLink1"><a class="btn btn-warning" href="' + result[3][b] + '" role="button">View Article</a></p> </div>');
        } else {
          $("#row2").append('<div class="col-md-4"> <h2 id="articleHead">' + result[1][b] + '</h2> <p id="articleSummary1">' + result[2][b] + '</p> <p id="articleLink1"><a class="btn btn-warning" href="' + result[3][b] + '" role="button">View Article</a></p> </div>');
        }
      }

      //loop to grab data for results for third row
      for (c = 6; c <= 8; c++) {
        if (result[1][c] === undefined) { //hide the div if we run out of results
          $("#row3").append('<div class="col-md-4"></div>');
        } else if (result[2][c] === "") { //add placeholder text if summary is empty
          $("#row3").append('<div class="col-md-4"> <h2 id="articleHead">' + result[1][c] + '</h2> <p id="articleSummary1">No summary available.</p> <p id="articleLink1"><a class="btn btn-warning" href="' + result[3][c] + '" role="button">View Article</a></p> </div>');
        } else {
          $("#row3").append('<div class="col-md-4"> <h2 id="articleHead">' + result[1][c] + '</h2> <p id="articleSummary1">' + result[2][c] + '</p> <p id="articleLink1"><a class="btn btn-warning" href="' + result[3][c] + '" role="button">View Article</a></p> </div>');
        }
      }
    }) //end JSON stuff

  //display results block
  document.getElementById("wiki2").style.display = "block";

});

//clear button stuff
$('#clear').click(function(evt) {

  evt.preventDefault();

  document.getElementById("wiki2").style.display = "none";

  document.getElementById("results-row").innerHTML = '<div class="col-md-12"><div class="row" id="row1"><!-- results dropped here --></div><div class="row" id="row2"><!-- results dropped here --></div><div class="row" id="row3"><!-- results dropped here --></div></div>';

  document.getElementById("wiki-form").reset();

})
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console