Issue
I am currently taking a class in school on simple JavaScript. In this class we are using a library that when you type readLine("message")
, it creates a popup with a textbox inside that the user can type into. Whatever they type inside can be passed on and used in the rest of code.
Example of what this looks like:
For context, this is what I was doing in this class (I know it isn't efficient, but I don't care about the class):
function main() {
let quarters = readInt("How many quarters will you input? ");
let playlist = "";
let songArray =
[
"1. Happy by Pharrell Williams",
"2. My House by Flo Rida",
"3. Take My Breath Away by Berlin",
"4. Dancing Queen by Abba",
"5. I Wanna Hold Your hand by The Beatles",
"6. We Don't Talk About Bruno from Encanto",
"7. The Real Slim Shady by Eminem",
"8. Hold My Hand by Lada Gaga",
"9. Bye Bye Bye by NSYNC",
"10. Dynamite by BTS"
];
console.log(
"Song options: \n" +
"1. Happy by Pharrell Williams \n" +
"2. My House by Flo Rida \n" +
"3. Take My Breath Away by Berlin \n" +
"4. Dancing Queen by Abba \n" +
"5. I Wanna Hold Your hand by The Beatles \n" +
"6. We Don't Talk About Bruno from Encanto \n" +
"7. The Real Slim Shady by Eminem \n" +
"8. Hold My Hand by Lada Gaga \n" +
"9. Bye Bye Bye by NSYNC \n" +
"10. Dynamite by BTS \n"
);
let song1 = songArray[0];
let song2 = songArray[1];
let song3 = songArray[2];
let song4 = songArray[3];
let song5 = songArray[4];
let song6 = songArray[5];
let song7 = songArray[6];
let song8 = songArray[7];
let song9 = songArray[8];
let song10 = songArray[9];
for (let i = 0; i < quarters; i++){
let result = readInt(
"What song would you like to add to the playlist? Enter the song's number: "
);
playlist += result;
if (result == 1){
console.log(
"Thank you, the following song will play: " + song1);
}
if (result == 2){
console.log(
"Thank you, the following song will play: " + song2);
}
if (result == 3){
console.log("Thank you, the following song will play: " + song3);
}
if (result == 4){
console.log("Thank you, the following song will play: " + song4);
}
if (result == 5){
console.log("Thank you, the following song will play: " + song5);
}
if (result == 6){
console.log("Thank you, the following song will play: " + song6);
}
if (result == 7){
console.log("Thank you, the following song will play: " + song7);
}
if (result == 8){
console.log("Thank you, the following song will play: " + song8);
}
if (result == 9){
console.log("Thank you, the following song will play: " + song9);
}
if (result == 10){
console.log("Thank you, the following song will play: " + song10);
}
}
}
main();
They also don't give us the HTML file and I am not smart enough to figure out how to get it, so that's out of luck.
All I want to do is redo this entire project on my own. I want to remake the HTML, remake the JavaScript, everything. However, I need to figure out how to make this popup thing.
Solution
You did not define a readInt
function. The following will grab the input via a prompt
and subsequently parse it into an integer.
function readInt(description) {
return parseInt(prompt(description), 10);
}
Secondly, you should store your song data as records with title
, artist
, and type
. The type
would be used to say "from" instead of "by" when formatting.
Furthermore, instead of creating n-vaiables, you should use an array (list/queue) to store the playlist.
Lastly, creating additional functions not only increase readability, they can also be reused i.e. the formatSong
and displayPlaylist
functions for instance.
const songs = [
{ title: "Happy", artist: "Pharrell Williams" },
{ title: "My House", artist: "Flo Rida" },
{ title: "Take My Breath Away", artist: "Berlin" },
{ title: "Dancing Queen", artist: "Abba" },
{ title: "I Wanna Hold Your Hand", artist: "The Beatles" },
{ title: "We Don't Talk About Bruno", artist: "Encanto", type: "Soundtrack" },
{ title: "The Real Slim Shady", artist: "Eminem" },
{ title: "Hold My Hand", artist: "Lada Gaga" },
{ title: "Bye Bye Bye", artist: "NSYNC" },
{ title: "Dynamite", artist: "BTS" }
];
const playlist = []; // Treat this like a queue (or deque)
function main() {
displaySongs();
setTimeout(askForInput, 100); // Delay input until list is displayed
}
function displaySongs() {
displayPlaylist(songs);
}
function displayPlaylist(playlist, description = 'Song options') {
console.log(`${description}:\n${playlist
.map((song, index) => `${index + 1}. ${formatSong(song)}`)
.join('\n')}`);
}
function formatSong({ title, artist, type }) {
return `"${title}" ${type === 'Soundtrack' ? 'from' : 'by'} ${artist}`;
}
function askForInput() {
const quarters = readInt("How many quarters will you input? ");
for (let i = 0; i < quarters; i++) {
let songIndex = readInt(
"What song would you like to add to the playlist? Enter the song's number: "
);
if (songIndex >= 1 && songIndex <= songs.length) {
const song = { ...songs[songIndex - 1] }; // Create a copy
playlist.push(song);
console.log(
'Thank you.',
'The following song has been added to the playlist:',
formatSong(song));
}
}
displayPlaylist(playlist, 'Playlist');
}
function readInt(description) {
return parseInt(prompt(description), 10);
}
main();
.as-console-wrapper { top: 0; max-height: 100% !important; }
Answered By - Mr. Polywhirl
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.