├── README.md
├── index.html
├── main.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # to-do-list
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | To Do List
8 |
9 |
10 | To Do List
11 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | let addToDoButton = document.getElementById('addToDo');
2 | let toDoContainer = document.getElementById('toDoContainer');
3 | let inputField = document.getElementById('inputField');
4 |
5 | addToDoButton.addEventListener('click', function(){
6 | var paragraph = document.createElement('p');
7 | paragraph.classList.add('paragraph-styling');
8 | paragraph.innerText = inputField.value;
9 | toDoContainer.appendChild(paragraph);
10 | inputField.value = "";
11 | paragraph.addEventListener('click', function(){
12 | paragraph.style.textDecoration = "line-through";
13 | })
14 | paragraph.addEventListener('dblclick', function(){
15 | toDoContainer.removeChild(paragraph);
16 | })
17 | })
18 |
19 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | width: 50%;
3 | margin: 0 auto;
4 | font-family: Arial, Helvetica, sans-serif;
5 | }
6 |
7 | .container {
8 | width: 360px;
9 | }
10 |
11 | #inputField {
12 | width: 300px;
13 | height: 46px;
14 | border-width: 0;
15 | border: 1px solid black;
16 | outline: none;
17 | font-size: 25px;
18 | vertical-align: middle;
19 | }
20 |
21 | #addToDo {
22 | height: 50px;
23 | width: 50px;
24 | border: 1px solid black;
25 | vertical-align: middle;
26 | font-size: 30px;
27 | }
28 |
29 | .paragraph-styling {
30 | margin: 0;
31 | cursor: pointer;
32 | font-size: 20px;
33 | }
34 |
35 | .to-dos {
36 | margin-top: 25px;
37 | }
--------------------------------------------------------------------------------