- Calls to your student-developed procedure
The procedure is used in a loop to make HTML elements for each song based on the data fetched. These calls help the program work well by quickly making and adding song blocks to the playlist. This makes it easier for users to interact and manage the songs they see on the interface.
// Fetch data from Flask backend
async function fetchData(songName) {
try {
const response = await fetch('http://127.0.0.1:8086/api/song/all');
const songsData = await response.json();
const container = document.getElementById("albumList");
const currentSongImage = document.getElementById("currentSongImage");
// Filter songs based on the specified song name
const filteredSongs = songsData.filter((song) => song._name === songName);
// Map through the filtered list and create song cards
filteredSongs.forEach((song) => {
const itemBlock = createItemBlock(song);
container.appendChild(itemBlock);
});
if (filteredSongs.length > 0) {
// Update the current song info based on the first filtered song
updateCurrentSongInfo(filteredSongs[0]);
}
} catch (error) {
console.error('Error fetching data:', error);
}
}
- Instructions for output (tactile, audible, visual, or textual) based on input and program functionality
This function updates the current song’s information displayed on the frontend interface based on the data provided, including the song name and image URI. The function dynamically modifies the visual output by updating the song name and image displayed to the user, ensuring that the interface reflects the current state of the application and providing a visual indication of the currently playing song.
// Fetch data from Flask backend
async function fetchData(songName) {
try {
const response = await fetch('http://127.0.0.1:8086/api/song/all');
const songsData = await response.json();
const container = document.getElementById("albumList");
const currentSongImage = document.getElementById("currentSongImage");
// Filter songs based on the specified song name
const filteredSongs = songsData.filter((song) => song._name === songName);
// Map through the filtered list and create song cards
filteredSongs.forEach((song) => {
const itemBlock = createItemBlock(song);
container.appendChild(itemBlock);
});
if (filteredSongs.length > 0) {
// Update the current song info based on the first filtered song
updateCurrentSongInfo(filteredSongs[0]);
}
} catch (error) {
console.error('Error fetching data:', error);
}
}
COMPONENT B:
link to video: https://youtu.be/iAYMLrRepxw requirements: □ Input to your program □ At least one aspect of the functionality of your program □ Output produced by your program Your video may NOT contain: □ Any distinguishing information about yourself □ Voice narration (though text captions are encouraged) Your video must be: □ Either .webm, .mp4, .wmv, .avi, or .mov format □ No more than 1 minute in length □ No more than 30MB in file size