Skip to content

Commit ca6b494

Browse files
fasih-nasirfasih-nasir
authored
Add files via upload
0 parents  commit ca6b494

File tree

3 files changed

+527
-0
lines changed

3 files changed

+527
-0
lines changed

‎app.js

+221
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
function fng(){
2+
localStorage.clear()
3+
document.getElementById("main").innerHTML=""
4+
location.reload()
5+
}
6+
var num=0;
7+
var boy=1;
8+
var girl=1;
9+
var student;
10+
window.onload = ()=>{
11+
12+
13+
var data=localStorage.getItem("all")
14+
var data1=localStorage.getItem("pres")
15+
if(data || data1){
16+
var students=JSON.parse(data)
17+
var l=students.length
18+
document.getElementById("studnetnum").innerHTML=l
19+
document.getElementById("studnetnum1").innerHTML=l
20+
21+
22+
for(let i=0;i<students.length;i++){
23+
24+
studata(students[i])
25+
26+
if(students[i].genderof === "male"){
27+
document.getElementById("boy").innerHTML=boy++
28+
}
29+
else if(students[i].genderof === "female"){
30+
document.getElementById("girl").innerHTML=girl++
31+
}
32+
}
33+
}
34+
}
35+
36+
37+
document.getElementById("add").addEventListener("click",()=>{
38+
location.reload()
39+
40+
const name = document.getElementById("name").value;
41+
const email1 = document.getElementById("email1").value;
42+
const gender = document.getElementById("gender").value;
43+
var all=
44+
{ nameof: name ,
45+
email1of: email1 ,
46+
genderof: gender }
47+
48+
student=JSON.parse( localStorage.getItem("all"))||[]
49+
student.push(all)
50+
51+
localStorage.setItem("all",JSON.stringify(student))
52+
studata(all)
53+
54+
55+
56+
57+
58+
}
59+
)
60+
61+
function studata(student){
62+
63+
64+
var main=document.getElementById("main")
65+
var div=document.createElement("Div")
66+
67+
div.innerHTML+=`
68+
<div class="col-12 d-flex flex-column">
69+
70+
<div class="d-flex col-12 flex-row justify-content-around align-content-end ">
71+
<div class="d-flex col-10 px-1 mt-3">
72+
73+
<p class="px-2 col-4"> ${student.nameof}<p>
74+
75+
<p class="px-2 col-6">${student.email1of}</p>
76+
<p class="px-2 col-2">${student.genderof}</p>
77+
</div>
78+
<div class="d-flex col-2 flex-row justify-content-end align-content-end">
79+
<button class="edit"><i class="far fa-edit"></i></button>
80+
<button class="remove-btn"><i class="fa-solid fa-trash-can"></i></button>
81+
</div>
82+
</div>
83+
</div>
84+
`
85+
div.querySelector('.edit').addEventListener('click', () => {
86+
document.getElementById("editModal").style.display="block"
87+
// console.log(editGender.value);
88+
document.getElementById("saveEdit").addEventListener("click",()=>{
89+
var editName=document.getElementById("editName").value
90+
var editEmail=document.getElementById("editEmail").value
91+
var editGender=document.getElementById("gender1").value
92+
// console.log(student.nameof="none");
93+
div.innerHTML=`
94+
<div class="col-12 d-flex flex-column">
95+
96+
<div class="d-flex col-12 flex-row justify-content-around align-content-end ">
97+
<div class="d-flex col-10 px-1 mt-3">
98+
99+
<p class="px-2 col-4"> ${student.nameof=editName}<p>
100+
101+
<p class="px-2 col-6">${student.email1of=editEmail}</p>
102+
<p class="px-2 col-2">${student.genderof=editGender}</p>
103+
</div>
104+
<div class="d-flex col-2 flex-row justify-content-end align-content-end">
105+
<button class="edit"><i class="far fa-edit"></i></button>
106+
<button class="remove-btn" id="re" ><i class="fa-solid fa-trash-can"></i></button>
107+
</div>
108+
</div>
109+
</div>
110+
`
111+
document.getElementById("re").addEventListener("click",()=>{
112+
div.remove()
113+
})
114+
document.getElementById("editModal").style.display="none"
115+
})
116+
})
117+
118+
119+
div.querySelector('.remove-btn').addEventListener('click', () => {
120+
div.remove();
121+
122+
let students = JSON.parse(localStorage.getItem("all"));
123+
localStorage.setItem("all", JSON.stringify(students));
124+
let index = -1;
125+
for (let i = 0; i < students.length; i++) {
126+
if (students[i].nameof === student.nameof && students[i].email1of === student.email1of) {
127+
index = i;
128+
129+
// break;
130+
131+
}
132+
133+
}
134+
135+
136+
if (index !== -1) {
137+
students.splice(index, 1);
138+
139+
}
140+
141+
localStorage.setItem("all", JSON.stringify(students));
142+
143+
144+
let l = students.length;
145+
document.getElementById("studnetnum").innerHTML = l;
146+
document.getElementById("studnetnum1").innerHTML = l;
147+
148+
149+
150+
151+
});
152+
153+
main.appendChild(div);
154+
155+
156+
}
157+
158+
159+
160+
161+
162+
// let num = 0;
163+
// let boy = 0;
164+
// let girl = 0;
165+
// // Load data from localStorage on page load
166+
// window.onload = function() {
167+
// var savedData = localStorage.getItem("students");
168+
// if (savedData) {
169+
// var students = JSON.parse(savedData);
170+
// for (var i = 0; i < students.length; i++) {
171+
// addStudentToDOM(students[i]);
172+
// }
173+
// }
174+
// };
175+
// // localStorage.clear()
176+
// document.getElementById("add").addEventListener("click", () => {
177+
// const name = document.getElementById("name").value;
178+
// const email1 = document.getElementById("email1").value;
179+
// const gender = document.getElementById("gender").value;
180+
181+
// const student = {
182+
// nameof: name,
183+
// email1of: email1,
184+
// genderof: gender
185+
// };
186+
187+
// const students = JSON.parse(localStorage.getItem("students")) || [];
188+
// // console.log(students);
189+
// students.push(student);
190+
// localStorage.setItem("students", JSON.stringify(students));
191+
192+
// addStudentToDOM(student);
193+
// // updateCounts(students);
194+
// });
195+
// // localStorage.clear()
196+
// function addStudentToDOM(student) {
197+
// console.log(student);
198+
// const main = document.getElementById("main");
199+
// const div = document.createElement("div");
200+
201+
// div.innerHTML = `
202+
// <div class="col-12 d-flex flex-column student-entry">
203+
// <div class="d-flex col-12 flex-row justify-content-around align-content-end">
204+
// <div class="d-flex col-10 px-1 mt-3">
205+
// <p class="px-2 col-4">${student.nameof}</p>
206+
// <p class="px-2 col-5">${student.email1of}</p>
207+
// <p class="px-2 col-4">${student.genderof}</p>
208+
// </div>
209+
// <div class="d-flex col-2 flex-row justify-content-end align-content-end">
210+
// <button class="edit-btn">Edit</button>
211+
// <button class="remove-btn">Remove</button>
212+
// </div>
213+
// </div>
214+
// </div>
215+
// `;
216+
// main.appendChild(div);
217+
218+
// div.querySelector('.edit-btn').addEventListener('click', () => editStudent(student, div));
219+
// div.querySelector('.remove-btn').addEventListener('click', () => removeStudent(student, div));
220+
// }
221+

