Question

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

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 2

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 3

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:

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

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:

```javascript
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 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()`:

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