JS DOM manipulation help!

[solar salmon]

The innerHTML must be a string. What you have is HTML. Also, the entire value should be one single string, and it must be surrounded by backticks for string interpolation to work.

Also, this is a string manipulation problem and not a DOM manipulation problem.

[mellow jacinth]

here is the screenshot

[mellow jacinth]

i have backtick in right spaces i believe, i just copied them from what was provided

thanks for quilck replies by the way

[solar salmon]

It didn't show the backticks in the text version, but the screenshot shows them in the right place.

[solar salmon]

So what problem do you have when using this code? I don't see anything obviously wrong.

[mellow jacinth]

so the project is to add javascript elements to a website for it to add a certain functionality. I do not see any changes when i have added this part of the code

[solar salmon]

Functions have to be called to do something. Is this function ever called?

Did you read the part of the instructions about testing your code? Did you do that?

[mellow jacinth]

yes, i think i made a mistake with a one of the lines not being indented
here is the link to the project and here is the finished code:

// Task 1
// Filter PLACES by type. If the type property of an object in PLACES matches the typePreference parameter.
function filterPlacesByType(typePreference) {
// Step 1: Create a new filteredPlaces array and store it in a variable
let filteredPlaces = [];
// Step 2: Loop through PLACES
for (let place of PLACES) {
// Step 3: If a place object's type property matches the typePreference parameter, add it to filteredPlaces
if (place.type === typePreference) {
filteredPlaces.push(place);
}
}
// Step 4: After the loop, return filteredPlaces
return filteredPlaces;
}

// Task 2
function createCard(place) {
// Step 1: Create a new div element and store it in a variable
let cardElement = document.createElement("div");
// Step 2: Add the col class to the new div element
cardElement.classList.add("col");
// Step 3: Set the innerHTML of the div with a template string. It should resemble the structure shown in the readme. Interpolate the values for place.name, place.img, and place.location where needed. More info - https://wesbos.com/template-strings-html
cardElement.innerHTML = <div class="card h-100" onclick="centerPlaceOnMap('${place.name}')"> <img src="${place.img}" class="card-img-top h-100" alt="${place.name}" > <div class="card-body"> <h5 class="card-title">${place.name}</h5> <p class="card-text">${place.location}</p> </div> </div>;
// Step 4: Return the element
return cardElement;
}

// Task 3
function populateRecommendationCards(filteredPlaces) {
// Step 1: Store the DOM element with the id of "recommendations" in a variable
let recommendationsContainer = document.getElementById("recommendations");
// Step 2: Clear the "recommendations" innerHTML
recommendationsContainer.innerHTML = "";
// Step 3: Loop through the filteredPlaces array
for (let place of filteredPlaces) {
// Step 4: Create a card for each place using the createCard function
let placeCard = createCard(place);
// Step 5: Add/append each card to the recommendations DOM element
recommendationsContainer.appendChild(placeCard);
}
}

// Task 4
function findPlaceByName(placeName) {
// Step 1: Loop through the PLACES array
for (let place of PLACES) {
if (place.name === placeName) {
// Step 2: If a place object's name property matches the placeName parameter, return that place object
return place;
}
}
return null;
}

https://codesandbox.io/p/sandbox/portfolio-project-ps-marriott-homes-and-villas-forked-6cg8ys