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 charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header class="header container">
            <h1 class="header-title">CEEP</h1>
            <nav class="header-menu">
                <ul>
                    <li class="header-button">
                        <a href="">Linhas</a>
                    </li>
                    <li class="header-button">
                        <a href="">?</a>
                    </li>
                </ul>
            </nav>
        </header>
​
        <form action="" class="newCard">
            <textarea class="newCard-content" cols="30" rows="10" placeholder="asd"></textarea>
            <input type="submit" class="newCard-action"
                    value="Salvar">
        </form>
​
        <section class="container">
            <ol>
                <li class="card" data-color="first">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                            
                            <li class="card-options isActive" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options"data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>                            
                        </ul>
                    </nav>
                        <p class="card-content" contenteditable="false">
                            item de lista 1. Que deveria ter alguma coisa e pronto!!!
                        </p>
                    </li>
                <li class="card" data-color="second">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                             
                            <li class="card-options" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options isActive" data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>   
                        </ul>
                    </nav>                
                    <p class="card-content" contenteditable="false">
                    item de lista 2. Pois é fi. Este é o segundo. Grandes.
                    </p>
​
                </li>
                <li class="card" data-color="third">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                             
                            <li class="card-options" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options"data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options isActive" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>   
                        </ul>
                    </nav>                
                <p class="card-content" contenteditable="false">
                item de lista 3. E não tem nada demais.
                </p>
​
                </li>
                <li class="card" data-color="fourth">
                    <nav class="wrap-card-options">
                        <ul>
                            <li class="card-options card_delete">
                                <a href="">Excluir</a>
                            </li>
                            <li class="card-options card_edit">
                                <a href="">Editar</a>
                            </li>                             
                            <li class="card-options" data-color="first">
                                <a href="">Azul</a>
                            </li>
                            <li class="card-options"data-color="second">
                                <a href="">Vermelha</a>
                            </li>
                            <li class="card-options" data-color="third">
                                <a href="">Verde</a>
                            </li>
                            <li class="card-options isActive" data-color="fourth">
                                <a href="">Amarela</a>
                            </li>   
                        </ul>
                    </nav>                
                <p class="card-content" contenteditable="false">
                item de lista 4. Acabou.
                </p>
                </li>
            </ol>
        </section>
</body>
</html>
 
* {
    margin: 0;
    border: 0;
    padding: 0;
    outline: none;
}
​
body, textarea {
    font-family: 'verdana', 'sans-serif';
}
​
a {
    color: inherit;
    text-decoration: none;
}
​
ul, ol, li {
    list-style: none;
}
​
.header {
    background-color: #0082C7;
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}
​
.header-title {
    color: #B3DAEE;
    display: inline;
    vertical-align: middle;
}
​
.header-menu {
    float: right;
}
​
.header-button:first-child {
    margin-right: 15px;
}
​
.header-button {
    background-color: #006195;
    font-size: 16px;
    color: #FFF;
    box-sizing: content-box;
    height: 22px;
    padding: 8px;
    display: inline-block;
}
​
.container {
    padding: 0 10%;
}
​
.error {
    display: block;
    color: red;
    text-align: center;
}
​
​
.card {
    display: inline-block;
    box-sizing: border-box;
    padding: 16px;
    width: 25%;
    position: relative;
}
​
.wrap-card-options {
    position: absolute;
    top: -16px;
    left: 0px;
    opacity: 0;
    transition: opacity 0.25s linear;
}
​
.card:hover .wrap-card-options {
    opacity: 1;
}
​
.card-options {
    background-color: white;
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    text-indent: -9999999px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
​
.card-options.isActive {
    border-width: 4px;
}
​
.card_delete {
    background-image: url(../images/X_solid_black_25.gif);
    background-size: 65%;
    margin-right: 5px;
}
​
.card_edit {
    background-image: url(../images/edit.png);
    background-size: 60%;    
}
​
.card-content[contenteditable="true"] {
    outline: 2px dashed rgba(0, 0, 0, 0.5);
}
​
[data-color="first"] {
    background-color: #45AAEE; /* Azul */
}
​
[data-color="second"] {
    background-color: #FF1010; /* Vermelha */
}
​
[data-color="third"] {
    background-color: #76EF40; /* Verde */
}
​
[data-color="fourth"] {
    background-color: #EBEF40; /* Amarela */
}
​
​
​
.newCard {
    background-color: darkgrey;
    padding: 25px 125px;
    margin-bottom: 30px;
}
​
.newCard-content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;    
    width: 560px;
    height: 24px;
    padding: 5px;
    border: 1px;
    transition: height 0.3s linear,
                border 0.5s linear;
}
​
.newCard-content:focus {
    height: 100px; /*só faltou os PX aqui*/
    border: 2px solid green;
}
​
.newCard-action {
    display: block;
    font-size: 16px;
    width: 90px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    background-color: #8272C7;
    cursor: pointer;
    margin-top: 20px;
}
​
​
​
 
var $newCard = document.querySelector('.newCard');
var $newCardContent = document.querySelector('.newCard-content');
var $newCardAction = document.querySelector('.newCard-action');
​
$newCard.addEventListener('submit', function(event){
​
    if ($newCardContent.value == '') {
        event.preventDefault();
        if (document.querySelector('.error') == null) {
            var $error = document.createElement('span');
            $error.classList.add('error');
            $error.textContent = 'Favor preencher algum conteúdo!';
            $newCard.insertBefore($error, $newCardAction);
        };
    };
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers