Question

✅ Do This - Milestone 3 / 9

Tasks:

When the user presses right_button, make sure they cannot scroll past the end of the list.
👉 Show me where 👈
In the onEvent for right_button, replace the true statement within the If conditional to check that the user is not trying to navigate too far forward.
If the user tries to navigate past the end of the list, there will be a run-time error. The conditional should check to see if the index value is less than names.length- 1
Example: if (index < names.length-1)

When the user presses left_button, make sure they cannot scroll before the beginning of the list.
In the onEvent for left_button, replace the true statement within the If conditional to check that the user is not trying to navigate too far backwards.
If the user tries to navigate past the beginning of the list, there will be a run-time error. The conditional should check to see if the index value is greater than zero.
Example: if (index > 0)
🎯 Test Your Code

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

Test to see if the program stops the user from navigating below an index of 0 when clicking the left_button.
Test to see if the program stops the user from navigating above an index of names.length - 1 when clicking the right_button.

// 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(true) {
index = index + 1;
}
updateHomeScreen();
});

onEvent("left_button", "click", function( ) {
// Milestone 3
if (true) {
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

To ensure the user cannot scroll past the end or beginning of the list of birds when clicking the left or right buttons, you need to implement the appropriate conditions in the `onEvent` handlers for these buttons. Below are the changes you should make to your code to accomplish this:

**Modified Code:**

```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
// Check if the index is less than names.length - 1
if (index < names.length - 1) {
index = index + 1;
}
updateHomeScreen();
});

onEvent("left_button", "click", function() {
// Milestone 3
// Check if the index is greater than 0
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
// Update to show or hide favorite_button based on conditions
if (favorites.length > 0) {
showElement("favorite_button");
} else {
hideElement("favorite_button");
}

updateNotification();
}

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

onEvent("insert_button", "click", function() {
// Milestone 7
// Milestone 8
// Add the necessary logic here
updateFavorites();
});
```

### Explanation of Changes:
1. **For the `right_button`:**
- The condition `if (index < names.length - 1)` checks if the current `index` is less than the last index of the `names` array. This prevents the user from going beyond the last item in the list.

2. **For the `left_button`:**
- The condition `if (index > 0)` checks if the current `index` is greater than 0, which ensures the user cannot scroll beyond the first item in the list.

### Testing:
- To test if the program stops the user from navigating below an index of 0, click the `left_button` when on the first item. The index should not decrease.
- To test if the program stops the user from navigating above an index of `names.length - 1`, click the `right_button` when on the last item. The index should not increase.

This logic will prevent the runtime errors and ensure the user stays within the valid bounds of your list.