Create a Draggable Bottom Sheet Modal in HTML CSS & JavaScript

// script.js
const showModalBtn =
    document.querySelector(".show-modal");
const bottomSheet =
    document.querySelector(".bottom-sheet");
const dragHandle =
    document.querySelector(".drag-handle");
const closeBtn =
    document.querySelector(".close-btn");

let isDragging = false;
let startY, startBottom;

showModalBtn.addEventListener("click", () => {
    bottomSheet.style.display = "block";
    document.body.style.overflow = "hidden";
    bottomSheet.style.bottom = "0";
});

dragHandle
    .addEventListener("mousedown", startDragging);
closeBtn
    .addEventListener("click", hideBottomSheet);

function startDragging(e) {
    e.preventDefault();
    isDragging = true;
    startY = e.clientY;
    startBottom =
        parseInt(getComputedStyle(bottomSheet).bottom);

    document.addEventListener("mousemove", drag);
    document.addEventListener("mouseup", stopDragging);
}

function drag(e) {
    if (!isDragging) return;
    const deltaY =
        e.clientY - startY;
    bottomSheet.style.bottom =
        Math.max(startBottom - deltaY, 0) + "px";
}

function stopDragging() {
    isDragging = false;
    document
        .removeEventListener("mousemove", drag);
    document
        .removeEventListener("mouseup", stopDragging);
}

function hideBottomSheet() {
    bottomSheet.style.display = "none";
    document.body.style.overflow = "auto";
    bottomSheet.style.bottom = "-100%";
}