<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="cont_principal">
<div class="cont_centrar">
<div class="cont_todo_list_top">
<div class="cont_titulo_cont">
<h3>THINGS TO DO</h3>
</div>
<div class="cont_add_titulo_cont"><a href="#e" onclick="add_new()"><i class="material-icons"></i></a>
</div>
<!-- End cont_todo_list_top --> </div>
<div class="cont_crear_new">
<table class="table">
<tr>
<th>Action</th>
<th>Title</th>
<th>Date</th>
</tr>
<tr>
<td><select name="" id="action_select">
<option value="SHOPPING">SHOPPING</option>
<option value="WORK">WORK</option> <option value="SPORT">SPORT</option> <option value="MUSIC">MUSIC</option>
</select>
<!-- End td 1 -->
</td>
<td>
<input type="text" class="input_title_desc" />
<!-- End td 2 -->
</td>
<td>
<select name="" class="input_description_title" id="date_select">
<option value="TODAY">TODAY</option>
<option value="TOMORROW">TOMORROW</option> </select>
<!-- End td 3 -->
</td>
</tr>
<tr>
<th class="titl_description" >Description</th>
</tr>
<tr>
<td colspan="3">
<input type="text" class="input_description" required />
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn_add_fin" onclick="add_to_list()">ADD</button>
</td>
</tr>
</table>
<!-- End cont_crear_new -->
</div>
<div class="cont_princ_lists">
<ul>
<li class="list_shopping li_num_0_1">
<div class="col_md_1_list">
<p>SHOPPIGN</p>
</div>
<div class="col_md_2_list">
<h4>BUY COFFEE BEANS</h4>
<p>DODIDONE COFFEE STORE</p>
</div>
<div class="col_md_3_list">
<div class="cont_text_date">
<p>TODAY</p>
</div>
<div class="cont_btns_options">
<ul>
<li><a href="#" onclick="finish_action('0','0_1');"><i class="material-icons"></i></a></li>
</ul>
</div>
</div>
</li>
<!-- <li class="list_work"></li>
<li class="list_sport"></li>
<li class="list_music"></li>
--> </ul>
<!-- End cont_todo_list_top --> </div>
<!-- End cont_central -->
</div>
</div>
* {
margin: 0px auto;
padding: 0px;
text-align: center;
}
.cont_principal {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
background: rgb(250,249,247);
background: -moz-linear-gradient(-45deg, rgba(250,249,247,1) 0%, rgba(221,218,209,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(250,249,247,1) 0%,rgba(221,218,209,1) 100%);
background: linear-gradient(135deg, rgba(250,249,247,1) 0%,rgba(221,218,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf9f7', endColorstr='#dddad1',GradientType=1 );
}
.cont_centrar {
position: relative;
width: 500px;
}
.cont_todo_list_top {
position: relative;
float: left;
width: 100%;
height: 60px;
margin-top: 20px;
box-shadow: 1px 15px 25px -5px rgba(0,0,0,0.3);
}
.cont_titulo_cont > h3 {
text-spacign:2px;
text-align: left;
margin-left: 25px;
letter-spacing:7px;
font-size: 12px;
color: #fff;
font-weight: 400;
margin-top: 23px;
}
.cont_titulo_cont {
position: relative;
float: left;
width: 430px;
height: 60px;
background: rgb(42,72,107);
background: -moz-linear-gradient(left, rgba(42,72,107,1) 0%, rgba(80,122,167,1) 100%);
background: -webkit-linear-gradient(left, rgba(42,72,107,1) 0%,rgba(80,122,167,1) 100%);
background: linear-gradient(to right, rgba(42,72,107,1) 0%,rgba(80,122,167,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a486b', endColorstr='#507aa7',GradientType=1 );
font-family: 'Open Sans', sans-serif;
}
.cont_add_titulo_cont {
position: relative;
float: left;
width: 70px;
height: 60px;
background: rgb(42,72,107);
background: -moz-linear-gradient(left, rgba(42,72,107,1) 0%, rgba(80,122,167,1) 100%);
background: -webkit-linear-gradient(left, rgba(42,72,107,1) 0%,rgba(80,122,167,1) 100%);
background: linear-gradient(to right, rgba(42,72,107,1) 0%,rgba(80,122,167,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a486b', endColorstr='#507aa7',GradientType=1 );
}
.cont_add_titulo_cont > a {
display: block;
color: #fff;
font-size: 32px;
margin-top: 14px;
}
body {
background: rgb(250,249,247);
background: -moz-linear-gradient(-45deg, rgba(250,249,247,1) 0%, rgba(221,218,209,1) 100%);
background: -webkit-linear-gradient(-45deg, rgba(250,249,247,1) 0%,rgba(221,218,209,1) 100%);
background: linear-gradient(135deg, rgba(250,249,247,1) 0%,rgba(221,218,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf9f7', endColorstr='#dddad1',GradientType=1 );
}
.cont_crear_new {
position: relative;
float: left;
width: 100%;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
/* Propiedades Desactivadores */
-webkit-transform: scale(0,0);
-ms-transform: scale(0,0);
-o-transform: scale(0,0);
transform: scale(0,0);
height: 0px;
margin: 0px;
}
.cont_crear_new_active{
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
height: 0px;
margin: 10px 0px;
height: 190px;
}
.cont_add_titulo_cont > a > i{
transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.cont_add_titulo_cont_active > a > i{
-webkit-transform: rotate(130deg);
-ms-transform: rotate(130deg);
-o-transform: rotate(130deg);
transform: rotate(130deg);
}
.table th {
font-size: 14px;
font-family: 'Open Sans', sans-serif;
color: #607D8B;
}
.table td {
width: 33.33%;
}
.table td select {
width: 100%;
padding: 10px 0px;
background-color: #fff;
box-shadow: 1px 5px 10px -5px rgba(0,0,0,0.5);
text-align: left;
}
.table td input {
width: 93%;
padding: 10px 2%;
background-color: #fff;
border: none;
box-shadow: 1px 5px 10px -5px rgba(0,0,0,0.5);
text-align: left;
outline:none;
}
.btn_add_fin {
position: relative;
padding: 10px 20px;
background-color: #4C75A1;
border: none;
margin: 10px auto;
box-shadow: 1px 5px 10px -5px rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
}
.titl_description {
padding-top: 10px;
text-align: left;
margin-left: 6%;
position: relative;
float: left;
}
.display_none_add {
}
.cont_princ_lists {
position: relative;
float: left;
width: 100%;
margin-top: 15px;
}
.cont_princ_lists > ul > li {
position: relative;
float: left;
width: 100%;
height: 75px;
left: 0;
background-color: #F1F1EF;
list-style: none;
box-shadow: 1px 10px 20px 0px rgba(218, 215, 206,0.8);
z-index: 2;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.col_md_1_list {
width: 125px;
position: relative;
float: left;
height: 20px;
top:50%;
margin-top: -10px;
}
.col_md_1_list > p {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 700;
}
.col_md_2_list {
width: 250px;
position: relative;
float: left;
margin-top: 20px;
}
.col_md_2_list > h4 {
text-align: left;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 700;
}
.col_md_2_list > p {
text-align: left;
font-family: 'Open Sans', sans-serif;
font-size: 10px;
font-weight: 700;
color: #999;
}
.col_md_3_list {
width: 121px;
position: relative;
float: left;
height: 14px;
top:50%;
margin-top: -10px;
}
.col_md_3_list > .cont_text_date {
text-align: right;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 700;
}
.col_md_3_list > .cont_text_date > p {
text-align: right;
margin-right: 20px;
}
.col_md_3_list:hover > .cont_btns_options{
opacity: 1;
}
.col_md_3_list > .cont_btns_options{
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background-color: #F1F1EF;
width: 100%;
height: 47px;
top: 0px;
}
.col_md_3_list > .cont_btns_options > ul > li{
position: relative;
float: right;
width: 100%;
list-style-type: none;
}
.col_md_3_list > .cont_btns_options > ul > li:nth-child(1) > a {
/* background-color: #ef5350; */
}
.col_md_3_list > .cont_btns_options > ul > li > a {
display: block;
width: 20px;
height: 15px;
background-color: #4C75A1;
padding: 5px 3px;
border-radius: 50%;
color: #fff;
margin-top: -5px;
}
.col_md_3_list > .cont_btns_options > ul > li > a > i {
font-size: 15px;
}
.list_dsp_none {
display: none;
opacity: 0;
margin-top: 20px;
}
.list_dsp_true {
margin:0px;
opacity: 1;
}
.list_work {
z-index: 1;
}
.list_shopping > .col_md_1_list {
border-left: 4px solid #e45;
color: #e45;
}
.list_work > .col_md_1_list {
border-left: 4px solid #2A476B;
color: #2A476B;
}
.list_sport > .col_md_1_list {
border-left: 4px solid #EF8A18;
color: #EF8A18;
}
.list_music > .col_md_1_list {
border-left: 4px solid #EE1E65;
color: #EE1E65;
}
.list_finish_state {
opacity: 0.3;
margin: 15px 0px;
z-index: 1;
}
var contador = 0
, select_opt = 0;
function add_to_list(){
var action = document.querySelector('#action_select').value,
description = document.querySelector('.input_description').value,
title = document.querySelector('.input_title_desc').value,
date = document.getElementById('date_select').value;
switch (action) {
case "SHOPPING":
select_opt = 0;
break;
case "WORK":
select_opt = 1;
break;
case "SPORT":
select_opt = 2;
break;
case "MUSIC":
select_opt = 3;
break;
}
var class_li =['list_shopping list_dsp_none','list_work list_dsp_none','list_sport list_dsp_none','list_music list_dsp_none'];
var cont = '<div class="col_md_1_list"> <p>'+action+'</p> </div> <div class="col_md_2_list"> <h4>'+title+'</h4> <p>'+description+'</p> </div> <div class="col_md_3_list"> <div class="cont_text_date"> <p>'+date+'</p> </div> <div class="cont_btns_options"> <ul> <li><a href="#finish" onclick="finish_action('+select_opt+','+contador+');" ><i class="material-icons"></i></a></li> </ul> </div> </div>';
var li = document.createElement('li')
li.className = class_li[select_opt]+" li_num_"+contador;
li.innerHTML = cont;
document.querySelectorAll('.cont_princ_lists > ul')[0].appendChild(li);
setTimeout(function(){ document.querySelector('.li_num_'+contador).style.display = "block";
},100);
setTimeout(function(){
document.querySelector('.li_num_'+contador).className = "list_dsp_true "+class_li[select_opt]+" li_num_"+contador;
contador++;
},200);
}
function finish_action(num,num2) {
var class_li =['list_shopping list_dsp_true','list_work list_dsp_true','list_sport list_dsp_true','list_music list_dsp_true'];
console.log('.li_num_'+num2);
document.querySelector('.li_num_'+num2).className = class_li[num]+" list_finish_state";
setTimeout(function(){
del_finish();
},500);
}
function del_finish(){
var li = document.querySelectorAll('.list_finish_state');
for(var e = 0; e < li.length; e++){
/* li[e].style.left = "-100px"; */
li[e].style.opacity = "0";
li[e].style.height = "0px";
li[e].style.margin = "0px";
}
setTimeout(function(){
var li = document.querySelectorAll('.list_finish_state');
for(var e = 0; e < li.length; e++){
li[e].parentNode.removeChild(li[e]);
}
},500);
}
var t = 0;
function add_new(){
if(t % 2 == 0){
document.querySelector('.cont_crear_new').className = "cont_crear_new cont_crear_new_active";
document.querySelector('.cont_add_titulo_cont').className = "cont_add_titulo_cont cont_add_titulo_cont_active";
t++;
}else { document.querySelector('.cont_crear_new').className = "cont_crear_new";
document.querySelector('.cont_add_titulo_cont').className = "cont_add_titulo_cont";
t++;
}
}
