Do This - Milestone 5 / 9

Question

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

Tasks:

Add at least 3 of your own elements into the notifications list
🎯 Test Your Code

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

In the Debug Console, print out various values of notifications

// 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)
favorites.push(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

}

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

// Milestone 8
if(true){

}

updateFavorites();
});

Answer 1

To complete Milestone 5, we will be adding at least 3 custom elements to the notifications array. We will then print out the values of the notifications in the Debug Console for testing purposes.

Here’s how you can implement these requirements in your existing code:

Step 1: Modify the updateNotification function

First, let's make the updateNotification function populate the notifications array with custom elements whenever it updates the favorites. We can also display these notifications on the screen if necessary.

Step 2: Add Elements to the Notifications List

Let's assume you want to add notifications when:

1. A new favorite bird is added.
2. The user navigates left.
3. The user navigates right.

Now, update your code as follows:

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 = [];
var notifications = [];

updateHomeScreen();

function updateHomeScreen() {
  hideElement("notification_label");
  setText("name_label", names[index]);
  setImageURL("bird_Image", pictures[index]);
  // Test Code
  print("Current Notifications: " + notifications.join(", "));
}

onEvent("right_button", "click", function() {
  if (index < names.length - 1) {
    index = index + 1;
    notifications.push("Navigated to next bird: " + names[index]);
  } 
  updateHomeScreen();
  updateNotification();
});

onEvent("left_button", "click", function() {
  if (index > 0) {
    index = index - 1;
    notifications.push("Navigated to previous bird: " + names[index]);
  } 
  updateHomeScreen();
  updateNotification();
});

