blog status sample

by dekkard

HTML

<div id="blog">
		<h1>Blog post application</h1>
		<div id="post-system">	
			<textarea id="poster" placeholder="Update status."></textarea>
			<div id="button">Post</div>
			<div id="posts">
			</div>
		</div>					
		</div>

CSS

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

#blog {
	background-color: blue;
	margin: 50px;
	padding: 50px;
	text-align: center;
	border-radius: 10px;
	color: white;
	display: block;
}

#poster {
	color: default;
	resize: none;
	border: 1px solid black;
	text-decoration: blink;
	font-size: 20px;
	display: inline-block;
	position: relative;
	border-radius: 5px;
	border: 2px solid black;
	padding-left: 10px;
	padding-top: 5px;
    
    width: 100%;
}

#button {
	background-color: #00FFFF;
	color: white;
	border: 2px solid white;
	border-radius: 5px;
	cursor: pointer;
	width: 50px;
	float: left;
}

.post {
	background-color: white;
	color: blue;
	margin-top: 20px;
	width: auto;
	display: block;
}

.close-post {
	margin-right: 10px;
	float: right;
	color: red;
	cursor: pointer;
}

JavaScript

$(document).ready(function() {
			$('#button').click(function(event) {
                event.preventDefault();
				var text= $('#poster').val();
				if (text === '') {
					alert('Nothing to post!');
                    return;
				}
                
				$('#posts').prepend("<div class='post'>" + text + "<span class='close-post'>&times;</span></div>");
				$('#poster').val('');
			});
            
			$('#posts').on('click', '.close-post', function() {
				$(this).closest('.post').fadeOut();
			});
		});