Issues
I’ve kept up to date with my progress in my scrum board. I mainly used one issue to keep track of my update functionality progress.
like dislike functionality issue This was my main issue I worked in, every time I made progress on my like/dislike and update functionality, I added it in here. The issue is closed now that its done, but it was useful to keep track of progress.
backend issue I only posted 2 comments here to let Finn know I got update sorted out, and figured out the cors error problem, but I also kept up to date with this one to see how progress was made, and see what else needed to be done.
reflection on issues
logging progress in issues was really only done because it was satisfying to write down how I solved problems. Though they also do help in organizing what work should be done or other progress. I think some issues on our scrum board could be divided into smaller issues for ease of access. I will make sure to focus on this for tri 2.
overview of feature. What did I do fr?
Main entry to my feature is Post.html, right here: link.
Main feature was update functionality via like and dislike buttons.
main backend code
@PostMapping("/like/{name}") // Change the path variable to 'name'
public ResponseEntity<Skatepark> updateLikes(@PathVariable String name) {
List<Skatepark> skateparks = repository.findBySkateparkName(name);
if (!skateparks.isEmpty()) {
Skatepark skatepark = skateparks.get(0); // Assuming you want to work with the first matching skatepark
int currentLikes = skatepark.getTotalLikes();
skatepark.setTotalLikes(currentLikes + 1); // Increment likes by 1
// You can also update the author who liked the skatepark
repository.save(skatepark);
return new ResponseEntity<>(skatepark, HttpStatus.OK);
}
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
@PostMapping("/dislike/{name}") // Change the path variable to 'name'
public ResponseEntity<Skatepark> updated_Dislikes(@PathVariable String name) {
List<Skatepark> skateparks = repository.findBySkateparkName(name);
if (!skateparks.isEmpty()) {
Skatepark skatepark = skateparks.get(0); // Assuming you want to work with the first matching skatepark
int currentLikes = skatepark.getTotalLikes();
skatepark.setTotalLikes(currentLikes - 1); // decrease likes by 1
// You can also update the author who liked the skatepark
repository.save(skatepark);
return new ResponseEntity<>(skatepark, HttpStatus.OK);
}
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
this part was pretty tricky to get done. At first, a different method was used, I think it was push or something. but it didn’t work. I found out the easier method is to do what jokes did and use post instead of the built in update method. This worked pretty well, and I was able to get these 2 methods working. progress can be seen in issues mentioned before.
What it does is it finds the repository by a name variable, and then it grabs the total likes and either adds to it by one or lowers it by one depending on if its like or dislike. then it updates the data entry with the new like count.
Main frontend code
<div id="skatepark-cards" class="scroll-container">
<!-- This div element is used to hold dynamically created skatepark cards. It serves as a container for displaying skatepark objects. -->
</div>
<script>
this div element will hold the cards we are gathering from our database.
// Finding and updating the skatepark card element by skateparkName, showcasing encapsulation.
function updateLike(skateparkName) {
console.log("Like button clicked for skatepark: " + skateparkName);
const requestOptions = {
method: 'POST',
cache: 'no-cache',
credentials: 'include',
};
// Use the fetch function with the modified request options
//http://localhost:8085/api/skatepark/like/
//https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/like/
fetch("https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/like/" + skateparkName, requestOptions)
.then(response => {
if (!response.ok) {
throw Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Find the skatepark card element by skateparkName
const skateparkCard = document.querySelector(`[data-skatepark-name="${skateparkName}"]`);
if (skateparkCard) {
// Update the totalLikes element in the card
const totalLikesElement = skateparkCard.querySelector(".total-likes");
if (totalLikesElement) {
totalLikesElement.textContent = `Total Likes: ${data.totalLikes}`;
}
}
console.log(data); // Log the fetched data to the console
})
.catch(error => {
console.error('Fetch error:', error);
});
}
Basic usage of function is calling the like method on backend and then having the new data recived by but into an element in the skatepark card that was updated with like or dislike.
function update_dislike(skateparkName) {
console.log("dislike button clicked for skatepark: " + skateparkName);
const requestOptions = {
method: 'POST',
cache: 'no-cache',
credentials: 'include',
};
// Use the fetch function with the modified request options
//http://localhost:8085/api/skatepark/like/
//https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/like/
fetch("https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/dislike/" + skateparkName, requestOptions)
.then(response => {
if (!response.ok) {
throw Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Find the skatepark card element by skateparkName
const skateparkCard = document.querySelector(`[data-skatepark-name="${skateparkName}"]`);
if (skateparkCard) {
// Update the totalLikes element in the card
const totalLikesElement = skateparkCard.querySelector(".total-likes");
if (totalLikesElement) {
totalLikesElement.textContent = `Total Likes: ${data.totalLikes}`;
}
}
console.log(data); // Log the fetched data to the console
})
.catch(error => {
console.error('Fetch error:', error);
});
}
Basically same thing as like function but for dislike instead. no real difference here other than we call dislike function.
document.addEventListener("DOMContentLoaded", function () {
const skateparkCardsContainer = document.getElementById("skatepark-cards");
// Replace the URL with the actual URL
//http://localhost:8085/api/skatepark/
//https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/
const apiUrl = 'https://y2kcoders.stu.nighthawkcodingsociety.com/api/skatepark/';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
data.forEach(skatepark => {
// Create a new div card for each skatepark
// Creating individual skatepark cards, which encapsulate the information for each skatepark.
const car = document.createElement("div");
car.className = "car";
car.dataset.skateparkName = skatepark.skateparkName; // Add data attribute
car.innerHTML = `
<div class="details">
<div class="info">
<h3 id = "test">${skatepark.skateparkName}</h3>
<img src = "https://y2kcoders.stu.nighthawkcodingsociety.com/image/${skatepark.skateparkName}">
<p><b>Author:</b> ${skatepark.author}</p>
<p><b>Title:</b> ${skatepark.title}</p>
<p><b>Address:</b> ${skatepark.address}</p>
<p><b>Star Rating:</b> ${skatepark.starRating}</p>
<p><b>Description:</b> ${skatepark.description}</p>
<p class ="total-likes"><b>Total Likes:</b> ${skatepark.totalLikes}</p>
</div>
<div class="actions">
<button onclick="updateLike('${skatepark.skateparkName}')">Like</button>
<button onclick="update_dislike('${skatepark.skateparkName}')">dislike</button>
<button>Share</button>
</div>
</div>
`;
skateparkCardsContainer.appendChild(car);
});
})
.catch(error => console.error("Error fetching data:", error));
});
</script>
this code Creates individual skatepark cards, which encapsulate the information for each skatepark. also note the data attribute we use to update like and dislike in real time.
commits and progress
IMAGES WILL GO HERE WHEN IM SURE I’VE GOT EVERYTHING COMMITTED
This commit was the one where I figured out how like was supposed to work. This was the main starting point for the rest of my work, as the like function served as a basis for other work to be done.
This commit was the one where I fixed the cors error our team struggled on for a couple days at that point. Fix was pretty simple in hindsight, but it took lots of trial and error and looking around to fix this problem, but doing it allowed our entire project to actually work on deployed frontend.
College board learning and mcq
the mcq isn’t done yet but it will go in this link when i’m done. I also plan on reviewing my strengths and weaknesses and what I need to review after the mcq so I can test myself and see what I do and don’t understand. mcq blog
tri 1 reflection
this trimester went pretty smoothly, and there was lots of collaboration and working on the project, which is a pretty big leap from the suffering I faced in last year. I think next tri, I want to build a more substantial project feature that I really think is cool, but I can say this tri, things went pretty well for me and my team.