Kivory Posts - Answer Overflow

Kivory

•Created by Kivory on 11/21/2024 in #front-end

How to parse through images in a folder and display each image on the webpage?

I'd assume to use document.createElement() in a for loop for each file in the folder. How can I go around making that for loop though? How can I use javascript to read what's inside the folder?

4 replies

KPCKevin Powell - Community

•Created by Kivory on 11/21/2024 in #front-end

Trying to get a custom div to follow the cursor. Gives me error "cursorDot.style is undefined"

Here's the code I used in my javascript file:

const cursorDot = document.querySelectorAll(".cursor-dot");

window.addEventListener("mousemove", function (e) {

    const posX = e.clientX;
    const posY = e.clientY;

    console.log(posX); 
    
    cursorDot.style.left = `${posX}px`;
    cursorDot.style.top = `${posY}px`;

});

const cursorDot = document.querySelectorAll(".cursor-dot");

window.addEventListener("mousemove", function (e) {

    const posX = e.clientX;
    const posY = e.clientY;

    console.log(posX); 
    
    cursorDot.style.left = `${posX}px`;
    cursorDot.style.top = `${posY}px`;

});

and the HTML and CSS:

<div class="cursor-dot"></div>

<div class="cursor-dot"></div>

.cursor-dot {
    height: 15px;
    width: 15px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.cursor-dot {
    height: 15px;
    width: 15px;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

error in console: "cursorDot.style is undefined"

3 replies

KPCKevin Powell - Community

•Created by Kivory on 10/3/2024 in #front-end

Following "infinite horizontal scroll animation" tutorial from Kevin on Youtube; not working (help!)

35 replies

Gaming

Programming