Skip to content

Instantly share code, notes, and snippets.

@saske505

saske505/index.html

Forked from anonymous/index.html
Last active August 29, 2015 14:21
Show Gist options
  • Save saske505/319d4d50697b1751793b to your computer and use it in GitHub Desktop.
Save saske505/319d4d50697b1751793b 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