├── index1.js
├── index.html
└── style.css
/index1.js:
--------------------------------------------------------------------------------
1 | function AddTask(){
2 | var input=document.getElementById('input').value
3 | var element=document.getElementById('task-container')
4 | console.log(element)
5 | var newelement=document.createElement('div')
6 | newelement.setAttribute('id','ind-task')
7 | newelement.innerHTML=`${input}
`
8 | element.append(newelement)
9 | }
10 | function DeleteTask(event){
11 | event.target.parentElement.remove()
12 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Documents
8 |
9 |
10 |
11 | ToDo List
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Reset default margin and padding */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | /* Set body background color */
9 | body {
10 | background-color: #f0f0f0;
11 | font-family: Arial, sans-serif;
12 | padding: 20px;
13 | }
14 |
15 | /* Center the ToDo list title */
16 | div {
17 | text-align: center;
18 | margin-bottom: 20px;
19 | }
20 |
21 | #input {
22 | padding: 8px;
23 | width: 40%;
24 | margin-right: 20px;
25 | border-radius: 50px;
26 | border: 1px solid #ccc;
27 | }
28 |
29 | button {
30 | padding: 8px 25px;
31 | border: none;
32 | background-color: #06467e;
33 | color: white;
34 | border-radius: 5px;
35 | cursor: pointer;
36 | }
37 |
38 | /* Style the task container */
39 | #task-container {
40 | background-color: #fff;
41 | padding: 20px;
42 | border-radius: 50px;
43 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.025);
44 | }
45 |
46 | /* Style the individual task item */
47 | .task-item {
48 | margin-bottom: 10px;
49 | padding: 8px;
50 | background-color: #f9f9f9;
51 | border-radius: 95px;
52 | border: 10px solid #ccc;
53 | }
54 |
--------------------------------------------------------------------------------