✅ Do This - Milestone 7 / 9

Question

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

Tasks:

Within the insert_button event, create a new variable and save the value from position_dropdown into it
👉 Show me where 👈
Create a new variable within the insert_button event named favoriteIndex. Use getNumber() to take the value from the position_dropdown element.
Example: var favoriteIndex = getNumber("position_dropdown") - 1;
Notice that we had to put a - 1 at the end of the statement. That is because position 1 on our output display correlates to index 0 in our list.
Insert the currently selected bird into the favorites list at the location indicated in position_dropdown
Use the insertItem() function to insert the name of a bird at the location specified by the user.
Example: insertItem(favorites, favoriteIndex, names[index]);
🎯 Test Your Code

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

Use the “Add to Favorites” button to fill your favorites list.
Choosing a new bird each time, try to insert a bird at position 1, 2, and 3 to test functionality.

Toolbox

// 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 = ["Nice choice! 😊", "That's a beautiful bird!", "You're building a great collection! 🤩"];

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();
updateNotification();
});

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)
favorites.push(names[index]);
notifications.push("Added to favorites: " + names[index]);
updateFavorites();
});

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

updateNotification();

}

function updateNotification() {
showElement("notification_label");
// Milestone 6
setText("notification_label", notifications[randomNumber(0, notifications.length - 1)]);
}

onEvent("insert_button", "click", function( ) {
// Milestone 7
notifications.push("Insert button clicked.");
// Milestone 8
if(true){

}

updateFavorites();
});

Answer 1

To implement the required functionality for your insert button event, you'll need to modify the onEvent("insert_button", "click", function() { ... }) block. This will involve creating a variable to store the selected index from the dropdown menu, adjusting for the zero-based index, and then inserting the currently selected bird at that index within the favorites list.

Here's how you can do that:

onEvent("insert_button", "click", function() {
  // Milestone 7
  notifications.push("Insert button clicked.");
  
  // Get the selected index from the dropdown
  var favoriteIndex = getNumber("position_dropdown") - 1;

  // Check if the selected index is within the valid range
  if(favoriteIndex >= 0 && favoriteIndex <= favorites.length) {
    // Insert the currently selected bird into the favorites list
    insertItem(favorites, favoriteIndex, names[index]);
    
    // Notify the user about the insertion
    notifications.push("Inserted " + names[index] + " at position " + (favoriteIndex + 1));
  } else {
    notifications.push("Invalid position! Please choose a valid position (1 to " + (favorites.length + 1) + ").");
  }

  updateFavorites();
});

Explanation of the Code

1. Get the Selected Index:

   • var favoriteIndex = getNumber("position_dropdown") - 1; This line retrieves the value from the dropdown and subtracts 1 to adjust for the zero-based indexing of arrays (e.g., position 1 corresponds to index 0).

2. Validate the Index:

   • The if statement checks whether favoriteIndex is within the range of valid indices for the favorites array. This ensures that the insertion does not go out of bounds.

3. Insert the Bird:

   • insertItem(favorites, favoriteIndex, names[index]); This function call inserts the currently selected bird into the favorites array at the specified index.

4. Notifications:

   • The notifications are updated to inform the user whether the insertion was successful or if an invalid position was selected.

5. Update the Favorites:

   • The updateFavorites() function is called to refresh the displayed list of favorites.

Testing the Code

After implementing this code, you can test the functionality by clicking the "Add to Favorites" button with different birds selected and trying to insert them at positions 1, 2, and 3. Make sure that the dropdown values correspond correctly to your desired positions.

Let me know if you need any more assistance!