// this one is for a select field
    const handleCourseLevelChange = () => {
        let query = new URLSearchParams($page.url.searchParams.toString());
        query.set('level', selectedCourseLevel);
        goto(`?${query.toString()}`);
    }

    // this one is also for a select field
    const handleCourseTagChange = () => {
        let query = new URLSearchParams($page.url.searchParams.toString());
        query.set('tag', selectedCourseTag);
        goto(`?${query.toString()}`);
    }

    // this one is for an input field, the keepFocus: true maintains the focus on the input field after goto is executed
    const handleKeywordChange = () => {
        let query = new URLSearchParams($page.url.searchParams.toString());
        query.set('keyword', keyword);
        goto(`?${query.toString()}`, {
            keepFocus: true
        });
    }