Javabob61/index.html

## index.html
<head>
</head>

<body>
  <div id="myDiv" class="container-fluid">
    <h1> Wikipedia API search project</h1>
    <img id="einstein" class="img-responsive" src="https://lh3.googleusercontent.com/QCSuY4SdwUFZPutAGkYBVcyILnR-ZmiQs1jDE9lB-DLLgujxlCOtNE1jUR13rVMOCcIlEQGkDtwXgMNW74Gx09UbmYNQoNYwm3G2KJbXUEI5D8qeyB4yNUqqHhrNW87VyElT-wEZZ8AvNyuTRYT0yRIO3hdZkdYaPoCWYqLyZb0cGZI5EN6IGyXeVSkWN3sroAMmu9PntHp3bepYptCUW7DwqZSuQz-olHac-F5MA7hAwi0mBe2XzXtl87X-bANyYcQJ4uzVZEEL4llBiFYh5F4mx19p4MHzWBehwvaMjEUU-orNNxcm0DbfIm3SPECELAjKlLweE2ZYXTMQyX2dYcv6RTJVOxTQbfIA6Z--BJTrqctz-g6jdulEWIxf7AapgyLzRXKJJ6pbQCydFp3khlwqPi5QH8UBtcDjPKBgwxvEmy9InoSZVTHASGCCnL8pK9Tr_zjMG4k0_bHKue7bRdPzIrhManfVfz285aq0UsOIPkf-JiFe_APm3Z6eXX-4zOyZQAVWQTPzf9HKNLJdL64xcjaanHgFOGMmDi1NT0eS6YTcvdy28cAEVA3hByp8DAvIxCZ4PfLUibXP_E_fB8sQSla_Tv7Rdl4nNMtmwAqfRNsEUQYYtGQ7YkuqWISfb2z4h064ULbTyxcwqR2hBOjAypMdwFC3=w866-h592-no"
      alt="Chania"></img>

    <div class="row">
      <div class="col-sm-4" style="background-color:black;"></div>
      <div class="col-sm-4" style="background-color:black;">
        <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">

 <img id="thinker" src="https://lh3.googleusercontent.com/0yEa8m_LZXqOOUYCi80WG-bcOKqeASLklFDFkXyyU2zAcziBuSItrLwHmyEcRUxHDb0_gxKkbKOzX9Tlw2nklSDqhUZykp88RmEqJ_57cB7Xow6Od8saPhQ7kljyBbOGHnm-Yks5eIulBnp5iddQAJDCdAsWliKTEfOQBXTQWe2dM9TVTFv0uP9DxVjVcPOMUwq73ZtkKResT2k7vbsIqhOl5b7CLNbiKFEz-_I_nst3tuJOiYOUu_WL7-ldTsIDyE5Z8A1LomV9cNN1LXLUqSDAnNZOr55Yhw0B5VgwrWZCTKBs_QGs2R61l-jpUmXJwoCKZIb5QYQK7weoIwkuIkwsdIrkX00gG37WCa_5kGCsZzPRB2uLTspWJKC9qrSqIwTut_UXLetucHVmI7c_rZepOVs0JSuy5j3qm4mvpdG3n0j3cPWJDNeKq4kEWfGhJgMMKGqHuCl6NHF8h0ic9EsmhkOKBJ4rUWRaSlAwn_-uKqURIGl-2diJhNcoms1N7fUpjumCzYq2Qqdym9K8m0KKRdNg2Pn9qyr0MDErOtOnf_9_4moVaE0PAHCT1Iz2rWnHt6Ry4e3480VyoQeW3h95wciUvZtDglHKif8em3ECmANcsYeXfpPQr3OuhpW5V5Xu-Lfphjdq5GCYEy-wufc2QHWHmPUk=w641-h745-no" alt="">
</a>
        <p id="instructions">Click on the thinker for a surprise!</p>

        <div id="myForm" class="form-group">
          <label form="usr">Enter search here:</label>
          <input class="form-control " id="searchTerm">
          <button id="search" type="button" class="btn btn-primary">Search</button>
          <ul id="output">
          </ul>
        </div>
      </div>
      <div class="col-sm-4" style="background-color:black;"></div>
    </div>
  </div>
</body>

## script.js
$(document).ready(function() {  // Start of jquery function.

  $('#search').click(function() { // When search button is clicked run code.

    var searchTerm=$('#searchTerm').val(); // Set var = form input.

    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&limit=5&callback=?";
    // limit = # of results.

    /* Using AJAX function within jquery. Both methods work, but this style of code is longer and unnecessary here.

        $.ajax( {
        url: url,
        dataType: 'json',
        type: 'GET',
        async: 'false',
        success: function(data) {

          $('#output').html("");  // clears output from previous search.

          for (var i = 0; i < data[1].length; i++) {
              $('#output').prepend("<li><a href= " + data[3][i] +">" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>");
            }
        },
        error: function (errorMessage) {
            alert("error");
        }
      });   */

        $.getJSON(url, function(data) {
              $('#output').html("");  // clears output from previous search.
          for (var i = 0; i < data[1].length; i++) {
              $('#output').prepend("<li><a href= " + data[3][i] +">" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>");
            }
         });
  });
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>

## style.css
body {
  color: white;
  background-color: black;
}
h1 {
  text-align: center;
}

#einstein {
 width: 100%;
}

#thinker {
  position: absolute;
  width: 10%;
  top: 20%;
  left: 50%;
}

#instructions {
  position: absolute;
  color: white;
  top: 50%;
  left: 46%;
}

#myForm {
  position: absolute;
  color: white;
  top: 60%;
  left: 40%;
}


## wikipedia-viewer.markdown

      
    Raw
  

              wikipedia-viewer.markdown
            
          
    Wikipedia viewer

