Grow

[humayuntariq98]

Grow 1- Making sure that when the destination gets updated, the already existing reviews are removed. So if Paris was changed to Turin, the reviews that were there for Paris should be removed.

async function update(req, res) { try { const destinationData = { ...req.body }; const editedDestination = await Destination.findById(req.params.id); editedDestination.name = destinationData.name; editedDestination.favoriteSpots = destinationData.favoriteSpots; editedDestination.budget = destinationData.budget;

    // Fetch updated image from Google Places API
    const response = await axios.get(
        "https://maps.googleapis.com/maps/api/place/textsearch/json",
        {
            params: {
                query: editedDestination.name,
                key: process.env.GOOGLE_PLACES_API_KEY,
            },
        }
    );
    // Store api key inside env as google places API
    if (
        response.data.results &&
  response.data.results[0] &&
  response.data.results[0].photos
    ) {
        const photoReference = response.data.results[0].photos[0].photo_reference;
        const imageUrl = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=800&photoreference=${photoReference}&key=${process.env.GOOGLE_PLACES_API_KEY}`;
        editedDestination.image = imageUrl;
    }

    await editedDestination.save();
    res.redirect("/destinations");
} catch (error) {
    handleError(res, "something went wrong", error);
}

}

Grow 2- Changing the number rating system to Star icons

<form action ....

Add a Review

        <form action="/destinations/<%=foundDestination._id%>/reviews" method="POST" class="mb-4">
            <div class="mb-3">
                <label for="hotels" class="form-label">Hotel Rating</label>
                <input type="number" name="hotels" min="0" max="5" required class="form-control-sm" id="hotels">
            </div>
            <div class="mb-3">
                <label for="food" class="form-label">Food Rating</label>
                <input type="number" name="food" min="0" max="5" required class="form-control-sm" id="food">
            </div>
            <div class="mb-3">
                <label for="summary" class="form-label">Summary</label>
                <input type="text" name="summary" maxlength="100" required class="form-control" id="summary">
            </div>
            <button type="submit" class="btn btn-primary">Submit Review</button>
        </form>
    <% } else { %>
        <p>Log In to add reviews</p>
    <% } %>

    <% if (foundDestination.reviews.length) { %>
        <h3 class="mb-4">Reviews</h3>
        <% foundDestination.reviews.forEach(r => { %>
            <div class="card mb-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <img alt="avatar" src="<%= r.userAvatar %>" referrerpolicy="no-referrer" class="img-fluid rounded-circle">
                            <p class="text-center mt-2"><%= r.userName %></p>
                        </div>
                        <div class="col-md-3">
                            <p>Date: <%= r.postDate.toDateString() %></p>
                        </div>
                        <div class="col-md-3">
                            <p>Hotels: <%= r.hotels %></p>
                            <p>Food: <%= r.food %></p>
                        </div>
                        <div class="col-md-3">
                            <p>Total Rating: <%= (r.hotels + r.food) / 2 %></p>
                        </div>

[krabecb]

I think these are definitely good stretch goals to take on moving forward! You also have a good foundation for refactoring to star icons. Removing existing reviews would take priority as this functionality would be expected/beneficial to user experience. But overall, your application is functional with required basic CRUD. Keep us posted on this! Would love to see the outcome! 💯

[krabecb]

Instructional Grow: Build upon current CSS - landing page feels a bit empty, centering and spacing. I wonder what other APIs can compliment this app! Can currently delete anyone’s post! Sharp or rounded border edges - perhaps stick to one?