https://dsai-coep.netlify.app/members.js

1/*inspiration 
2PINTEREST
3*/
4    // const MemberTemplate = (link, name)=>`
5    //     <div class="grid-item">
6    //         <div class="grid-item-content">
7    //         <img src="${link}" alt="${name}">
8    //         <h3>${name}</h3>
9    //         </div>
10    //     </div>`;
11const memberData = [
12    ["./images/2024/members/harshwardhan.jpg", "Harshwardhan Deshmukh"],
13    ["https://raw.github.com/satvikg7/satvikg7/main/static/satvikg7.jpg", "Satvik Gaikwad"],
14    ["https://raw.github.com/adityasd314/adityasd314/main/static/adityasd314.jpg", "Aditya Deshmukh"],
15    ["./images/2024/members/Sarthak Pawar.jpg","Sarthak Pawar"],
16    ["./images/2024/members/Anand Panajkar.jpg","Anand Panajkar"],
17    ["./images/2024/members/Shivansh Kaul.jpg","Shivansh Kaul "],
18    ["./images/2024/members/Sumedh Chavan.jpg","Sumedh Chavan"],
19    ["./images/2024/members/Disha Kadam.jpg","Disha Kadam",0],
20    ["./images/2024/members/Tanishq Borkar.jpg","Tanishq Borkar"],
21    ["./images/2024/members/Aryan Jotshi .jpg","Aryan Jotshi"],
22    ["./images/2024/members/Aditya Choudhary.jpg","Aditya Choudhary"],
23    ["./images/2024/members/Hardik Mutha.jpg","Hardik Mutha"],
24    ["./images/2024/members/Sreya S.jpg","Sreya S",0],
25    ["./images/2024/members/Tushar Kachare.jpg","Tushar Kachare"],
26    ["./images/2024/members/Moin Hasan Shaikh.jpg","Moin Hasan Shaikh"],
27    ["./images/2024/members/Anjali Gangotri.jpg","Anjali Gangotri",0],
28    ["./images/2024/members/Aniket Ware.jpg","Aniket Ware"],
29    ["./images/2024/members/Arnav Singhal.jpg","Arnav Singhal"],
30    ["./images/2024/members/Aryan Mehta.jpg","Aryan Mehta"],
31    ["./images/2024/members/Rukmini Nazre.jpg","Rukmini Nazre",0],
32    ["./images/2024/members/Ishita Humnabadkar.jpg","Ishita Humnabadkar",0],
33    ["./images/2024/members/Kedar Shiralkar.jpg","Kedar Shiralkar"],
34    ["./images/2024/members/Omkar Oak.jpg","Omkar Oak"],
35    ["./images/2024/members/Abhishek Shinde.jpg","Abhishek Shinde"],
36    ["./images/2024/members/Spandan Jathar .jpg","Spandan Jathar "],
37    ["./images/2024/members/Prasad Patil.jpg","Prasad Patil"],
38    ["./images/2024/members/Ananta Hatwar.jpg","Ananta Hatwar"],
39    ["./images/2024/members/Mohit Apte.jpg","Mohit Apte"],
40    ["./images/2024/members/Sahiti Adurthi.jpg","Sahiti Adurthi",0],
41    ["./images/2024/members/Swarnim Kamble.jpg","Swarnim Kamble"],
42    ["./images/2024/members/Rujuta Budke.jpg","Rujuta Budke"],
43    ["./images/2024/members/Shlok Deshpande.jpg","Shlok Deshpande"],
44    ["./images/2024/members/Shubham Gandhi.jpg","Shubham Gandhi"],
45    ["./images/2024/members/Vedant  Deshmukh.jpg","Vedant  Deshmukh"],
46    ["./images/2024/members/Mihika Dravid .jpg","Mihika Dravid ",0],
47    ["./images/2024/members/Dhanashree Pawar .jpg","Dhanashree Pawar ",0],
48    ["./images/2024/members/Siddhi Shinde.jpg","Siddhi Shinde",0],

49    ["./images/2024/members/Vaishnavi Kulkarni.jpg","Vaishnavi Kulkarni",0],
50    ["./images/2024/members/Ishan Patwardhan.jpg","Ishan Patwardhan"],
51    ["./images/2024/members/Sumit Girnar.jpg","Sumit Girnar"],
52 ];
53
54
55
56const gridContainer = document.querySelector(".grid-container");
57memberData.forEach(([link, name, isfemale])=>{
58    const div = document.createElement("div");
59    div.className = "grid-item";
60    const childDiv = document.createElement("div");
61    childDiv.className = "grid-item-content";
62    const image = document.createElement("img");
63    image.src = link;
64    image.title = name;
65    image.onerror = function(){
66        if(isfemale === 0)
67        this.src = `https://avatar.iran.liara.run/public/girl?username=${name}`
68    else
69    this.src = `https://avatar.iran.liara.run/public/boy?username=${name}`
70
71    }
72    const heading = document.createElement("h3");
73    heading.innerText = name;
74    childDiv.appendChild(image);
75    childDiv.appendChild(heading);
76    div.appendChild(childDiv);
77    
78    gridContainer.append(div);
79})
80const cards = document.querySelectorAll(".grid-item");
81
82cards.forEach((item) => {
83  item.addEventListener("mouseover", () => {
84    cards.forEach((el) => el.classList.remove("active"));
85    item.classList.add("active");
86  });
87});