Skip to content

Commit 095fb2b

Browse files
SMK14SMK14
authored
Add files via upload
1 parent e3a2e98 commit 095fb2b

3 files changed

Lines changed: 294 additions & 1 deletion

File tree

‎BUS_CRUD Local Storage/Busdata.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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>Day-6 Que-2</title>
7+
<link rel="stylesheet" href="busstyles.css">
8+
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div class="modal" onclick="hideModal(event)">
13+
<div class="modalchild">
14+
<div class="form">
15+
<form onsubmit="updateBus(event)">
16+
<input type="text" required placeholder="Name" id="upname" />
17+
<input type="text" required placeholder="Source" id="upsrc" />
18+
<input type="text" required placeholder="Desination" id="updest" />
19+
<input type="number" required placeholder="Number" id="upnumber" />
20+
<input type="text" required placeholder="Passenger Capacity" id="uppasscap" />
21+
<button type="submit">Update Bus</button>
22+
</form>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<div class="data">
28+
<h1>Bus Details</h1>
29+
30+
<div class="form">
31+
<form onsubmit="addBus(event)"><h2>Add Bus :-</h2>
32+
<input type="text" required placeholder="Name" id="name" />
33+
<input type="text" required placeholder="Source" id="source" />
34+
<input type="text" required placeholder="Desination" id="destination" />
35+
<input type="number" required placeholder="Number" id="number" />
36+
<input type="text" required placeholder="Passenger Capacity" id="passcap" />
37+
<button type="submit">Add Bus</button>
38+
</form>
39+
</div>
40+
41+
<h3>
42+
<div class="form">
43+
<h2>Find your Bus :-</h2>
44+
Source :<input
45+
type="text"
46+
placeholder="Enter Source"
47+
id="searchSource"
48+
onkeyup="searchBySource()"
49+
/>
50+
51+
Destination :<input
52+
type="text"
53+
placeholder="Enter Destination"
54+
id="searchDestination"
55+
onkeyup="searchByDestination()"
56+
/>
57+
</div>
58+
</h3>
59+
<table border="1" class="table" cellspacing="0">
60+
<thead>
61+
<tr>
62+
<th>Sr no</th>
63+
<th>Name</th>
64+
<th>Source</th>
65+
<th>Destination</th>
66+
<th>Number</th>
67+
<th>Passenger Capacity</th>
68+
<th>Actions</th>
69+
</tr>
70+
</thead>
71+
<tbody class="tdata" id="tdata"></tbody>
72+
</table>
73+
</div>
74+
75+
<script src="busdata.js"></script>
76+
77+
</body>
78+
</html>

