Looking for help in integrating Bootstrap cards while dynamically generating elements using JavaScript?
I am working on a project where I need to generate a list of restaurant recommendations based on user preferences entered through a form, utilizing the Yelp Business Search and Google Maps APIs. I want each recommendation to be displayed within a Bootstrap card for better organization and visual appeal. However, I'm struggling to find resources or examples that demonstrate how to achieve this with JavaScript.
The current code I have generates the list of recommendations using the data retrieved from my API calls. I aim to present each restaurant along with its information in a Bootstrap card layout for a cleaner look on my webpage. As a novice software engineering bootcamp student, any advice or guidance on how to accomplish this task would be greatly appreciated.
function updateResults(data, userLocation) {
const resultsContainer = document.getElementById("results-container");
const mapContainer = document.getElementById("map-container");
// Clear any existing results from the container
resultsContainer.innerHTML = "";
// Initialize the map with user's location and search results
initMap(userLocation, mapContainer, data.businesses);
// Loop through the search results and create HTML elements for each one
data.businesses.forEach(result => {
const resultElement = document.createElement("div");
const nameElement = document.createElement("h2");
const nameLink = document.createElement("a");
nameLink.href = result.url;
nameLink.innerText = result.name;
nameElement.appendChild(nameLink);
const imageElement = document.createElement("img");
imageElement.src = result.image_url;
imageElement.style.width = "100px";
imageElement.style.height = "100px";
imageElement.style.objectFit = "cover";
const addressElement = document.createElement("p");
addressElement.innerText = result.location.display_address.join(", ");
const distanceElement = document.createElement("p");
if (result.distance_data.distance){
distanceElement.innerText = `${result.distance_data.distance.text} miles from your location`;
}
const durationElement = document.createElement("p");
if (result.distance_data.duration){
durationElement.innerText = `${result.distance_data.duration.text} minutes from your location`;
}
const priceElement = document.createElement("p");
priceElement.innerText = result.price;
const ratingElement = document.createElement("p");
ratingElement.innerText = `${result.rating} stars`;
// Append all elements to the result element
resultElement.appendChild(nameElement);
resultElement.appendChild(imageElement);
resultElement.appendChild(addressElement);
resultElement.appendChild(distanceElement);
resultElement.appendChild(durationElement);
resultElement.appendChild(priceElement);
resultElement.appendChild(ratingElement);