Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
<meta name="description" content="threadly">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!-- <link rel="stylesheet" href="style.css"/> -->
</head>
<body>
    <header class="header">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-12">
                    <h1>threadly</h1>
                </div>
            </div>
        </div>
    </header>
​
    <div class="main">
        <div class="container">
            <div class="row">
                <form class="form">
                    <div class="col-xs-8 col-md-10">
                        <input id="comment" type="text" placeholder="share your thoughts"/>
                    </div>
                    <div class="col-xs-4 col-md-2">
                        <button type="submit" class="btn">post</button>
                    </div>
                </form>
            </div>
​
            <ul class="comments" id="comments">
                <li>Have you felt it?</li>
                <li>There has been an awakening.</li>
            </ul>
​
        </div>
    </div>
​
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <!-- <script src="script.js"></script> -->
​
</body>
​
 
html, body {
    font-family: 'Montserrat', sans-serif;
}
​
h1 {
    border-left: 2px solid #00f28f;
    font-size: 48px;
    font-weight: 400;
    padding-left: 20px;
}
​
.main {
    margin-top: 80px;
}
​
form input {
    background: #f0f0f0;
    border: none;
    border-left: 2px solid #fff;
    font-size: 36px;
    padding: 20px;
    width: 100%;
    transition: background 2s, border-left 2s;
}
​
form input:focus {
    background: #fff;
    border-left: 2px solid #000;
    box-shadow: none;
    outline: none;
}
​
button.btn {
    background: transparent;
    border: none;
    color: #00f28f;
    cursor: pointer;
    font-size: 36px;
    padding: 20px 24px;
    transition: background 2s, color 2s;
}
​
button.btn:hover {
    background: #00f28f;
    color: #fff;
}
​
.comments {
    margin-top: 20px;
    list-style: none;
    padding-left: 0px;
}
​
li {
    padding-left: 20px;
    border-left: 2px solid #000;
    font-size: 36px;
    margin: 0 0 36px;
}
​
 
var main = function() {
​
    $('form').submit(function(event) {
        var $input = $(event.target).find('input');
        var comment = $input.val();
        if (comment !== "") {
            var html = $('<li>').text(comment);
            html.prependTo('#comments');
            $input.val("");
        }
        return false;
    });
​
};
​
$(document).ready(main);
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pbenkepro
0viewers