Bootstrap Snippet todo list using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
  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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"todo list"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"todo list" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"todo list"
Bootstrap 3.0.0 Snippet by evarevirus