Final Wiki :)

final-wiki.markdown

Final Wiki :)

A Pen by Luke Gresser on CodePen.

License.

index.html

<div class="body">
  <div class="search">
    <button class = 'btn'>
      <i class="fa fa-search fa-3x" aria-hidden="true"> Search Wikipedia</i>
    </button>
    
    <div class="search-field invisible">
      <input type="text" class = 'input-text ' placeholder = "Search Term">
      
      <button class = 'search-btn'>
        <i class="fa fa-search" aria-hidden="true"> Search</i>
      </button>
      <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" alt='a random article'>
        <button class = 'random-btn'>
          <i class="fa fa-random" aria-hidden="true"> Random</i>
        </button>
      </a>
    </div>
    
    
  </div>
  <div class="results">

    
  </div>
  
</div> <!-- .body -->

script.js

$(document).ready(function() {
//   this makes the input feild invisible
  $('.search-field').hide();
  $('.search-field').removeClass('invisible');
  
//   make search bar appear
  $('.btn').click(function() {
    $('.btn').hide();
    $('.search-field').fadeIn();
  });
  
  $('.search-btn').click(function() {
    var searchKey = $('.input-text').val();
    // Manipulate the text for search
    var searchArr = searchKey.split(' ');
    var joinedSearch = searchArr.join('_');
    
    var url =  "https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + joinedSearch + "&callback=?";
    var newUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ joinedSearch +"&format=json&callback=?"
    
    console.log(url);

    
    // Starts to create the result
    $(".results").html('<div>');
    var output = '';
    
    $.ajax({
      type:"GET",
      url:newUrl,
      asynch:false,
      dataType: "json",
      success: function(data) {
        for (i = 0; i < data[1].length; i ++) {
          output += "<a href = " + data[3][i] + " target = '_blank'>"
          output += "<div class = 'wikiItem'>";
            output += "<h2>";
              output += data[1][i];
            output += "</h2>";
            output += "<p>";
              output += data[2][i];
            output += "</p>";
          output += "</div>"; 
          output += "</a>"
        }
        // Appends results and closes div 
        $('.results').append(output);
        $('.results').append('</div>')
      },
      error: function(error) {
      console.log('Something went wrong.  I am sorry')
    }
    })
    
    // clears input field  Must be at end
    $('.input-text').val('');
  });
})

scripts

<script src="https://use.fontawesome.com/1c705c8f52.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

/* Backgorund */
body {
  background-color: rgb(13, 49, 107);
}

/* flexboxes */
.body {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

/* Burron before Search */
.btn {
/*   border/ button  */
  border : 1px solid rgb(250, 255, 119);
  border-radius:5px;
  padding: 25px;
  background: rgba(250, 255, 119, .9);
  color:rgba(13, 49, 107, .9);
}

.btn:hover {
  background:rgba(250, 255, 119, 1);
  color:rgba(13, 49, 107,.9);
}

/* Search field  */

.search-field {
  display:flex;
  flex-wrap:wrap;
}

.search-btn, .random-btn {
  margin-left: 5px;
  border : 1px solid rgb(250, 255, 119);
  border-radius:5px;
  padding: 7px;
  background: rgba(250, 255, 119, .9);
  color:rgba(13, 49, 107, .9); 
  font-size: 2em;
}

.search-btn:hover, .random-btn:hover {
  background:rgba(250, 255, 119, 1);
  color:rgba(13, 49, 107,.9);
}

.input-text {
  border-radius:5px;
  font-size: 2em;
}

.invisible {
  display:none
}

/* results */

.wikiItem {
  margin-top:5px;
  padding: 10px;
  border: 3px solid white;
  border-radius:10px;
  color:white;
}

.results {
  margin-top:10px;
  display:flex;
  flex-direction:column;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

This site searches Wikipedia and returns the results. You can click on one of the items and it will take you to the Wikipedia page for that button. This site was built as an assignment for Free Code Camp to learn how to use APIs with jQuery.