<body>
<div class='page container-fluid'>
<div id='header'>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#top">TW</a></li>
<li><a href="#page1">Tribute</a></li>
<li><a href="#page2">Random Quote</a></li>
<li class="dropdown">
<a href="#page3" class="dropdown-toggle" data-toggle="dropdown">Free Code Camp<b class = "caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#localWeather">Local Weather</a></li>
<li><a href="#wikipediaViewer">Wikipedia Viewer</a></li>
<li><a href="#twitchTV">twitchTV</a></li>
<li><a href="#javaScriptCalculator">JavaScript Calculator</a></li>
<li><a href="#pomodoroClock">Pomodoro Clock</a></li>
<li><a href="#ticTacToe">Tic Tac Toe</a></li>
<li><a href="#simonGame">Simon Game</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search" action="">
<div class="form-group">
<input type="text" class="form-control" id="searchTerm" placeholder="local search">
<a href="#top">
<button type="button" class="btn btn-default" id='search'>Submit</button>
</a>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a id='toggle'><span class="glyphicon glyphicon-heart"></span> things</a></li>
<li><a href="https://codepen.io/TurtleWolf/" target='blank'><span class="glyphicon glyphicon-user"></span>TurtleWolf</a></li>
</ul>
</div>
</nav>
</div>
<a id="top"></a>
<div class='spacer'></div>
<div class='block'>
<p align="left" id='output'>
</p>
</div>
</div>
<a id="page1"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='pageONE'>Tribute Page</span></h1>
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses
a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
words etc.</p>
</div>
<a id="page2"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='pageTWO'>Random Quote Machine</span></h1>
<p> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
line in section 1.10.32.</p>
</div>
<a id="localWeather"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place3'>Local Weather</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<a id="wikipediaViewer"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place4'>Wikipedia Viewer</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<a id="twitchTV"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place5'>Twitchtv JSON API</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<a id="javaScriptCalculator"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place6'>JavaScript Calculator</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<a id="pomodoroClock"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place7'>Pomodoro Clock</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<a id="ticTacToe"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place8'>Tic Tac Toe</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<a id="simonGame"></a>
<div class='subSpacer'></div>
<div class='block'>
<h1 class='text-center'><span id='place9'>Simon Game</span></h1>
<p> Lorem ipsum dolor sit amet, amet venenatis pede ipsum, ipsum ante vel suspendisse dignissim donec bibendum, aptent etiam convallis erat tristique est vel. Volutpat rhoncus fringilla leo suspendisse amet. Metus hendrerit porttitor ipsum fusce at,
sapien euismod, nec quis erat velit vivamus mi suscipit. Tortor ut eros magna in. Eu taciti, magna in mattis quisque donec, lectus lectus velit faucibus pede morbi. Eros et vitae aenean, curabitur ipsum interdum quis, blandit vestibulum fusce
velit gravida. Eu nisi. Tincidunt ut quam sit felis corporis et. Nunc in nulla pellentesque dignissim, morbi dolor vel gravida sed parturient vel, enim posuere.</p>
</div>
<div class='subSpacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
<div class='spacer'></div>
</div>
<!-- <div class='page container-fluid'> -->
<div class="navbar navbar-fixed-bottom followTag">
<a href="https://twitter.com/JonPohlner" class="twitter-follow-button" data-show-count="false">Follow</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<!-- link to My twitter account "floating Footer"-->
</body>
.block{
background-color:rgb(231, 166, 26);
background-color:rgba(231, 166, 26, .90);
color:purple;
padding: 35px;
padding-top:0;
padding-bottom:.25%;
width:75%;
margin-right:auto;
margin-left:auto;
border-radius:15px;
font-size:1.5em;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
-webkit-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
-moz-box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
box-shadow: inset 34px 28px 40px -19px rgba(0,0,0,0.89);
border:1px solid black
}
.spacer{
padding: 5%;
}
.subSpacer{
padding: 4%;
}
body{
background:no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p{
text-align: justify;
}
.followTag{
min-height:10px;
height: 21px;
}
var backgroundImg = [
'http://cdn.wallpapersafari.com/93/91/K41BiL.jpg',
'https://scontent-atl3-1.xx.fbcdn.net/v/t1.0-9/14432955_10205518595204188_875993167526698412_n.jpg?oh=e6f8ac6c0f464ad15f2dd4b74bccf4d5&oe=596CBDF7'
]; //Add more backgrounds to the array
var backgroundCount = 0;
$(function() {
$('body').css('background-image', 'url(' + backgroundImg[backgroundCount] + ')'); //allows a variable for changing background img based in an array, change number in [] to change background...
});
$('#toggle').on('click', function(){
backgroundCount++;
if (backgroundCount > backgroundImg.length - 1) backgroundCount = 0;
$('body').css('background-image', 'url(' + backgroundImg[backgroundCount] + ')');
});
$('.navbar-nav').on('click', 'li', function() {
$('.navbar-nav li.active').removeClass('active');
$(this).addClass('active');
});
$('.navbar-brand').on('click', function() {
$('.navbar-nav li.active').removeClass('active');
});
$('#search').click(function() {
var searchTerm = $('#searchTerm').val();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=42&search=" + searchTerm + "&callback=?";
console.log(url);
$.ajax({ //ajax call for JSON data see console log data wiki API method for retreiving data, doesn't automatically spit back JSON without an AJAX call
type: "GET",
url: url,
async: false,
dataType: "json",
success: function(data) {
console.log(url);
console.log(data[1][0]);//search term
console.log(data[2][0]);//search description, 1st result
console.log(data[3][0]);//address of 1st result
$('#output').html(''); //clears all data prior to running/re-running for loop
for (var i = 0; i < data[1].length; i++) {
$('#output').append("<a name='page" + i +"' href=" + data[3][i] + " target='blank'><h1>" + data[1][i] + "</h1></a>" + "<h3>" + data[2][i] + "</h3><br>");
}
},
error: function(errorMessage) {
alert("Error");
},
});
});
