Skip to content

Instantly share code, notes, and snippets.

@elizad
Last active June 4, 2018 12:02
Show Gist options
  • Save elizad/5604ecfbcdb27cc3a0bfd34a33c17384 to your computer and use it in GitHub Desktop.
Save elizad/5604ecfbcdb27cc3a0bfd34a33c17384 to your computer and use it in GitHub Desktop.
googlerev,js
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();
@elizad
Copy link
Author

elizad commented Jun 1, 2018

you need to have cors enable in the browser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment