Question

✅ Do This - Milestone 4 / 9

Note: You can click the instructions below to expand them and see more specific instructions

Tasks:

Add the selected bird to the favorites list when the user clicks "❤ Add to Favorites"
Hide favorite_button if the length of the favorites list is greater than 3

🎯 Test Your Code

Note: You can click the tests below to expand them and see more specific instructions

Scroll through the birds and click the “Add to Favorites” button to for three different birds.
Add three birds to the list and see if the “Add to Favorites” button disappears.

// 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

updateFavorites();
});

function updateFavorites() {
setText("favorites_output", favorites.join("\n\n"));
// Milestone 4
if(true){
showElement("favorite_button");
} else {
hideElement("favorite_button");
}

updateNotification();

}

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

}

onEvent("insert_button", "click", function( ) {
// Milestone 7

// Milestone 8
if(true){

}

updateFavorites();
});

Answer 1

Why did you put hide elements above of show elements

Answer 2

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:

```javascript
// 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.

Answer 3

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:

```javascript
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.