onEvent("favorite_button", "click", function() {
  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"));
  if (favorites.length > 3){
    showElement("favorite_button");
  } else {
    hideElement("favorite_button");
  }
  updateNotification();
}

function updateNotification() {
  showElement("notification_label");
  // Display notifications on the screen or handle them as needed
  setText("notification_label", notifications.join("\n"));
}

// If you want to add notifications on insert_button click or any other event, you can do it like so:
onEvent("insert_button", "click", function() {
  // E.g., pushing a notification when button is clicked
  notifications.push("Insert button clicked.");
  
  // Call update favorites or any other logic as needed
  updateFavorites();
});

Step 3: Testing

In the updateHomeScreen function, I added a debug statement to print the current notifications to the console to ensure we can track what’s being added to the notifications list.

You should run this code and click the buttons to see the notifications being generated in response to different actions. Check the Debug Console to verify that the correct notifications are being printed.

Summary

In this code, we added functionality to track and display notifications related to user actions. Each relevant action (navigating left or right, adding to favorites) appends a message to the notifications array, and we print or display these notifications accordingly. Make sure that you customize the notifications to suit the functionality of your application!

Answer 2

I want notifications to pop up when I add birds to my favorites list.

✅ Do This - Milestone 5 / 9

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

Tasks:

Add at least 3 of your own elements into the notifications list
👉 Show me where 👈
Update the notifications list to contain at least three different Strings that alert the user that they have added a favorite.
Make sure that you put String data inside of quotation marks
You can use emojis if you wish!
Separate elements inside of a list with a comma
Example: var notifications = ["Nice choice 😊", "That's a cool bird!", "🤩 🤩 🤩"];
🎯 Test Your Code

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

In the Debug Console, print out various values of notifications
At the bottom of the screen next to the > character, write notifications[0]. See if the result matches the first notification that you entered into your list.

Answer 3

To achieve the goal of having pop-up notifications when a user adds birds to the favorites list, we will modify the updateFavorites function to include at least three predefined notification messages.

Below is how you can implement this:

Step 1: Define Notifications

We will define a notifications array that contains at least three different strings which provide feedback to the user after they add a favorite.

Step 2: Modify the updateFavorites Function

In the existing updateFavorites function, we’ll check if the favorites list was updated, and if so, we’ll add a notification to let the user know their selection was successful.

Here is the updated code:

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

updateHomeScreen();

function updateHomeScreen() {
  hideElement("notification_label");
  setText("name_label", names[index]);
  setImageURL("bird_Image", pictures[index]);
  
  // Test Code: Print the notifications array to the Debug Console
  print("Current Notifications: " + notifications.join(", "));
}

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

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

onEvent("favorite_button", "click", function() {
  if (favorites.length < 3) {
    favorites.push(names[index]);
    updateFavorites();
    // Add a notification when a bird is added to favorites
    notifications.push("Added to favorites: " + names[index]);
    // Optional: Display a random selection from the predefined notifications 
    notifications.push(notifications[Math.floor(Math.random() * notifications.length)]);
    updateNotification();  // Update notifications display
  }
});

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

function updateNotification() {
  showElement("notification_label");
  // Display the latest notification message
  setText("notification_label", notifications[notifications.length - 1]);
}

// Add any additional event listeners as needed
onEvent("insert_button", "click", function() {
  // Example add functionality if needed
});

Explanation:

1. Notifications Array:

   • We initialized notifications with three default strings:
     • "Nice choice! 😊"
     • "That's a beautiful bird!"
     • "You're building a great collection! 🤩"

2. Favorite Button Logic:

   • When the user clicks the "favorite_button", if they successfully add a bird to their favorites, a notification is added that indicates which bird was added.
   • Additionally, to keep it dynamic and engaging, we append a random message from the predefined notifications list.

3. Display Notifications:

   • The updateNotification function is called to ensure that the latest notification message is shown to the user.

Step 3: Testing

In the Debug Console, after adding a bird to favorites, you can type notifications[0], notifications[1], and notifications[2] to confirm that your notifications are being stored correctly.

Notes:

• You can customize the messages in the notifications array as per your design preferences.
• Remember to ensure that your app has mechanisms in place to handle situations when the user attempts to add more than 3 favorites.

Answer 4

ERROR: Line: 19: Oops, we can’t figure out what print is - perhaps you meant the string “print” with quotes? If this is meant to be a variable, make sure you declared a variable: var print

Answer 5

The error you received indicates that the print function is not recognized in your environment, which might be the case depending on the platform you are using for your code. In various environments, the way to log or display information can differ.

If print is not defined, you can replace it with a more suitable method to display notifications in the console or simply omit the debug prints since they might not be necessary for the functioning of your application. However, if you're trying to log messages for debugging, you might want to check if there's a specific method provided by your coding platform.

Updated Code Without Print

Here’s an updated version of the code without using print():

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

updateHomeScreen();

function updateHomeScreen() {
  hideElement("notification_label");
  setText("name_label", names[index]);
  setImageURL("bird_Image", pictures[index]);
  
  // Removed debug print statement as it's not recognized
  // If you want to debug, check with your environment for the correct logging method.
}

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

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

onEvent("favorite_button", "click", function() {
  if (favorites.length < 3) {
    favorites.push(names[index]);
    updateFavorites();
    
    // Add a notification when a bird is added to favorites
    notifications.push("Added to favorites: " + names[index]);
    // Display a random notification from the predefined notifications
    var randomNotification = notifications[Math.floor(Math.random() * notifications.length)];
    setText("notification_label", randomNotification); // Update the notification label
    updateNotification();  // Ensure notifications are displayed
  }
});

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

function updateNotification() {
  showElement("notification_label");
}

// Add any additional event listeners as needed
onEvent("insert_button", "click", function() {
  // Example add functionality if needed
});

Key Changes:

1. Debugging:

   • I've removed the print function from updateHomeScreen. If you need to debug, please refer to your platform's documentation to find out how to correctly log or display values.

2. Random Notification:

   • The random notification is set directly using setText("notification_label", randomNotification), ensuring it shows as soon as a favorite is added.

Testing the Notifications

You should focus on checking the behavior of the notifications when you click the "favorite_button." After running the program, add some birds to favorites and observe the notification popup to confirm that it works as intended.

If you need additional logging functions, please let me know what environment you're working in, and I can provide more specific guidance!