Hockey Team Check-In App
Published: 2023-08-07 19:23:46

For this project I have built a Single Page Application (SPA).  This frontend will be built with HTML, CSS, and JavaScript and will communicate with a public API.

**App Description:**

The hockey team check-in app is a simple web application that allows players to check-in or check-out for games. The app uses HTML, CSS, and JavaScript to create a user-friendly interface where players can enter their names and indicate their attendance status for games.

The app uses local storage to store the players' data. The saveToLocalStorage() function saves the player data to local storage in JSON format.

When a player checks-in, the checkInPlayer() function handles the form submission and updates the player list accordingly. If the player is not in the list, a new player object is created with the attendance status set to true.

The toggleAttendance() function is called when a player checks-in or checks-out using the checkbox. It finds the player in the players array and toggles their attendance status.

On page load, the app checks if there is player data in local storage. If so, it loads the data and updates the player list accordingly.
Functions:

saveToLocalStorage(): 

This function is responsible for saving the player data to local storage. It is called whenever a player checks-in or checks-out for a game to persist their attendance status.

checkInPlayer(event): 

This function handles the form submission when a player wants to check-in for a game. It extracts the player name from the input field and checks if the player is already in the player list. If the player exists, it toggles their attendance status (check-in/check-out). If the player is not in the list, it adds a new player with the check-in status. The form input is then cleared, and the player list is updated to reflect the changes.

updatePlayerList(): 

This function updates the player list displayed on the web page. It dynamically generates HTML elements for each player in the players array and displays them as a list with checkboxes next to each player's name.

toggleAttendance(name): 

This function is called when a player's attendance status is toggled using the checkbox. It finds the player in the players array based on the provided name and toggles their attendance status (check-in/check-out). The updated player list is then saved to local storage.
 		playerForm.addEventListener('submit', checkInPlayer): 

This line of code adds an event listener to the player form. It listens for form submissions (when the "Check-in" button is clicked), and when triggered, it calls the checkInPlayer function to handle the check-in process.

Loading Players from Local Storage: 

On page load, the app checks if there is player data stored in local storage. If there is, it retrieves the data, updates the players array, and displays the player list with their attendance status.

**User Interaction:**

Users can access the app through a web browser by opening the index.html file.

To check-in for a game, players enter their names in the input field and click the "Check-in" button.

Players can also check-out by unchecking the checkboxes next to their names.

The app dynamically updates the player list to reflect the check-in and check-out status in real-time.

Player data is saved to local storage, ensuring that the check-in status persists even if the page is reloaded.

**Conclusion:**

Overall, the app provides a straightforward and efficient way for hockey team players to manage their attendance for games.