Feature - Add Loading Indicator for API Calls

[anna-dahlberg]

Description

Currently, when users click the "Click here!" button, there's no visual feedback that the API call is in progress. Users might click multiple times thinking it's not working. We should add a loading state to improve the user experience.

Acceptance Criteria

• Show loading text/spinner when API call starts
• Hide loading indicator when API call completes
• Prevent multiple clicks during loading (already partially implemented)
• Apply to both advice.js and luckyNumberAdvice.js

Technical Details

You could:

1. Change button text to "Loading..." during fetch
2. Add a CSS spinner animation
3. Or show loading text on the card front

Files to Modify

• scripts/advice.js - Add loading state logic
• scripts/luckyNumberAdvice.js - Add loading state logic
• styles.css - Add loading styles (optional)

Resources/References

• CSS Loading Spinners
• Fetch API with Loading States

Estimated Difficulty: Beginner Friendly ⭐

Additional Notes

This teaches async JavaScript concepts and improves user experience. Start simple with text changes before adding fancy animations!