diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..cd3a992
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,82 @@
+
+
+
+
+
+ User Details
+
+
+
+ Enter Roll Number
+
+
+
+
+
+
+
diff --git a/demo.js b/demo.js
new file mode 100644
index 0000000..5631800
--- /dev/null
+++ b/demo.js
@@ -0,0 +1,332 @@
+// Sample data with multiple attributes per user
+const users = {
+ "1": {
+ name: "Ankit Pandey",
+ rollNo: "1",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ },
+ "2": {
+ name: "",
+ rollNo: "2",
+ class:"",
+ section: "",
+ phone: ""
+ // Add more attributes as needed
+ },
+ "3": {
+ name: "Ankit Pandey",
+ rollNo: "3",
+ class:"10",
+ section: "D",
+ phone: "Charon taraf mere hi charche hai"
+ // Add more attributes as needed
+ }, "4": {
+ name: "Ankita",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "5": {
+ name: "Anshika",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "6": {
+ name: "Anuj Patel",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "7": {
+ name: "Aradhya ",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "8": {
+ name: "Aryan",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "9": {
+ name: "Bhumika",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "10": {
+ name: "Chiranjeevi",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "11": {
+ name: "Chirayu",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "12": {
+ name: "Daksh",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "13": {
+ name: "Darshika",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "14": {
+ name: "Devansh sharma ",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "15": {
+ name: "Devansh",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "16": {
+ name: "Devyani",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "17": {
+ name: "Divyansh P",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "18": {
+ name: "Divyansh M",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "19": {
+ name: "Himanshu",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "20": {
+ name: "Ishika",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "21": {
+ name: "Kanak",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "22": {
+ name: "Kanishka",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "23": {
+ name: "Lakshmi",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "24": {
+ name: "Mehak",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "25": {
+ name: "Nenika",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "26": {
+ name: "Naivaidhya",
+ rollNo: "26",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "27": {
+ name: "Nehal",
+ rollNo: "",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "28": {
+ name: "Prasad Gadge",
+ rollNo: "28",
+ class:"10",
+ section: "D",
+ phone: "9165747327"
+ // Add more attributes as needed
+ }, "29": {
+ name: "Rudra Pratap Pargir",
+ rollNo: "29",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "30": {
+ name: "Sakshi Bambani",
+ rollNo: "30",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "31": {
+ name: "Shaurya Rana",
+ rollNo: "31",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "32": {
+ name: "Shivam Singh Kuntal",
+ rollNo: "32",
+ class:"10",
+ section: "D",
+ phone: "Aap k pass number aya kese"
+ // Add more attributes as needed
+ }, "33": {
+ name: "Shreyansh Shukla",
+ rollNo: "33",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "34": {
+ name: "Shubhangi Tiwari",
+ rollNo: "34",
+ class:"10",
+ section: "D",
+ phone: ""
+ // Add more attributes as needed
+ }, "35": {
+ name: "Swarup Kamble",
+ rollNo: "35",
+ class:"10",
+ section: "D",
+ phone: "9623911386"
+ // Add more attributes as needed
+ }, "36": {
+ name: "Swastik Joshi",
+ rollNo: "36",
+ class:"10",
+ section: "D",
+ phone: "9826081064"
+ // Add more attributes as needed
+ }, "37": {
+ name: "Tejas Sahu",
+ rollNo: "37",
+ class:"10",
+ section: "D",
+ phone: "8770790737"
+ // Add more attributes as needed
+ }, "38": {
+ name: "Umar Mansuri",
+ rollNo: "38",
+ class:"10",
+ section: "D",
+ phone: "9826753430"
+ // Add more attributes as needed
+ }, "39": {
+ name: "Vansh Sonone",
+ rollNo: "39",
+ class:"10",
+ section: "D",
+ phone: "kaha lagaya phone"
+ // Add more attributes as needed
+ }, "40": {
+ name: "Yojna",
+ rollNo: "40",
+ class:"10",
+ section: "D",
+ phone: "9479837860"
+ // Add more attributes as needed
+ }, "41": {
+ name: "Yuvraj Chouhan",
+ rollNo: "41",
+ class:"10",
+ section: "D",
+ phone: "Hamse kya kaam he"
+ // Add more attributes as needed
+ },
+};
+
+function displayDetails() {
+ const rollNumber = document.getElementById('rollNumberInput').value;
+ const user = users[rollNumber];
+
+ if (user) {
+ document.getElementById('name').textContent = `Name: ${user.name}`;
+ document.getElementById('class').textContent = `Class: ${user.class}`;
+ document.getElementById('section').textContent = `Section: ${user.section}`;
+ document.getElementById('phone').textContent = `Phone: ${user.phone}`;
+ // Display more attributes as needed
+ } else {
+ document.getElementById('name').textContent = "Name: Not found";
+ document.getElementById('class').textContent = "Class: Not found";
+ document.getElementById('section').textContent = "Section: Not found";
+ document.getElementById('phone').textContent = "Phone: Not found";
+ // Handle other fields as needed
+ }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+