I have created a mock twitter website that is supposed to generate more tweets once a button is clicked. I have created the button which is appended to the main section of the site but it seems that once it is clicked absolutely nothing happens. I have looked this over and over again making sure that my code is correct but I am afraid that I am just missing something. below is a my JQuery and CSS.
JQuery:
$(document).ready(function(){
var $body = $('body');
var $section = $('.main');
$section.html('');
//Returns a div with a time stamp for the tweet
var createdTime = function(tweet){
return $('<div>', {text: tweet.created_at, id: 'dT'}).prop('outerHTML');
};
//Returns the @handle as a link of the user who tweeted
var userName = function(tweet){
return $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML') + '<br />' + '@' + tweet.user;
};
// simply returns the users tweeted message
var tweetContent = function(tweet){
return tweet.message;
};
var index = streams.home.length - 1;
// A function that generates new tweets
var newTweets = function(index){
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class=tweet></div>');
//call to outside function to populate tweets
$tweet.html(userName(tweet) + ': ' + tweetContent(tweet) + createdTime(tweet));
$tweet.appendTo($section);
index -= 1;
}
}
newTweets(index);
//Adds a user image to tweet
$('.tweet').prepend('<img id=tweetImg src=images/blank-user.jpg />');
//button created to generate more tweets after page has loaded
var $button = $('<button />', {
type: 'button',
'class':'tweetButton',
id: 'mT',
text: 'More Tweets',
click: function(){
index = streams.home.length-1;
newTweets(index);
alert('I work!');
}
});
$button.appendTo($section);
});
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body{
background-color: #D7DADB;
font-family: 'Asar', serif;
position: relative;
}
/*
========================================
Header
========================================
*/
nav{
display: inline-block;
height: 28px;
top: 0px;
width: 100%;
position: fixed;
background-color: #6DBCDB;
border-bottom: 2px solid #F1433F;
}
a,
nav{
padding: 15px;
color: #FFFFFF;
}
/*
========================================
Typography
========================================
*/
/*
========================================
Button
========================================
*/
button{
width: 300px;
height: 60px;
margin: 10px auto 100px auto;
background-color: #F1433F;
border: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
font-family: 'Asar', serif;
font-size: large;
font-style: oblique;
font-weight: 700;
color: #FFFFFF;
}
.tweetButton{
}
.search{
position: relative;
float: right;
right: 20px;
}
#srchFrm{
height: 20px;
width:170px;
padding-left: 10px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #D7DADB;
font-family: 'Asar', serif;
}
#srchBtn{
height: 25px;
width: 80px;
position: relative;
right: 4px;
border: none;
border-bottom-right-radius: 30px;
border-top-right-radius: 30px;
background-color: #F1433F;
font-family: 'Asar', serif;
color: #FFFFFF;
}
/*
========================================
Imgages
========================================
*/
#network{
position: relative;
height: 60px;
width: 60px;
left: 50%;
transform: translateX(-50%);
transform: translateY(-70%);
}
/*
========================================
User
========================================
*/
aside{
position: fixed;
clear: both;
float: left;
height: inherit;
width:300px;
margin: 0 0 0 10px;
background: linear-gradient(#2C3E50,#415B75,#6DBCDB, #EEEEEE);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
text-align: center;
}
a{
text-decoration: none;
margin-bottom: 0;
}
a:hover{
text-decoration: none;
background-color: #F1433F;
}
#user-pic{
clear:both;
border-radius: 50%;
height: 150px;
width: 150px;
padding: 20px;
}
#trend{
color: #FFFFFF;
text-align: center;
height: 400px;
width: 270px;
margin-top: 15px;
padding: 15px;
border-top: 1px solid #F1433F;
}
/*
========================================
Main
========================================
*/
.container{
margin-top: 80px;
}
/*
========================================
Middle Content
========================================
*/
section{
position: relative;
margin: auto;
width: 400px;
z-index: -1;
}
.main{
background-color: #D7DADB;
}
/*
========================================
Tweet Box
========================================
*/
#tweetImg{
height: 75px;
width: 75px;
border-radius: 5px;
}
.tweet a{
font-size: large;
text-decoration: none;
color: black;
}
.tweet a:hover{
text-decoration: underline;
background-color: transparent;
color: gray;
}
.tweet{
position: relative;
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
#dT{
width:inherit;
position: absolute;
bottom: 0px;
border-top: 1px solid gray;
background-color: #FFFFFF;
font-size: small;
}