Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2024, 17:05
Новичок на форуме
Отправить личное сообщение для BLIGER Посмотреть профиль Найти все сообщения от BLIGER
 
Регистрация: 09.01.2024
Сообщений: 1

нужно сделать галерею фото
Здравствуйте форумчане, подскажите как можно сделать галерею фото с возможностью голосования за фото, так же нужно сделать так чтобы фото располагались от большего рейтинга к меньшему, я так скажем не очень знаю 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);
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно сбросить счетчик в начало (Зациклить галерею). AndriiS Общие вопросы Javascript 2 28.12.2018 03:05
Нужно сделать скрипт для Ucoz stanley-kr Работа 0 08.05.2015 06:00
Нужно сделать нестандартный жаваскрпит mer1985 Работа 11 18.01.2013 20:47
Нужно сделать открытие див блоков elizaveta199309 Общие вопросы Javascript 1 30.12.2012 20:50