Здравствуйте форумчане, подскажите как можно сделать галерею фото с возможностью голосования за фото, так же нужно сделать так чтобы фото располагались от большего рейтинга к меньшему, я так скажем не очень знаю JS так, что вот код который я нашел, он вроде работает но немного коряво, каждый раз когда я нажимаю на Vote то страница обновляется, так же тут всего 3 фотки, прошу помочь, мне хотя бы просто сделать чтобы этот код был штук на 100 фотографий
<div id="gallery"></div>
document.addEventListener("DOMContentLoaded", function () {
const photos = [
{ id: 1, src: "./", votes: 0 },
{ id: 2, src: "./", votes: 0 },
{ id: 3, src: "./", votes: 0 },
];
const gallery = document.getElementById("gallery");
renderGallery(photos);
function renderGallery(photos) {
const sortedPhotos = photos.sort((a, b) => b.votes - a.votes);
gallery.innerHTML = "";
sortedPhotos.forEach((photo) => {
const photoElement = createPhotoElement(photo);
gallery.appendChild(photoElement);
});
}
function createPhotoElement(photo) {
const container = document.createElement("div");
container.className = "photo-container";
const image = document.createElement("img");
image.src = photo.src;
container.appendChild(image);
const voteButton = document.createElement("button");
voteButton.innerText = "Vote";
voteButton.addEventListener("click", () => voteForPhoto(photo.id));
container.appendChild(voteButton);
const votesSpan = document.createElement("span");
votesSpan.innerText = `Votes: ${photo.votes}`;
container.appendChild(votesSpan);
return container;
}
function voteForPhoto(photoId) {
const photo = photos.find((p) => p.id === photoId);
if (photo) {
photo.votes++;
renderGallery(photos);
localStorage.setItem("photoData", JSON.stringify(photos));
}
}
const storedData = localStorage.getItem("photoData");
const initialPhotos = storedData ? JSON.parse(storedData) : photos;
renderGallery(initialPhotos);
});