A Pen by Robert Van Housen on CodePen.
License.
	<head>
	</head>

	<body>
	<div id="myDiv" class="container-fluid">
	<h1> Wikipedia API search project</h1>
	<img id="einstein" class="img-responsive" src="https://lh3.googleusercontent.com/QCSuY4SdwUFZPutAGkYBVcyILnR-ZmiQs1jDE9lB-DLLgujxlCOtNE1jUR13rVMOCcIlEQGkDtwXgMNW74Gx09UbmYNQoNYwm3G2KJbXUEI5D8qeyB4yNUqqHhrNW87VyElT-wEZZ8AvNyuTRYT0yRIO3hdZkdYaPoCWYqLyZb0cGZI5EN6IGyXeVSkWN3sroAMmu9PntHp3bepYptCUW7DwqZSuQz-olHac-F5MA7hAwi0mBe2XzXtl87X-bANyYcQJ4uzVZEEL4llBiFYh5F4mx19p4MHzWBehwvaMjEUU-orNNxcm0DbfIm3SPECELAjKlLweE2ZYXTMQyX2dYcv6RTJVOxTQbfIA6Z--BJTrqctz-g6jdulEWIxf7AapgyLzRXKJJ6pbQCydFp3khlwqPi5QH8UBtcDjPKBgwxvEmy9InoSZVTHASGCCnL8pK9Tr_zjMG4k0_bHKue7bRdPzIrhManfVfz285aq0UsOIPkf-JiFe_APm3Z6eXX-4zOyZQAVWQTPzf9HKNLJdL64xcjaanHgFOGMmDi1NT0eS6YTcvdy28cAEVA3hByp8DAvIxCZ4PfLUibXP_E_fB8sQSla_Tv7Rdl4nNMtmwAqfRNsEUQYYtGQ7YkuqWISfb2z4h064ULbTyxcwqR2hBOjAypMdwFC3=w866-h592-no"
	alt="Chania"></img>

	<div class="row">
	<div class="col-sm-4" style="background-color:black;"></div>
	<div class="col-sm-4" style="background-color:black;">
	<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">

	<img id="thinker" src="https://lh3.googleusercontent.com/0yEa8m_LZXqOOUYCi80WG-bcOKqeASLklFDFkXyyU2zAcziBuSItrLwHmyEcRUxHDb0_gxKkbKOzX9Tlw2nklSDqhUZykp88RmEqJ_57cB7Xow6Od8saPhQ7kljyBbOGHnm-Yks5eIulBnp5iddQAJDCdAsWliKTEfOQBXTQWe2dM9TVTFv0uP9DxVjVcPOMUwq73ZtkKResT2k7vbsIqhOl5b7CLNbiKFEz-_I_nst3tuJOiYOUu_WL7-ldTsIDyE5Z8A1LomV9cNN1LXLUqSDAnNZOr55Yhw0B5VgwrWZCTKBs_QGs2R61l-jpUmXJwoCKZIb5QYQK7weoIwkuIkwsdIrkX00gG37WCa_5kGCsZzPRB2uLTspWJKC9qrSqIwTut_UXLetucHVmI7c_rZepOVs0JSuy5j3qm4mvpdG3n0j3cPWJDNeKq4kEWfGhJgMMKGqHuCl6NHF8h0ic9EsmhkOKBJ4rUWRaSlAwn_-uKqURIGl-2diJhNcoms1N7fUpjumCzYq2Qqdym9K8m0KKRdNg2Pn9qyr0MDErOtOnf_9_4moVaE0PAHCT1Iz2rWnHt6Ry4e3480VyoQeW3h95wciUvZtDglHKif8em3ECmANcsYeXfpPQr3OuhpW5V5Xu-Lfphjdq5GCYEy-wufc2QHWHmPUk=w641-h745-no" alt="">
	</a>
	<p id="instructions">Click on the thinker for a surprise!</p>

	<div id="myForm" class="form-group">
	<label form="usr">Enter search here:</label>
	<input class="form-control " id="searchTerm">
	<button id="search" type="button" class="btn btn-primary">Search</button>
	<ul id="output">
	</ul>
	</div>
	</div>
	<div class="col-sm-4" style="background-color:black;"></div>
	</div>
	</div>
	</body>
	$(document).ready(function() { // Start of jquery function.

	$('#search').click(function() { // When search button is clicked run code.

	var searchTerm=$('#searchTerm').val(); // Set var = form input.

	var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&limit=5&callback=?";
	// limit = # of results.

	/* Using AJAX function within jquery. Both methods work, but this style of code is longer and unnecessary here.

	$.ajax( {
	url: url,
	dataType: 'json',
	type: 'GET',
	async: 'false',
	success: function(data) {

	$('#output').html(""); // clears output from previous search.

	for (var i = 0; i < data[1].length; i++) {
	$('#output').prepend("<li><a href= " + data[3][i] +">" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>");
	}
	},
	error: function (errorMessage) {
	alert("error");
	}
	}); */

	$.getJSON(url, function(data) {
	$('#output').html(""); // clears output from previous search.
	for (var i = 0; i < data[1].length; i++) {
	$('#output').prepend("<li><a href= " + data[3][i] +">" + data[1][i] + "</a><p>" + data[2][i] + "</p></li>");
	}
	});
	});
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
	body {
	color: white;
	background-color: black;
	}
	h1 {
	text-align: center;
	}

	#einstein {
	width: 100%;
	}

	#thinker {
	position: absolute;
	width: 10%;
	top: 20%;
	left: 50%;
	}

	#instructions {
	position: absolute;
	color: white;
	top: 50%;
	left: 46%;
	}

	#myForm {
	position: absolute;
	color: white;
	top: 60%;
	left: 40%;
	}