Skip to content

Commit bac3558

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #13 from vaibhav0726/main
Added one main index file
2 parents 028987d + 4787438 commit bac3558

3 files changed

Lines changed: 179 additions & 0 deletions

File tree

‎todo-list/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Fullstack To-Do List</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
10+
/>
11+
<link rel="stylesheet" href="./style.css" />
12+
</head>
13+
<body>
14+
<header>To-do</header>
15+
16+
<form>
17+
<input type="text" class="todo-input" />
18+
<button class="todo-button">
19+
<i class="fa fa-plus-square"></i>
20+
</button>
21+
</form>
22+
23+
<div class="todo-container">
24+
<ul class="todo-list">
25+
26+
</ul>
27+
</div>
28+
29+
<script src="./script.js"></script>
30+
</body>
31+
</html>

‎todo-list/script.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// selectors | Reference
2+
var todoInput = document.querySelector(".todo-input");
3+
var btn = document.querySelector(".todo-button");
4+
var todoList = document.querySelector(".todo-list");
5+
6+
// Event Handlers
7+
btn.onclick = create;
8+
todoList.onclick = performAction;
9+
10+
var data;
11+
// Functions
12+
function create(e) {
13+
e.preventDefault();
14+
data = todoInput.value;
15+
console.log(data);
16+
data = data.trim();
17+
if (data != "") {
18+
var newDiv = document.createElement("div");
19+
newDiv.classList.add("todo");
20+
21+
var newLi = document.createElement("li");
22+
newLi.classList.add("todo-item");
23+
newLi.innerText = data;
24+
newDiv.appendChild(newLi);
25+
26+
var cmpltBtn = document.createElement("button");
27+
cmpltBtn.classList.add("cmpltBtn");
28+
cmpltBtn.innerHTML = '<i class="fa fa-check " aria-hidden="true"></i>';
29+
newDiv.appendChild(cmpltBtn);
30+
31+
var deleteBtn = document.createElement("button");
32+
deleteBtn.classList.add("deleteBtn");
33+
deleteBtn.innerHTML = '<i class="fa fa-trash" aria-hidden="true"></i>';
34+
newDiv.appendChild(deleteBtn);
35+
36+
todoList.appendChild(newDiv);
37+
todoInput.value = "";
38+
} else {
39+
alert("Box can not be blank");
40+
}
41+
}
42+
43+
function performAction(e) {
44+
var item = e.target;
45+
// console.log(item);
46+
47+
if (item.classList[0] == "cmpltBtn") {
48+
// console.log("Cmplete Button pressed");
49+
var parent = item.parentElement;
50+
parent.classList.toggle("todo-done");
51+
}
52+
if (item.classList[0] == "deleteBtn") {
53+
var parent = item.parentElement;
54+
// console.log(parent);
55+
parent.remove();
56+
}
57+
}

‎todo-list/style.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* ------------Initial Phase CSS--------------- */
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
body {
9+
background: linear-gradient(120deg, pink, purple);
10+
color: white;
11+
font-family: Arial, Helvetica, sans-serif;
12+
min-height: 100vh;
13+
}
14+
header,
15+
form {
16+
height: 20vh;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
header {
22+
font-size: 40px;
23+
}
24+
25+
form input,
26+
form button {
27+
padding: 10px;
28+
border: none;
29+
font-size: 24px;
30+
background: white;
31+
outline: none;
32+
}
33+
form button {
34+
color: purple;
35+
background-color: white;
36+
cursor: pointer;
37+
}
38+
form button:hover {
39+
color: white;
40+
background-color: skyblue;
41+
}
42+
43+
/* ----------------New List Container----------------- */
44+
45+
.todo-container {
46+
display: flex;
47+
justify-content: center;
48+
align-items: center;
49+
}
50+
51+
.todo-list {
52+
list-style: none;
53+
min-width: 25%;
54+
}
55+
56+
.todo {
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
font-size: 24px;
61+
background-color: white;
62+
color: black;
63+
margin: 10px;
64+
}
65+
.cmpltBtn {
66+
background-color: cadetblue;
67+
border: none;
68+
padding: 16px;
69+
font-size: 16px;
70+
}
71+
.deleteBtn {
72+
background-color: deeppink;
73+
border: none;
74+
padding: 16px;
75+
font-size: 16px;
76+
}
77+
78+
.todo li {
79+
flex: 1;
80+
padding: 0px 10px;
81+
}
82+
83+
.fa-trash,
84+
.fa-check {
85+
pointer-events: none;
86+
}
87+
88+
.todo-done {
89+
text-decoration: line-through;
90+
opacity: 0.5;
91+
}

0 commit comments

Comments
 (0)