✅ Do This - Milestone 4 / 9

To complete Milestone 4, you need to implement two key functionalities: adding a selected bird to the favorites list and hiding the "Add to Favorites" button if the length of the favorites list exceeds 3.

Here's how you can achieve that:

1. Modify the updateFavorites function to actually add the selected bird (based on the current index) to the favorites array when the "Add to Favorites" button is clicked.
2. Implement the logic to hide the "Add to Favorites" button when the favorites list length exceeds 3.

Here's the modified code with the necessary changes:

// Milestone 1
var names = getColumn("100 Birds of the World", "Name");
var pictures = getColumn("100 Birds of the World", "Image of Bird");
var index = 0;
var favorites = [];

// Milestone 5
var notifications = [];

updateHomeScreen();

function updateHomeScreen() {
  hideElement("notification_label");
  // Milestone 2
  setText("name_label", names[index]);
  setImageURL("bird_Image", pictures[index]);
}

onEvent("right_button", "click", function() {
  // Milestone 3
  if (index < names.length - 1) {
    index = index + 1;
  } 
  updateHomeScreen();
});

onEvent("left_button", "click", function() {
  // Milestone 3
  if (index > 0) {
    index = index - 1;
  } 
  updateHomeScreen();
});

onEvent("favorite_button", "click", function() {
  // Milestone 4
  if (favorites.length < 3) {  // Only add if favorites are less than 3
    favorites.push(names[index]); // Add the current bird to favorites
  }
  updateFavorites();
});

function updateFavorites() {
  setText("favorites_output", favorites.join("\n\n"));

  // Milestone 4
  if (favorites.length > 3) {
    hideElement("favorite_button"); // Hide button if favorites exceed 3
  } else {
    showElement("favorite_button"); // Show button if favorites are 3 or less
  }
  
  updateNotification();
}

function updateNotification() {
  showElement("notification_label");
  // Milestone 6
}

onEvent("insert_button", "click", function() {
  // Milestone 7
  
  // Milestone 8
  if (true) {
    // Code for Milestone 8 placeholder 
  }  
  
  updateFavorites();
});

Key Changes Made:

1. Adding to Favorites:

   • Inside the favorite button click event, I check if the favorites list length is less than 3 before adding the current bird to the favorites array.
   • Use favorites.push(names[index]); to add the currently viewed bird to the favorites.

2. Hiding the Favorite Button:

   • Adjusted the condition in updateFavorites() to check if the length of favorites exceeds 3 and hide the button accordingly.

With this code, when you click the "Add to Favorites" button for three different birds, you should see the button disappear after adding the third bird to the favorites list.

In the context of managing the visibility of elements (such as buttons), the order of hideElement and showElement can be significant depending on the specific logic and flow of your application.

However, in the provided example for handling the functionality of the "Add to Favorites" button, the order of hideElement and showElement does not impact the final result because only one of these two will execute based on the condition. Here is a breakdown of the logic:

if (favorites.length > 3) {
    hideElement("favorite_button"); // Hide the button if favorites exceed 3
} else {
    showElement("favorite_button"); // Show the button if favorites are 3 or less
}

Explanation of the Logic:

1. Checking the Length of Favorites:

   • The condition if (favorites.length > 3) checks if the number of favorites has exceeded the limit (in this case, 3).
   • If true, it hides the "Add to Favorites" button to prevent further additions.

2. Using else:

   • If the condition is false (meaning the length of favorites is 3 or less), it executes showElement, making sure the button is visible.

Why Order Matters Generally:

• Visibility Management: If you were to use both hideElement and showElement without conditions, the element could toggle visibility inconsistently. For example, calling hideElement directly before a certain check might confuse the intended logic since you could inadvertently hide the button when you actually meant for it to be visible (or vice versa).

• Performance Considerations: While it may not significantly impact performance in simple applications, lowering unnecessary function calls (like attempting to show an already visible element or hiding an already hidden one) is a good practice.

Best Practices:

• Use Conditions Wisely: Always ensure that you are checking conditions before calling show/hide functions to maintain clear and predictable behavior in your application.

• Optimized Logic Flow: Organizing your logic clearly, with all necessary checks in place, leads to cleaner, more maintainable code that is easier to understand for others (or for yourself in the future).

In summary, while the placement of hideElement and showElement in the given example does not cause an issue due to the conditional structure, ensuring that visibility changes are logically ordered and conditional is crucial for building reliable user interfaces.