‎index.html

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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">
6+
<title>Admin Pannel</title>
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
8+
<link rel="stylesheet" href="style.css">
9+
<!-- Font awesoe -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
11+
<!--Font Family -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
15+
</head>
16+
<body>
17+
18+
<div id="editModal" class="modal col-5 p-4">
19+
<div class="modal-content col-5 p-4">
20+
<span class="close" id="cls">&times;</span>
21+
<h2>Edit Student</h2>
22+
<!-- <label for="editName">Name:</label> -->
23+
<input type="text" id="editName"placeholder="Edit Student Name" >
24+
<!-- <label for="editEmail">Email:</label> -->
25+
<input type="text" id="editEmail"placeholder="Edit Student Email" >
26+
27+
<select name="gender" id="gender1" class="col-12" >
28+
<option value="" selected disabled>Gender</option>
29+
<option value="male">male</option>
30+
<option value="female">female</option>
31+
</select><br>
32+
<button id="saveEdit">Save</button>
33+
</div>
34+
</div>
35+
<div class="container-fluid">
36+
<div class="row d-flex justify-content-center align-items-center" id="row1">
37+
<!-- <div class="col-1"></div> -->
38+
<div class="col-12" id="c12">
39+
<div class="row text-white" id="row2">
40+
<div class="col">
41+
<div class="d-flex flex-row align-items-center">
42+
<div><i class="fa-solid fa-user-graduate"></i></div>
43+
<div class="d-flex px-3 flex-column justify-content-center">
44+
<h5> Student<BR> </h5>
45+
<span id="studnetnum">0</span>
46+
</div>
47+
</div>
48+
49+
</div>
50+
<div class="col">
51+
<div class="d-flex flex-row align-items-center">
52+
<div><i class="fa-solid fa-clipboard-user"></i></div>
53+
<div class="d-flex px-3 flex-column justify-content-center">
54+
<h5>Present<BR> </h5>
55+
<span id="studnetnum1">0</span>
56+
</div>
57+
</div>
58+
59+
</div>
60+
<div class="col">
61+
<div class="d-flex flex-row align-items-center">
62+
<div><i class="fa-solid fa-person"></i></div>
63+
<div class="d-flex px-3 flex-column justify-content-center">
64+
<h5>Boys<BR> </h5>
65+
<span id="boy">0</span>
66+
</div>
67+
</div>
68+
69+
</div>
70+
<div class="col">
71+
<div class="d-flex flex-row align-items-center">
72+
<div><i class="fa-solid fa-person-dress"></i></div>
73+
<div class="d-flex px-3 flex-column justify-content-center">
74+
<h5>Girls<BR> </h5>
75+
<span id="girl">0</span>
76+
</div>
77+
</div>
78+
79+
</div>
80+
</div>
81+
<div class="row d-flex flex-row" id="row3">
82+
<div class="col-9 d-flex flex-column" id="main">
83+
84+
85+
</div>
86+
<div class="col-3">
87+
<div class="d-flex flex-column justify-content-center align-items-center">
88+
<i class="fa-regular fa-address-card"></i>
89+
<h4>Student Reg Form</h4>
90+
</div>
91+
<input type="text" name="name" id="name" class="col-12" placeholder="Enter Your Name">
92+
<!-- <input type="number" name="" id="" class="col-12" placeholder="Enter Your Age "> -->
93+
<input type="email" name="" id="email1" class="col-12" placeholder="Enter Your Email">
94+
<BR>
95+
<select name="gender" id="gender" class="col-12" >
96+
<option value="" selected disabled>Gender</option>
97+
<option value="male">male</option>
98+
<option value="female">female</option>
99+
</select>
100+
<div class="d-flex flex-column align-items-center justify-content-center" id="btn">
101+
<button class="col-12 my-1 mx-1" id="add">Add</button>
102+
<button class="col-12 my-1 mx-1" onclick="fng()">Clear All</button>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
108+
</div>
109+
</div>
110+
111+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
112+
<script src="app.js"></script>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)