Sprint 3 Reflection

Our project for Sprint 3 was a social media site that allowed users to review a set amount of books and comment under that book. They were also able to rate the book out of five stars and give it a like if they wanted. To get a new book, they could refresh the page to find a new book to rate. In Sprint 3, I worked on the frontend with my partener Amhad. We split the frontend into one repository and then the backend into another. The frontend which I worked in was coded in Javascript and HTML. It was split into the main book review page and then the other page for posts. The backend was coded in python and split into groups, channels, and sections. We start of by creating a prototype of the UI to see how we want to organize the page. This prototype allowed us to narrow down our options and see how we want to make our social media page as interactive and appealing as possible.

function toggleLike() {
      liked = !liked;
      const heart = document.getElementById('heart');
      heart.innerText = liked ? '❤️' : '♡';
      currentLikes += liked ? 1 : -1;
      document.getElementById('likeButton').innerHTML = `<span id="heart">${heart.innerText}</span> Like (${currentLikes})`;
      likesCount[book.title] = currentLikes;
      localStorage.setItem('likes', JSON.stringify(likesCount));
    }

```

function rateBook(rating) {
  currentRating = rating;
  document.querySelectorAll('#rating span').forEach((star, index) => {
    star.style.color = index < rating ? '#FFD700' : '#ccc';
  });
}

displayComments();

```

My greatest accomplishment was the like and star rating system that allows user to rate the books. The toggleLike function toggles the liked boolean, updates the heart text to either a filled heart or an empty heart, modifies the current likes count, and saves the updated like count to local storage in a JSON format. It dynamically updates the page by displaying the like count and icon within the like button. The rateBook function sets the current rating and loops through the rating stars. It checks if the index is less than the rating to color stars gold or gray, visually showing the rating. Both functions handle page elements, conditions, and storage to manage likes and ratings.