<select class="progress-filter filter-select-wrapper select-wrapper np-button" style="border-radius: 8px;" onChange="filterCourses()">
    <option selected disabled hidden>All Courses</option>
    <option selected value="a">All Courses</option>
    <option value="n">Not Started</option>
    <option value="i">In Progress</option>
    <option value="c">Completed</option>
</select>

<script>
    let filterCourses = () => {
        console.log(event.target.value) //i
        let filterValue = event.target.value;
        let allCourses = document.querySelectorAll('.course-card');

        allCourses.forEach((course) => {
            let courseProg = course.dataset.progress;
            let hide = false;

            if(filterValue == 'n'){
                if(courseProg > 0){
                    hide = true;
                } 
            } else if (filterValue == 'i'){
                if(!(courseProg > 0 && courseProg < 100)){
                    hide = true;
                } 
            } else if (filterValue == 'c'){
                if(!courseProg != 100){
                    hide = true;
                }
            }

            if(hide){
                course.style.display = 'none';
            } else {
                course.style.display = 'flex';
            }
        })
    }
</script>
