I cannot use/access the carousel.js file - GET http://name.test/js/carousel.js net::ERR_ABORTED 404 (Not Found)

front-page.php

    <div class="row">
        <div class="col-lg-4">
            <div class="carousel_item carousel_item--visible">first post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">second post</div>
        </div>
        <div class="col-lg-4">
            <div class="carousel_item">third post</div>
        </div>
    </div>

    <div class="carousel_actions">
        <button id="carousel_button--prev" aria-label="previous slide">
            <
        </button>
        <button id="carousel_button--next" aria-label="next slide">
            >
        </button>
    </div>
</div>
<script type="text/javascript" src="js/carousel.js"></script>""

JS code:

let slidePosition = 0;
const slides = document.getElementsByClassName('carousel_item');
const totalSlides = slides.length;

document.getElementById('carousel_button--next').addEventListener("click", function() {
    moveToNextSlide();
});

document.getElementById('carousel_button--prev').addEventListener("click", function() {
    moveToPrevSlide();
});

function moveToNextSlide() {
    console.log('next works');
}

function moveToPrevSlide() {
    console.log('prev works');
}

functions.php

function load_js(){

    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
    wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
    wp_enqueue_script('carousel');
}
add_action('wp_enqueue_scripts', 'load_js');

file structure

.
├── js
│   ├── bootstrap.min.js
│   └── carousel.js
├── index.php
├── front-page.php
└── functions.php

(there are other files there, only included the important ones for an easier overview)

I'm pretty sure I typed the correct path to the carousel.js file, can anyone enlighten me what's the problem here?