JSFiddle - React, Tailwind, and code Playground

by von

JavaScript

const initizeScript = () => {
    const imgs = document.querySelectorAll("figure");
    const prevModal = document.querySelector(".modal");
    const modal = prevModal.cloneNode(true);
    prevModal.parentNode.replaceChild(modal, prevModal);
    const modalImage = document.querySelector(".modal-image");
    const closePrev = document.querySelector(".close");
    const close = closePrev.cloneNode(true);
    closePrev.parentNode.replaceChild(close, closePrev);
    const midDiv = document.querySelector(".mid-div");
    const prevNextBtn = document.querySelector("i.fa-arrow-right");
    const nextBtn = prevNextBtn.cloneNode(true);
    prevNextBtn.parentNode.replaceChild(nextBtn, prevNextBtn);
    const prevPrevBtn = document.querySelector("i.fa-arrow-left");
    const prevBtn = prevPrevBtn.cloneNode(true);
    prevPrevBtn.parentNode.replaceChild(prevBtn, prevPrevBtn);

    const closeModal = function () {
        modal.classList.toggle("hide");
    };

    const scrollToCenter = function () {
        window.scrollTo(0, midDiv.offsetTop - window.innerHeight / 2);
        const midDivVirtual = document.createElement("div");
        midDivVirtual.id = "newDiv";
        midDivVirtual.style.position = "absolute";
        midDivVirtual.style.top =
            (
            document.body.scrollHeight / 2 -
            window.parent.window.innerHeight / 2
            ).toString() + "px";
        document.body.append(midDivVirtual);
        midDivVirtual.scrollIntoView();
    };

    const onImageClick = function (e) {
        try {
            scrollToCenter();
        } catch (e) {
        } finally {
            const img = e.target.querySelector(".image");
            const src = img.src;
            modalImage.src = src;
            modalImage.dataset.index = img.dataset.index;
            const title = img.dataset.title;
            const description = img.dataset.description;
            document.querySelector(".caption h3").innerText = title || "";
           ...