본문 바로가기
Dev.Project/Todolist_project

[Todolist_Basic] Final Step. 스타일링

_Jbee 2016. 7. 10. 16:05





Final Step. 스타일링


최종 코드가 담인 github 주소이다.
처음에 목표로 했던 기능들을 모두 추가하였다.
이제 디자인적 요소를 추가할 차례다.

일단 최종적인 코드를 먼저 보여주겠다.

index.html code>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>To Do List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <link href="reset.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="/font-awesome-4.6.3/css/font-awesome.min.css">
        <script src="https://www.google.com/jsapi"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
        <style>
          a{
            color:#000;
          }
          a:hover{
            color:#000;
            text-decoration: none;
          }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <a href="todolist.html"><h1 id="todolistHeader">To do List</h1></a>
            </div>
 
            <div class="row">
                <div class="col-sm-6">
                    <hr>
                    <p id="enter">Write and Press Enter!</p>
                    <p class="inputarea">
                        <input type="text" id="inputText" placeholder="what to do"/>
                        <ul id="todolist"></ul>
                    </p>
                </div>
                <div class="col-sm-6">
                    <hr>
                    <p id="enter">Done</p>
 
                    <ul id="donelist"></ul>
                </div>
            </div>
        </div>
        <script src="main.js"></script>
    </body>
</html>
 
cs


main.js code>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
var totalOfItems = 0;
 
function updateItemStatus(){
  var chId = this.id.replace('cb_', '');
  var itemText = document.getElementById('item_' + chId);
 
  if(this.checked){
    itemText.className = 'checked';
  } else {
    itemText.className = '';
  }
}
 
function renameItem(){
  //this === span
  var newText = prompt("what should this item be renamed to?");
  if(!newText || newText === "" || newText === " ") return false; // blank 방지
  var spanId = this.id.replace('pencilIcon_', '');
  var span = document.getElementById('item_' + spanId);
 
  span.innerText = newText;
}
 
var donelist = document.getElementById('donelist');
function moveItem(){
  //this === span
  var listItemId = this.id.replace('li_', '');
  var listItem = document.getElementById('li_' + listItemId);
  var listItemParentId = listItem.parentElement;
  //console.log(listItemParentId);
  if(listItemParentId == donelist){
    todolist.appendChild(listItem);
  } else {
    donelist.appendChild(listItem);
  }
}
 
function deleteItem(donelist){
  //this === minusIcon
  var listItemId = this.id.replace('minusIcon_', '');
  document.getElementById('li_' + listItemId).style.display = "none";
}
 
function mouseover(){
  //this === li
  var pencilIconId = this.id.replace('li_','');
  var pencilIcon = document.getElementById('pencilIcon_' + pencilIconId);
  var minusIcon = document.getElementById('minusIcon_' + pencilIconId);
 
  pencilIcon.style.visibility = 'visible';
  minusIcon.style.visibility = 'visible';
}
 
function mouseout(){
  //this === li
  var pencilIconId = this.id.replace('li_','');
  var pencilIcon = document.getElementById('pencilIcon_' + pencilIconId);
  var minusIcon = document.getElementById('minusIcon_' + pencilIconId);
 
  pencilIcon.style.visibility = 'hidden';
  minusIcon.style.visibility = 'hidden';
}
 
function addNewItem(list, itemText){
  totalOfItems++;
 
  var date = new Date();
  var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();
 
  var listItem = document.createElement('li');
  listItem.id = 'li_' + id;
  listItem.ondblclick = moveItem;
  listItem.addEventListener('mouseover', mouseover);
  listItem.addEventListener('mouseout', mouseout);
 
  var span = document.createElement('span');
  span.id = 'item_' + id;
  span.innerText = itemText;
 
  var pencilIcon = document.createElement('i');
  pencilIcon.className = 'fa fa-pencil';
  pencilIcon.id = 'pencilIcon_' + id;
  pencilIcon.onclick = renameItem;
 
  var minusIcon = document.createElement('i');
  minusIcon.className = 'fa fa-minus';
  minusIcon.id = 'minusIcon_' + id;
  minusIcon.onclick = deleteItem;
 
  listItem.appendChild(span);
  listItem.appendChild(minusIcon);
  listItem.appendChild(pencilIcon);
  list.appendChild(listItem);
 
}
 
var inputText = document.getElementById('inputText');
inputText.focus();
 
inputText.onkeyup = function(event){
  //Event.which (13) === ENTER Key!!
  if(event.which === 13){
    var itemText = inputText.value;
    if(itemText === "" || itemText === " ") return false; // blank 방지
    addNewItem(document.getElementById('todolist'), itemText);
    inputText.focus();
    inputText.select();
  }
};
 
cs

style.css code>
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
#todolistHeader{
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
    font-weight: 100;
}
.inputarea{
    text-align: center;
}
#enter{
    text-align: center;
    font-size: 2em;
    font-weight: 100;
}
#inputText{
    width: 100%;
    height: 2.5em;
}
#todolist, #donelist{
    list-style: none;
    width: 100%;
    height: 2.5em;
}
#todolist li{
    border-left: 5px solid #25C797;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 4px;
    width: 100%;
    height: 2.5em;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.5s;
    transition-timing-function:ease;
    color: #696969;
    background-color: #F1F1F1;
}
#todolist li:hover{
    transition: all 0.5s;
    transition-timing-function:ease;
    color: #696969;
    background-color: #25C797;
}
#donelist li{
    border-bottom: 1px dashed #ccc;
    margin-bottom: 4px;
    width: 100%;
    height: 2.5em;
    padding: 5px 10px;
    cursor: pointer;
    transition-timing-function:ease;
    color: #E7007B;
    background-color: #FFF;
}
#donelist li:hover{
    transition: all 0.5s;
    transition-timing-function:ease;
    color: #E7007B;
    background-color: #FEDBE4;
}
#todolist li span{
    font-size: 1.3em;
    font-weight: 200;
    padding-left: 10px;
    vertical-align: middle;
}
#donelist li span{
    font-size: 1.3em;
    font-weight: 200;
    padding-left: 10px;
    vertical-align: middle;
    text-decoration: line-through;
    color: #E7007B;
}
.fa-pencil{
    float:right;
    padding: 5px;
    visibility: hidden;
    color: #fff;
}
.fa-minus{
    float:right;
    padding: 5px;
    visibility: hidden;
    color: #F2143F;
}
 
cs

최소한의 디자인을 추가해보았다.
목표한 스펙을 모두 구현한 코드이다.
github에 올리면 어떻게 code를 봐야할 지 모르는 사람들을 위해 최대한 모두 올렸다.
https://github.com/JaeYeopHan/TodoList_withOnlyJS_byJbee





- Final Step.  The end -

 

저작자표시 비영리 변경금지

'Dev.Project > Todolist_project' 카테고리의 다른 글

[TodoMVC] Step 1. 각 JS 파일 모듈화하고 의존성 관계 확립하기  (0) 2016.08.18
[TodoMVC] TodoList based MVC Project with VanillaJS / To do MVC 만들기 프로젝트 Intro  (0) 2016.08.18
[Todolist_Basic] Step 10. 삭제 버튼 구현하기  (0) 2016.07.10
[Todolist_Basic] Step 9. Donelist에서 다시 Todolist로 보내기  (0) 2016.07.10
[Todolist_Basic] Step 8. 수정 버튼 사라지고 나타나게 하기  (2) 2016.07.10

'Dev.Project/Todolist_project' Related Articles

티스토리툴바