googlerev,js

google review

const app = document.getElementById('root-rev');

const logo = document.createElement('img');
logo.src = '~/../images/app/google logo.png';
logo.className = 'img-fluid';
logo.width = '80';
logo.alt = "Google";

const txt = document.createElement('span');
txt.className = 'pl-1';
txt.textContent = "Ratings and Reviews";

const googlestars = document.createElement('span');
googlestars.innerHTML = ` <span class=""><img src="/images/app/stars.PNG" alt="rating"> </span><span style="font-size: 1rem;"> 107 reviews</span>`;
  
const carouselid = document.createElement('div');
carouselid.className = 'carousel slide col-12';
carouselid.id = "carouselExampleControls";
carouselid.setAttribute('data-ride', 'carousel');
carouselid.setAttribute('width', '100%');

const carouselinner = document.createElement('div');
carouselinner.className = 'carousel-inner  lightgrey row';

const row = document.createElement('div');
row.className = 'row ';

app.appendChild(logo);
app.appendChild(txt);

var request = new XMLHttpRequest();

request.open('GET', 'https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJnRIwTOim2EcRMxFUkHR9wzQ&key=AIzaSyAK0imHJAd-XjoZAndkMYU9pXkugnvnWFo', true);


request.onload = function () {
    var data = JSON.parse(this.response);


    if (request.status >= 200 && request.status < 400) {

        //console.log(data);
        //console.log(data.result.reviews);
        //console.log(data.result.rating);
        //console.log(data.result.rating.length); 

        const arating = document.createElement('div');
        arating.className = ' col-md-12   google-reviews__no ';
        arating.textContent = data.result.rating;
        app.appendChild(arating);

        arating.appendChild(googlestars);

        app.appendChild(row);


        data.result.reviews.forEach(reviews => {

            //console.log(reviews.rating);

            const col = document.createElement('div');
            col.className = 'col-md-6 carousel-item';

            const card = document.createElement('div');
            card.className = 'google-reviews__text mt-3';

            const h1 = document.createElement('h6');
            h1.className = 'text-capitalize d-inline';
            h1.textContent = reviews.author_name;
            h1.innerHTML = reviews.author_name;

            const reviewrate = document.createElement('span');
            reviewrate.className = "google-reviews__no";
            reviewrate.textContent = reviews.rating;
            let stars = '';
            for (let i = 0; i < reviews.rating; i++) {
                stars += '<i class="fa fa-star" aria-hidden="true"></i>';

            }
            reviewrate.innerHTML = `<span >
                               <span class="row-stars">
                                   ${stars}
                               </span>
                            </span>`;

            const time = document.createElement('p');
            time.className = 'greviewdate mb-0';
            time.textContent = reviews.relative_time_description;

            const p = document.createElement('p');
            reviews.text = reviews.text.substring(0, 400);
            p.textContent = `${reviews.text}...`;


            row.appendChild(carouselid);
            carouselid.appendChild(carouselinner);

            carouselinner.appendChild(col)
            carouselinner.firstElementChild.classList.add("active");

            col.appendChild(card);

            card.appendChild(h1);
            card.appendChild(reviewrate);

            card.appendChild(reviewrate);
            card.appendChild(time);
            card.appendChild(p);

           // console.log(reviewrate);
           // console.log(carouselinner.firstElementChild.className);

        });


        const prev = document.createElement('a');
        prev.className = "carousel-control-prev";
        prev.setAttribute('data-slide', 'prev');
        prev.setAttribute('href', '#carouselExampleControls');
        prev.setAttribute('role', 'button');


        const previcon = document.createElement('span');
        previcon.className = "carousel-control-prev-icon";
        previcon.setAttribute('aria-hidden', 'true');
        previcon.setAttribute('background', 'red');

        const previconsr = document.createElement('span');
        previconsr.className = 'sr-only';
        previconsr.textContent = 'Previous';


        const next = document.createElement('a');
        next.className = 'carousel-control-prev';
        next.setAttribute('data-slide', 'prev');
        next.setAttribute('href', '#carouselExampleControls');
        next.setAttribute('role', 'button');

        const nexticon = document.createElement('span');
        nexticon.className = 'carousel-control-next-icon';
        nexticon.setAttribute('aria-hidden', 'true');

        const nexticonsr = document.createElement('span');
        nexticonsr.className = 'sr-only';
        nexticonsr.textContent = 'Next';


        row.appendChild(prev);
        prev.appendChild(previcon);
        prev.appendChild(previconsr);
        row.appendChild(next);
        next.appendChild(nexticon);
        next.appendChild(nexticonsr);

    } else {
        console.log('error');
    }

}
request.send();

you need to have cors enable in the browser