Method 1 for resquesting and rendering meeting data

myMeeting.html

{% extends "main/base_templates/base.html" %} {% block content %}


<div class="content-section">
    <div class="title">
        <div>{{title}}</div>
        <div>{{message}}</div>
    </div>
    {% csrf_token %}
    <fieldset class="form-group">
      <legend class="border-bottom mb-4">Enter Meeting Dates</legend>
                    <div class="container">
                        <div class="row">
                            <div class="col-sm">
                                FROM
                            </div>
                                TO
                        </div>
                        <div class="row">
                            <div class="col-sm">
                                <input id="startDate" type="date" name="startDate" placeholder="enter-start-date"/>
                            </div>
                                <input id="endDate" type="date" name="endDate" placeholder="enter-end-date"/>
                        </div>
                    </div>

                             
                        <div id="demo"></div>  
    </fieldset>
    <div style="display: grid;justify-self:center;justify-content:center;">
      <button id="submit" class="btn btn-outline-info" type="button">Submit</button>
    </div>
    <script>
        document.getElementById('submit').addEventListener('click',()=>{
            console.log("waiting for click..");
            console.log("clicked");
            makerequest();
        });

        console.log("running in background");
        console.log("enter dates");
        /* to use django variable --- {{variableName}} in quotes*/
        let myTitlefromDjango = "{{title}}";
        let myMessagefromDjango = "{{message}}";
        let myJsonTokens = "{{myJsonTokens}}";
        const customHeader = {  
                                Accept: 'application/json',
                                Authentication: 'Bearer '+myJsonTokens,
                            }
        // console.log('\n\ncustomheader ->' ,customHeader);
        // console.log("title  : ",myTitlefromDjango);
        // console.log("message : ",myMessagefromDjango);
        // console.log("got tokens from backend :",myJsonTokens);
        // console.log("\ntoken : ",myJsonTokens['access_token']);

        async function myMeetings(urlPassed) {
                    let obj;
                    const res = await fetch(urlPassed, 
                                            {
                                                headers: customHeader
                                            });
                    obj = await res.json();
                    console.log(obj)
                    return obj;
                    }

        function makerequest(){
            let begin = document.getElementById('startDate');
            let end = document.getElementById('endDate');
            console.log("make request with start date : ",begin.value+"T12:00:00Z"," and end date : ",end.value+"T12:00:00Z");
            var responseReturned;
            const startDate = begin.value+"T12:00:00Z";
            const endDate = end.value+"T12:00:00Z";
            let url = `https://api.getgo.com/G2M/rest/historicalMeetings?startDate=${startDate}&endDate=${endDate}`;
            console.log("make reqest to url : ",url);


            // fetch('',{headers : {}}).then(myResp=>myResp.json()).then(data=>responseReturned = data).then(()=>console.log(responseReturned));
                console.log("making request to fetch meeting data........");
                responseReturned = myMeetings(url);
                console.log('\n\n\n\n\nrender the result below .........')
            }
       

    </script>
</div>
{% endblock content%}