How to pass paramter in URL javascript Using fetch methi

With the below HTML code I created a Date range picker after that added an HTTP post using javascript.

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fraction daterange</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

</head>
<body>
    <input type="text" name="daterange" value="" />

    <script>
        $(function () {
            $('input[name="daterange"]').daterangepicker({
                opens: 'left'
            }, function (start, end, label) {
                variable_one = start.format('YYYY-MM-DD');
                console.log("Hai hari its working");
                console.log(variable_one);
            });
        });
        fetch("http://localhost:8000/hvals_hash?key=30-8-21")
            .then(response => response.json())
            .then(data => console.log(data));
    </script>
</body>
</html>

From this code, I stored date in variable_one, URL after passing like this http://localhost:8000/hvals_hash?key=${variable_one} after passing like this I didn’t get any response from API but API request Hitting fast API.

Problems :

  1. How to pass Variable in URL with fetch method

  2. How to GET values from date range ( EX: 13-12-2021 ) and call API with variable

  3. display data on the console after selecting a date from a date picker.

Note: URL Example ( http://localhost:8000/hvals_hash?key=30-8-21 )