Skip to content

Commit 349664b

Browse files
abhipshapatroabhipshapatro
authored
Merge pull request #10 from samahuja642/main
added ItemList
2 parents 4e94f1b + 611d8a3 commit 349664b

3 files changed

Lines changed: 115 additions & 0 deletions

File tree

‎ItemLists/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<html>
2+
<head>
3+
<title>Item Lister</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width initial-scale=1.0">
6+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
7+
<link href="./styles.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<nav class="navbar">
11+
<div class="container-fluid">
12+
<h1>Item List</h1>
13+
<form class="d-flex">
14+
<input id="search-box"class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
15+
</form>
16+
</div>
17+
</nav>
18+
<main>
19+
<div id="adder">
20+
<form>
21+
<input type="text" id="new-item" class="form-control">
22+
<button type="submit" class="btn btn-success">Add</button>
23+
</form>
24+
</div>
25+
26+
<div id="content">
27+
<h2>List of Items</h2>
28+
<ul>
29+
<li class="items"><span>Item 1</span><button type="button" class="btn btn-outline-danger">X</button></li>
30+
<li class="items"><span>Item 2</span><button type="button" class="btn btn-outline-danger">X</button></li>
31+
<li class="items"><span>Item 3</span><button type="button" class="btn btn-outline-danger">X</button></li>
32+
</ul>
33+
34+
</div>
35+
36+
</main>
37+
<script src="script.js"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
39+
</body>
40+
</html>
41+

‎ItemLists/script.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
function addItems(e){
2+
e.preventDefault();
3+
let new_element = document.createElement('li');
4+
new_element.className = "items";
5+
let span_it = document.createElement('span');
6+
span_it.innerText = document.getElementById('new-item').value;
7+
let button_new = document.createElement('button');
8+
button_new.className = "btn btn-outline-danger";
9+
button_new.innerText = 'X';
10+
new_element.appendChild(span_it);
11+
new_element.appendChild(button_new);
12+
document.querySelector('#content ul').appendChild(new_element);
13+
delete_buttons = document.querySelectorAll('.btn-outline-danger');
14+
for (var i = 0 ;i<delete_buttons.length;i++){
15+
delete_buttons[i].addEventListener('click',removeItems);
16+
}
17+
}
18+
document.querySelector('#adder .btn').addEventListener('click',addItems);
19+
let delete_buttons = document.querySelectorAll('.btn-outline-danger');
20+
for (var i = 0 ;i<delete_buttons.length;i++){
21+
delete_buttons[i].addEventListener('click',removeItems);
22+
}
23+
document.getElementById('search-box').addEventListener('input',searchItems);
24+
function removeItems(e){
25+
if(confirm('Are You Sure?') == true){
26+
e.target.parentNode.remove();
27+
delete_buttons = document.querySelectorAll('.btn-outline-danger');
28+
for (var i = 0 ;i<delete_buttons.length;i++){
29+
delete_buttons[i].addEventListener('click',removeItems);
30+
}
31+
}
32+
}
33+
34+
function searchItems(e){
35+
e.preventDefault();
36+
for(var i=0;i<delete_buttons.length;i++){
37+
if(delete_buttons[i].parentNode.children[0].innerText.toLowerCase().indexOf(e.target.value.toLowerCase())==-1){
38+
console.log(delete_buttons[i].parentNode.children[0].innerText.toLowerCase().indexOf(e.target.value.toLowerCase()))
39+
delete_buttons[i].parentNode.style.display = "none";
40+
}
41+
else{
42+
console.log(delete_buttons[i].parentNode.children[0].innerText.toLowerCase().indexOf(e.target.value.toLowerCase()))
43+
delete_buttons[i].parentNode.style.display = "";
44+
}
45+
}
46+
}
47+

‎ItemLists/styles.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.navbar{
2+
background:#EAB308;
3+
}
4+
#adder form{
5+
display:flex;
6+
flex-direction:row;
7+
}
8+
#adder form input{
9+
margin-right:1em;
10+
}
11+
#adder{
12+
margin-top:2em;
13+
}
14+
#content{
15+
margin:1.5em;
16+
padding:4px;
17+
background:#E7E5E4;
18+
}
19+
#content ul li p{
20+
font-size:1.3em;
21+
}
22+
.items{
23+
margin:1.3em;
24+
}
25+
.btn-outline-danger{
26+
float:right;
27+
}

0 commit comments

Comments
 (0)