I’m reading a new book. Tommy and I are reading it together. I think he is further along in the book than I am. It’s from the library and he shared it with me. The Isles of the Gods. Goodreads says, “Magic, romance, and slumbering gods clash in the start of a riveting fantasy series that spans gangsters’ dens, forgotten temples, and the high seas.” I’m only 5% into the book, and so far, I like it.
JavaScript today was alright. I solved most of the problems with no trouble at all. I’ve been Googling most of the day. Ternary operators have been confusing me, even though they seem easy enough. A lot of people online, especially on Reddit, complain about JavaScript. There are only two types of programming languages: those that people complain about and those that people don’t use.
We are having tacos tonight for Taco Tuesday. I made pinto beans earlier, and they are about done. A Wyoming Taco restaurant came up with the name “Taco Tuesday.” The story begins in the 1980s when a Taco John’s restaurant owner coined the term “Taco Twosday” to advertise a deal of 99 cents for two tacos on its slowest day of the week. They even trademarked the term. A website called Taco Tuesday tells you what restaurants have taco deals on Tuesday.
I need to dust my desk. I should do that now before everyone gets home.
Sorry for the shortness; I don’t have much to talk about. Did I mention already that it’s nearing my 30th high school reunion? I don’t have any plans to go. Everyone I speak to is on Facebook. And the idea of seeing everyone in person, in an enclosed area, sets off my social anxiety.
JavaScript notes…
————————————–
Music player step 51 – 70
Step 51
Add a click event listener to the previousButton element, then pass in playPreviousSong as the second argument.
previousButton.addEventListener("click", playPreviousSong);
Step 52
If you check closely, you’d see the currently playing song is not highlighted in the playlist, so you don’t really know which song is playing. You can fix this by creating a function to highlight any song that is being played.
Using an arrow syntax, create a highlightCurrentSong function. Inside the function, use querySelectorAll to get the .playlist-song element and assign to a playlistSongElements constant.
const highlightCurrentSong = () => {
const playlistSongElements = document.querySelectorAll('.playlist-song');
}
Step 53
You need to get the id of the currently playing song. For this, you can use userData?.currentSong?.id.
Use getElementById() to get the id of the currently playing song, then use template literals to prefix it with song-. Assign it to the constant songToHighlight.
const highlightCurrentSong = () => {
const playlistSongElements = document.querySelectorAll(".playlist-song");
const songToHighlight = document.getElementById(`song-${userData?.currentSong?.id}`);
};
Step 54
Loop through the playlistSongElements with a forEach method.
The forEach method is used to loop through an array and perform a function on each element of the array. For example, suppose you have an array of numbers and you want to log each number to the console.
const numbers = [1, 2, 3, 4, 5];
// Using forEach to iterate through the array
numbers.forEach((number) => {
console.log(number); // 1, 2, 3, 4, 5
});
Use the forEach method on playlistSongElements. Pass in songEl as the parameter and use arrow syntax to add in an empty callback.
playlistSongElements.forEach((songEl) => {
});
Step 55
Within the callback function, use the removeAttribute() method to remove the “aria-current” attribute. This will remove the attribute for each of the songs.
playlistSongElements.forEach((songEl) => {
songEl.removeAttribute("aria-current");
});
Step 56
Now you need to add the attribute back to the currently playing song.
Create an if statement with the condition songToHighlight. For the statement, use setAttribute on songToHighlight to pass in “aria-current” and “true” as the first and second arguments.
if (songToHighlight) {
songToHighlight.setAttribute("aria-current", "true");
}
Step 57
Inside the playSong function, call the highlightCurrentSong function.
After that, play around with the control buttons to see how the highlightCurrentSong function works.
highlightCurrentSong();
Step 58
Next, you need to display the current song title and artist in the player display. Use const and arrow syntax to create an empty setPlayerDisplay function.
const setPlayerDisplay = () => {
}
Step 59
Inside the function, obtain references to the HTML elements responsible for displaying the song title and artist.
Access the #player-song-title and #player-song-artist elements with the getElementById() method. Assign them to variables playingSong and songArtist respectively.
const setPlayerDisplay = () => {
const playingSong = document.getElementById("player-song-title");
const songArtist = document.getElementById("player-song-artist");
};
Step 60
Access the userData?.currentSong?.title and userData?.currentSong?.artist properties and assign them to a currentTitle and currentArtist variables respectively.
const currentTitle = userData?.currentSong?.title; const currentArtist = userData?.currentSong?.artist;
Step 61
textContent sets the text of a node and allows you to set or retrieve the text content of an HTML element.
const element = document.getElementById(‘example’);
console.log(element.textContent); // Output: This is some text content
Use a ternary operator to check if currentTitle is truthy. If so, implicitly return currentTitle otherwise implicitly return an empty string. Assign this result to playingSong.textContent.
Then, use a ternary operator to check if currentArtist is truthy. If so, implicitly return currentArtist otherwise implicitly return an empty string. Assign this result to songArtist.textContent.
playingSong.textContent = currentTitle ? currentTitle : ""; songArtist.textContent = currentArtist ? currentArtist : "";
Step 62
To ensure the player’s display updates whenever a new song begins playing, call the setPlayerDisplay() function within the playSong() function.
Now you should see the song title and the artist show up in the display.
setPlayerDisplay();
Step 63
Use const and arrow syntax to define a function called setPlayButtonAccessibleText.
This function will set the aria-label attribute to the current song, or to the first song in the playlist. And if the playlist is empty, it sets the aria-label to “Play”.
const setPlayButtonAccessibleText = () => {
}
Step 64
You need to get the currently playing song or the first song in the playlist. To do that, create a song constant and use the OR operator (||) to set it to the current song of userData, or the first song in the userData?.songs array.
Don’t forget to use optional chaining.
const setPlayButtonAccessibleText = () => {
const song = userData?.currentSong || userData?.songs[0];
};
Step 65
Use the setAttribute method on the playButton element to set an attribute named aria-label. For the value, use a ternary to set song?.title to Play ${song.title} or “Play” if there’s no song.title available.
Don’t forget you need template interpolation here, so you need to use backticks.
const setPlayButtonAccessibleText = () => {
const song = userData?.currentSong || userData?.songs[0];
playButton.setAttribute("aria-label", song?.title ? `Play ${song.title}` : "Play");
};
Step 66
Now, call the setPlayButtonAccessibleText function inside the playSong function.
setPlayButtonAccessibleText();
Step 67
Using const and arrow syntax to create an empty function called shuffle.
This function is responsible for shuffling the songs in the playlist and performing necessary state management updates after the shuffling.
const shuffle = () => {
}
Step 68
In earlier steps, you learned how to work with the sort() method to sort the songs in alphabetical order. Another use case for the callback function is to randomize an array.
One way to randomize an array of items would be to subtract 0.5 from Math.random() which produces random values that are either positive or negative. This makes the comparison result a mix of positive and negative values, leading to a random ordering of elements.
const names = [“Tom”, “Jessica”, “Quincy”, “Naomi”];
names.sort(() => Math.random() – 0.5);
Use the sort() method on the userData?.songs array. Pass a callback to the method, and return the result of Math.random() – 0.5.
const shuffle = () => {
userData?.songs.sort(() => Math.random() - 0.5);
};
Step 69
When the shuffle button is pressed, you want to set the currentSong to nothing and the songCurrentTime to 0.
Set userData.currentSong to null and userData.songCurrentTime to 0.
Note: You should not use optional chaining for this step because you are explicitly setting the currentSong and songCurrentTime properties to be null and 0 respectively.
userData.currentSong = null; userData.songCurrentTime = 0;
Step 70
You should also re-render the songs, pause the currently playing song, set the player display, and set the play button accessible text again.
Call the renderSongs function and pass in userData?.songs as an argument. Also, call the pauseSong, setPlayerDisplay, and setPlayButtonAccessibleText functions.
const shuffle = () => {
userData?.songs.sort(() => Math.random() - 0.5);
userData.currentSong = null;
userData.songCurrentTime = 0;
renderSongs(userData?.songs);
pauseSong();
setPlayerDisplay();
setPlayButtonAccessibleText();
};
