Skip to content

Commit 63ee116

Browse files
tirtharajsinhatirtharajsinha
authored
Add files via upload
1 parent f72aad9 commit 63ee116

File tree

3 files changed

+209
-0
lines changed

3 files changed

+209
-0
lines changed

‎todo/index.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- Required meta tags -->
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<!-- Bootstrap CSS -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
11+
<link rel="stylesheet" href="style.css">
12+
<title>TODO Lost</title>
13+
</head>
14+
15+
<body onload="update()">
16+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
17+
<div class="container-fluid">
18+
<a class="navbar-brand" href="#">ToDo list</a>
19+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
20+
<span class="navbar-toggler-icon"></span>
21+
</button>
22+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
23+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
24+
<li class="nav-item">
25+
<a class="nav-link active" aria-current="page" href="#">Home</a>
26+
</li>
27+
<li class="nav-item">
28+
<a class="nav-link" href="#">Link</a>
29+
</li>
30+
<li class="nav-item dropdown">
31+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
32+
Dropdown
33+
</a>
34+
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
35+
<li><a class="dropdown-item" href="#">Action</a></li>
36+
<li><a class="dropdown-item" href="#">Another action</a></li>
37+
<li>
38+
<hr class="dropdown-divider">
39+
</li>
40+
<li><a class="dropdown-item" href="#">Something else here</a></li>
41+
</ul>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
45+
</li>
46+
</ul>
47+
<form class="d-flex">
48+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
49+
<button class="btn btn-outline-success" type="submit">Search</button>
50+
</form>
51+
</div>
52+
</div>
53+
</nav>
54+
<h2 class="text-center">TODOs list</h2>
55+
<div class="form-container">
56+
57+
<div class="mb-5">
58+
<label for="title" class="form-label">Title</label>
59+
<input type="text" class="form-control in-back" id="title" aria-describedby="emailHelp">
60+
<div id="emailHelp" class="form-text">Add an item in todo list.</div>
61+
</div>
62+
<div class="form-group mb-5">
63+
<label for="description" class="form-label">description</label>
64+
<textarea class="form-control in-back" id="description" rows="3"></textarea>
65+
</div>
66+
<button type="submit" id="add" class="btn btn-primary mar-center">Add to list</button>
67+
<button class="btn btn-primary mar-center" onclick="clearlist()">clear list</button>
68+
69+
</div>
70+
<hr>
71+
<div id="items" class="items">
72+
<h2 class="text-center">Your items</h2>
73+
<hr>
74+
<table class="table">
75+
<thead>
76+
<tr>
77+
<th scope="col">SNo</th>
78+
<th scope="col">Item Title</th>
79+
<th scope="col">description</th>
80+
<th scope="col">Action</th>
81+
</tr>
82+
</thead>
83+
<tbody id="tablebody">
84+
<tr>
85+
<td scope="row">1</td>
86+
<td>learn new thing.</td>
87+
<td>AS you are programmer try to learn something new.</td>
88+
<td><button class="btn btn-warning">Delete item</button></td>
89+
</tr>
90+
</tbody>
91+
92+
</table>
93+
</div>
94+
95+
96+
97+
98+
99+
100+
<!-- Optional JavaScript; choose one of the two! -->
101+
102+
<!-- Option 1: Bootstrap Bundle with Popper -->
103+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
104+
<script src="index.js"></script>
105+
<!-- Option 2: Separate Popper and Bootstrap JS -->
106+
<!--
107+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
108+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
109+
-->
110+
</body>
111+
112+
</html>

‎todo/index.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
add = document.getElementById("add");
2+
add.addEventListener("click", () => {
3+
title = document.getElementById("title").value;
4+
des = document.getElementById("description").value;
5+
if (localStorage.getItem("itemsjson") == null) {
6+
itemjsonarray = [];
7+
itemjsonarray.push([title, des]);
8+
localStorage.setItem("itemsjson", JSON.stringify(itemjsonarray));
9+
10+
} else {
11+
itemjsonarraystr = localStorage.getItem("itemsjson");
12+
itemjsonarray = JSON.parse(itemjsonarraystr);
13+
itemjsonarray.push([title, des]);
14+
localStorage.setItem("itemsjson", JSON.stringify(itemjsonarray));
15+
16+
}
17+
console.log("item added");
18+
// update the table.
19+
let tablebody = document.getElementById("tablebody");
20+
let str = "";
21+
itemjsonarray.forEach((element, index) => {
22+
str += `
23+
<tr>
24+
<td scope="row">${index+1}</td>
25+
<td>${element[0]}</td>
26+
<td>${element[1]}</td>
27+
<td><button class="btn btn-warning" onclick="deleteitem(${index})">Delete item</button></td>
28+
</tr>`
29+
30+
});
31+
tablebody.innerHTML = str;
32+
33+
})
34+
35+
function update() {
36+
itemjsonarraystr = localStorage.getItem("itemsjson");
37+
itemjsonarray = JSON.parse(itemjsonarraystr);
38+
let tablebody = document.getElementById("tablebody");
39+
let str = "";
40+
itemjsonarray.forEach((element, index) => {
41+
str += `
42+
<tr>
43+
<td scope="row">${index+1}</td>
44+
<td>${element[0]}</td>
45+
<td>${element[1]}</td>
46+
<td><button class="btn btn-warning" onclick="deleteitem(${index})">Delete item</button></td>
47+
</tr>`
48+
49+
});
50+
tablebody.innerHTML = str;
51+
}
52+
53+
function deleteitem(index) {
54+
itemjsonarraystr = localStorage.getItem("itemsjson");
55+
itemjsonarray = JSON.parse(itemjsonarraystr);
56+
itemjsonarray.splice(index, 1);
57+
localStorage.setItem("itemsjson", JSON.stringify(itemjsonarray));
58+
update();
59+
60+
}
61+
62+
function clearlist() {
63+
alert("Do you really want to clear your todo list?");
64+
itemjsonarraystr = localStorage.getItem("itemsjson");
65+
itemjsonarray = JSON.parse(itemjsonarraystr);
66+
itemjsonarray = [];
67+
localStorage.setItem("itemsjson", JSON.stringify(itemjsonarray));
68+
let tablebody = document.getElementById("tablebody");
69+
tablebody.innerHTML = "";
70+
}

‎todo/style.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.form-container {
2+
width: 50%;
3+
margin: auto;
4+
border: 1px solid gray;
5+
border-radius: 5px;
6+
padding: 10px;
7+
margin-bottom: 50px;
8+
background-color: silver;
9+
}
10+
11+
.in-back {
12+
background-color: silver;
13+
border-color: gray;
14+
}
15+
16+
.items {
17+
width: 60%;
18+
margin: auto;
19+
border: 2px solid rgb(119, 182, 119);
20+
border-radius: 10px;
21+
padding: 10px;
22+
margin-bottom: 50px;
23+
}
24+
25+
.mar-center {
26+
margin: auto;
27+
}

0 commit comments

Comments
 (0)