In 2021, I was in class 11th. It was Monday, and we were excited. Our much-awaited Sports Day was around the corner. We were eagerly waiting for our participation round.
Our sports teacher walked into the classroom and announced, "Alright, class! We need participants for the upcoming Sports Day. And we'll need volunteers for managing the event too”. and he asked the class monitor (me) to make lists of the participants and volunteers.
I quickly pulled out my notebook and started jotting down names. Later, when I got home, I decided to organize the list using JavaScript.
let participants = ["Rahul", "Sneha", "Arjun", "Priya", "Kabir"];
let volunteers = ["Amit", "Neha", "Ravi"];
The next day, during recess, my classmates Ishaan and Meera wanted to join as participants.so i quickly went to computer lab and added them to the end of the list using the push() method. The push() method adds a new element to an array (at the end);
participants.push("Ishaan", "Meera");
console.log(participants);
// Output : ["Rahul", "Sneha", "Arjun", "Priya", "Kabir", "Ishaan", "Meera"]
Simran wanted to volunteer, and since she was a responsible girl, I decided to add her at the beginning of the volunteers' list using unshift(). The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements;
volunteers.unshift("Simran");
console.log(volunteers);
// Output : ["Simran", "Amit", "Neha", "Ravi"]
The next day unfortunately, Kabir injured his ankle during practice and had to withdraw. I had to remove his name from the participants list. I used indexOf() method to find the place (index) of “Kabir” in the list and used splice() method to remove his name.
let index = participants.indexOf("Kabir");
console.log(index)
participants.splice(index, 1);
console.log(participants);
// Output : ["Rahul", "Sneha", "Arjun", "Priya", "Ishaan", "Meera"]
At the same time, Ravi, one of the volunteers, decided he’d rather participate in the race in place of Kabir. So, I removed him from the volunteer list using pop(), since he was the last person on the list and The pop() method removes the last element from an array. Then I added him to the participants list using push() pop() method will return the removed element.
let removed = volunteers.pop(); // pop() method returns the removed element.
console.log(volunteers);
console.log(removed);
// Output: ["Simran", "Amit", "Neha"]
// Output: Ravi
participants.push(removed); // On Line 1 : removed = volunteers.pop();
console.log(participants);
// Output: ["Rahul", "Sneha", "Arjun", "Priya", "Ishaan", "Meera", "Ravi"]
At the end of the day, sir asked "So, how many participants and volunteers do we have in total?" he asked, flipping through his sheets.
I quickly pulled out my list and, instead of manually counting, decided to put my JavaScript skills to work. I used the length property to determine the number of students in each list.
let numberOfParticipants = participants.length
let numberOfVolunteers = volunteers.length
console.log(`There Are ${numberOfParticipants} participants and ${numberOfVolunteers} volunteers.`);
// Output : There Are 7 participants and 3 volunteers.
"There are 7 participants and 3 volunteers, sir," I replied & He nodded with approval.
When I got home after school, I was thinking about how messy my list looked. So, I decided to sort the names alphabetically using the sort() method to give it a clean, structured look.
participants.sort()
volunteers.sort()
console.log(participants)
console.log(volunteers)
// Output: [ 'Arjun', 'Ishaan', 'Meera', 'Priya', 'Rahul', 'Ravi', 'Sneha' ]
// Output: [ 'Amit', 'Neha', 'Simran' ]
after that another thought came to my mind. Since students from different classes would be submitting their lists, it might cause confusion without specifying the class. To solve this, I decided to add the class at the end of each name using the forEach() method.
function addParticipant(value, index) {
participants[index] = value + " Class 11";
}
participants.forEach(addParticipant);
console.log(participants);
// Output : [ 'Arjun Class 11', 'Ishaan Class 11', 'Meera Class 11', 'Priya Class 11', 'Rahul Class 11', 'Ravi Class 11', 'Sneha Class 11' ]
//Similarly for volunteers
function addVolunteer(value, index) {
volunteers[index] = value + " Class 11";
}
volunteers.forEach(addVolunteer);
console.log(volunteers);
// Output : [ 'Amit Class 11', 'Neha Class 11', 'Simran Class 11' ]
Now the lists looked more professional, but I wasn’t done yet. I wanted them to be properly ordered with numbers like a proper list should be.
So, I used map() method, which creates a new array by applying a function to each element and then quickly made a variable to store new array returned by map() method.
function orderTheList(value, index){
return `${index+1}. ${value}`
};
let finalParticipants = participants.map(orderTheList)
console.log(finalParticipants);
// Output: [ '1. Arjun Class 11', '2. Ishaan Class 11', '3. Meera Class 11', '4. Priya Class 11', '5. Rahul Class 11', '6. Ravi Class 11', '7. Sneha Class 11' ]
// similarly for volunteers
let finalVolunteers = volunteers.map(orderTheList)
console.log(finalVolunteers);
// Output: [ '1. Amit Class 11', '2. Neha Class 11', '3. Simran Class 11' ]
Looking at the perfectly ordered lists, I felt a sense of accomplishment. But something was still missing—the final presentation.
To prepare and print the final list, I used the join() method to merge the names neatly into a formatted string:
let finalList = `Participants:-
${finalParticipants.join("\n")}
Volunteers:-
${finalVolunteers.join("\n")}
`;
console.log(`Final List of Students
${finalList}`)
// Output:-
// Final List of Students
// Participants:-
// 1. Arjun Class 11
// 2. Ishaan Class 11
// 3. Meera Class 11
// 4. Priya Class 11
// 5. Rahul Class 11
// 6. Ravi Class 11
// 7. Sneha Class 11
// Volunteers:-
// 1. Amit Class 11
// 2. Neha Class 11
// 3. Simran Class 11
Sports Day arrived, and everything went smoothly. The participants shone on the field, and the volunteers managed the event like pros. Principal sir praised my organizational skills, but little did he know—
I had the power of JavaScript backing me up.
Who knew managing a sports event could turn into an adventure in coding?