Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   нужно сделать галерею фото (https://javascript.ru/forum/dom-window/85697-nuzhno-sdelat-galereyu-foto.html)

BLIGER 09.01.2024 17:05

нужно сделать галерею фото
 
Здравствуйте форумчане, подскажите как можно сделать галерею фото с возможностью голосования за фото, так же нужно сделать так чтобы фото располагались от большего рейтинга к меньшему, я так скажем не очень знаю JS так, что вот код который я нашел, он вроде работает но немного коряво, каждый раз когда я нажимаю на Vote то страница обновляется, так же тут всего 3 фотки, прошу помочь, мне хотя бы просто сделать чтобы этот код был штук на 100 фотографий:help:

<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);
});


Часовой пояс GMT +3, время: 03:54.