‎BUS_CRUD Local Storage/busdata.js‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
window.onload = function () {
2+
let initialbuses = [
3+
4+
];
5+
6+
if (localStorage.getItem("currentbuses") == null) {
7+
localStorage.setItem("currentbuses", JSON.stringify(initialbuses));
8+
}
9+
};
10+
11+
function display(busarray = undefined) {
12+
let tabledata = "";
13+
let allbuses;
14+
if (busarray == undefined) {
15+
allbuses = JSON.parse(localStorage.getItem("currentbuses"));
16+
} else {
17+
allbuses = busarray;
18+
}
19+
20+
allbuses.forEach(function (bus, index) {
21+
let currentrow = `<tr>
22+
<td>${index + 1}</td>
23+
<td>${bus.name}</td>
24+
<td>${bus.source}</td>
25+
<td>${bus.destination}</td>
26+
<td>${bus.number}</td>
27+
<td>${bus.passcap}</td>
28+
<td>
29+
<button onclick='deleteBus(${index})'>delete</button>
30+
<button onclick='showModal(${index})'>update</button>
31+
</td>
32+
</tr>`;
33+
34+
tabledata += currentrow;
35+
});
36+
37+
document.getElementsByClassName("tdata")[0].innerHTML = tabledata;
38+
39+
}
40+
41+
display();
42+
43+
function addBus(e) {
44+
e.preventDefault();
45+
let newBus = {};
46+
let name = document.getElementById("name").value;
47+
let source = document.getElementById("source").value;
48+
let destination= document.getElementById("destination").value;
49+
let number = document.getElementById("number").value;
50+
let passenger_capacity = document.getElementById("passcap").value;
51+
newBus.name = name;
52+
newBus.number = Number(number);
53+
newBus.destination = destination;
54+
newBus.source = source;
55+
newBus.passcap=passenger_capacity;
56+
57+
58+
let allbuses = JSON.parse(localStorage.getItem("currentbuses"));
59+
allbuses.push(newBus);
60+
localStorage.setItem("currentbuses", JSON.stringify(allbuses));
61+
62+
display();
63+
64+
document.getElementById("name").value = "";
65+
document.getElementById("source").value = "";
66+
document.getElementById("destination").value = "";
67+
document.getElementById("number").value = "";
68+
document.getElementById("passcap").value = "";
69+
}
70+
71+
function searchBySource() {
72+
let searchValue = document.getElementById("searchSource").value;
73+
let searchvalue = document.getElementById("searchDestination").value;
74+
let allbuses = JSON.parse(localStorage.getItem("currentbuses"));
75+
let newdata = allbuses.filter(function (bus) {
76+
return (
77+
bus.source.toUpperCase().indexOf(searchValue.toUpperCase()) != -1 && bus.destination.toUpperCase().indexOf(searchvalue.toUpperCase()) != -1
78+
);
79+
});
80+
81+
display(newdata);
82+
}
83+
84+
function searchByDestination() {
85+
let searchValue = document.getElementById("searchDestination").value;
86+
let searchvalue = document.getElementById("searchSource").value;
87+
let allbuses = JSON.parse(localStorage.getItem("currentbuses"));
88+
let newdata = allbuses.filter(function (bus) {
89+
return (
90+
bus.destination.toUpperCase().indexOf(searchValue.toUpperCase()) != -1 && bus.source.toUpperCase().indexOf(searchvalue.toUpperCase()) != -1
91+
);
92+
});
93+
94+
display(newdata);
95+
}
96+
97+
98+
99+
let updateIndex;
100+
101+
function copyBus(index) {
102+
let allbuses = JSON.parse(localStorage.getItem("currentbuses"));
103+
updateIndex = index;console.log(updateIndex);
104+
let currentBus = allbuses[index];
105+
106+
document.getElementById("upname").value = currentBus.name;
107+
document.getElementById("upsrc").value = currentBus.source;
108+
document.getElementById("updest").value = currentBus.destination;
109+
document.getElementById("upnumber").value = currentBus.number;
110+
document.getElementById("uppasscap").value = currentBus.passcap;
111+
112+
}
113+
114+
function updateBus(e) {
115+
e.preventDefault();
116+
let allbuses = JSON.parse(localStorage.getItem("currentbuses"));
117+
let currentBus = allbuses[updateIndex];
118+
let name = document.getElementById("upname").value;
119+
let source = document.getElementById("upsrc").value;
120+
let destination= document.getElementById("updest").value;
121+
let number = document.getElementById("upnumber").value;
122+
let passenger_capacity = document.getElementById("uppasscap").value;
123+
currentBus.name = name;
124+
currentBus.number = Number(number);
125+
currentBus.destination = destination;
126+
currentBus.source = source;
127+
currentBus.passcap=passenger_capacity;
128+
129+
localStorage.setItem("currentbuses", JSON.stringify(allbuses));
130+
display(allbuses);
131+
132+
133+
let modal = document.getElementsByClassName("modal")[0];
134+
modal.style.display = "none";
135+
}
136+
137+
function deleteBus(index) {
138+
let allbuses = JSON.parse(localStorage.getItem("currentbuses"));
139+
allbuses.splice(index, 1);
140+
localStorage.setItem("currentbuses", JSON.stringify(allbuses));
141+
display();
142+
}
143+
144+
145+
146+
function showModal(index) {
147+
let modal = document.getElementsByClassName("modal")[0];
148+
modal.style.display = "block";
149+
150+
copyBus(index);
151+
}
152+
153+
function hideModal(event) {
154+
if (event.target.className == "modal") {
155+
let modal = document.getElementsByClassName("modal")[0];
156+
modal.style.display = "none";
157+
}
158+
}

‎BUS_CRUD Local Storage/busstyles.css‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,58 @@
1-
1+
* {
2+
margin: 0px;
3+
padding: 0px;
4+
5+
}
6+
body{font-family:Lora;}
7+
8+
.data {
9+
height: 600px;
10+
width: 80%;
11+
background-color: lightgray;
12+
margin-left: 10%;
13+
margin-top: 50px;
14+
padding: 20px;
15+
display: inline-block;
16+
}
17+
18+
.table {
19+
width: 100%;
20+
margin-top: 20px;
21+
font-family: Oxygen;
22+
}
23+
th,
24+
td {
25+
height: 40px;
26+
text-align: center;
27+
padding: 5px;
28+
}
29+
30+
.form {
31+
margin-top: 20px;
32+
}
33+
input {
34+
height: 40px;
35+
text-indent: 20px;
36+
}
37+
38+
button {
39+
padding: 10px;
40+
}
41+
42+
.modal {
43+
width: 100%;
44+
height: 100vh;
45+
background-color: rgba(0, 0, 0, 0.5);
46+
position: fixed;
47+
display: none;
48+
}
49+
50+
.modalchild {
51+
height: 200px;
52+
width: 70%;
53+
background-color: white;
54+
margin-left: 15%;
55+
margin-top: 100px;
56+
display: inline-block;
57+
padding: 30px;
58+
}

0 commit comments

Comments
 (0)