Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 18, 2015 14:28
Show Gist options
  • Save anonymous/71a3a9f2f7578d70afae to your computer and use it in GitHub Desktop.
Save anonymous/71a3a9f2f7578d70afae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet" type="text/css">
<link href="style.css" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<style id="jsbin-css">
html,
body {
color: #404040;
background-color: #eee;
}
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
.container {
width: 520px;
margin-top: 20px;
}
.card .card-image .card-title {
position: absolute;
bottom: 30px;
left: 0;
padding: 20px;
z-index: 9999999!important;
font-size: xx-large;
}
.card.small {
height: 150px!important;
}
.button-group {
margin-bottom: 20px;
}
.title {
color: white;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.input-field.col.s12 {
margin-top: 30px;
position: relative;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
.space {
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="card small">
<div class="card-image">
<span class="card-title">Material Design | Comments</span>
<img src="http://www.androidguys.com/wp-content/uploads/2014/11/image_new-11.png">
</div>
</div>
</div>
</div>
<div class="container z-depth-3">
<div class="row">
<form class="col s12 space">
<div class="form-group">
<div class="input-field col s12">
<i class="mdi-editor-mode-edit prefix"></i>
<textarea id="icon_prefix2" class="form-control status-box materialize-textarea"></textarea>
<label for="icon_prefix2">What's on your mind?</label>
</div>
<div class="button-group pull-right">
<p class="counter badge">140</p>
<a href="#" class="btn btn-flat">Post</a>
</div>
<ul class="posts collection">
</ul>
</div>
</form>
</div>
</div>
<div id="logged"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
<script id="jsbin-javascript">
var main = function() {
$('.btn').click(function(){
var post = $('.status-box').val();
$('<li class="collection-item">').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text("140");
$('.btn').addClass('btn-flat disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if (charactersLeft < 0){
$('.btn').addClass('btn-flat disabled');
} else if (charactersLeft == 140) {
$('.btn').addClass('btn-flat disabled');
} else {
$('.btn').removeClass('disabled');
}
});
$('.btn').addClass('btn-flat disabled');
};
$(document).ready(main);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"><\/script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"><\/script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet" type="text/css">
<link href="style.css" rel="stylesheet">
<\!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<\!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"><\/script>
</head>
<body>
<div class="container">
<div class="row">
<div class="card small">
<div class="card-image">
<span class="card-title">Material Design | Comments</span>
<img src="http://www.androidguys.com/wp-content/uploads/2014/11/image_new-11.png">
</div>
</div>
</div>
</div>
<div class="container z-depth-3">
<div class="row">
<form class="col s12 space">
<div class="form-group">
<div class="input-field col s12">
<i class="mdi-editor-mode-edit prefix"></i>
<textarea id="icon_prefix2" class="form-control status-box materialize-textarea"></textarea>
<label for="icon_prefix2">What's on your mind?</label>
</div>
<div class="button-group pull-right">
<p class="counter badge">140</p>
<a href="#" class="btn btn-flat">Post</a>
</div>
<ul class="posts collection">
</ul>
</div>
</form>
</div>
</div>
<div id="logged"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>
<script src="app.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html,
body {
color: #404040;
background-color: #eee;
}
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
.container {
width: 520px;
margin-top: 20px;
}
.card .card-image .card-title {
position: absolute;
bottom: 30px;
left: 0;
padding: 20px;
z-index: 9999999!important;
font-size: xx-large;
}
.card.small {
height: 150px!important;
}
.button-group {
margin-bottom: 20px;
}
.title {
color: white;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.input-field.col.s12 {
margin-top: 30px;
position: relative;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
.space {
padding: 15px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
var main = function() {
$('.btn').click(function(){
var post = $('.status-box').val();
$('<li class="collection-item">').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text("140");
$('.btn').addClass('btn-flat disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if (charactersLeft < 0){
$('.btn').addClass('btn-flat disabled');
} else if (charactersLeft == 140) {
$('.btn').addClass('btn-flat disabled');
} else {
$('.btn').removeClass('disabled');
}
});
$('.btn').addClass('btn-flat disabled');
};
$(document).ready(main); </script></body>
</html>
Raw
jsbin.zuzewo.css
html,
body {
color: #404040;
background-color: #eee;
}
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}
.container {
width: 520px;
margin-top: 20px;
}
.card .card-image .card-title {
position: absolute;
bottom: 30px;
left: 0;
padding: 20px;
z-index: 9999999!important;
font-size: xx-large;
}
.card.small {
height: 150px!important;
}
.button-group {
margin-bottom: 20px;
}
.title {
color: white;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.input-field.col.s12 {
margin-top: 30px;
position: relative;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
.space {
padding: 15px;
}
Raw
jsbin.zuzewo.js
var main = function() {
$('.btn').click(function(){
var post = $('.status-box').val();
$('<li class="collection-item">').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text("140");
$('.btn').addClass('btn-flat disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if (charactersLeft < 0){
$('.btn').addClass('btn-flat disabled');
} else if (charactersLeft == 140) {
$('.btn').addClass('btn-flat disabled');
} else {
$('.btn').removeClass('disabled');
}
});
$('.btn').addClass('btn-flat disabled');
};
$(document).ready(main);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment