![Screenshot 2023-10-02 at 10 52 19 AM](https://private-user-images.githubusercontent.com/72358488/272005275-a25f3829-081b-4aec-8496-c6e0607dd280.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNTg1MDcsIm5iZiI6MTczOTM1ODIwNywicGF0aCI6Ii83MjM1ODQ4OC8yNzIwMDUyNzUtYTI1ZjM4MjktMDgxYi00YWVjLTg0OTYtYzZlMDYwN2RkMjgwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEyVDExMDMyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBmODI4ZTRmMTUwYmNjMzVmM2I2YjEzNzBkYzYyYjNmOGE2NWNlNjhhNDM1ZmM3NzkzYzY4NjI3MzllOWEyYTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.6koC0mBxXI3lCKC_2OqFO3u0xrUOdHc-BAkeVjhwU1I)
![Screenshot 2023-10-02 at 10 51 51 AM](https://private-user-images.githubusercontent.com/72358488/272005295-cff304e0-08ff-4377-a21e-81cab2e0c932.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNTg1MDcsIm5iZiI6MTczOTM1ODIwNywicGF0aCI6Ii83MjM1ODQ4OC8yNzIwMDUyOTUtY2ZmMzA0ZTAtMDhmZi00Mzc3LWEyMWUtODFjYWIyZTBjOTMyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEyVDExMDMyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY1YmZlYWE1ZThlZWRhMjNkZmFkZTIxMmViZDBlYTY5OTI1MjBkNWJiMGIwNjY5MTIyNWYxY2I0YmMzZjE2ZGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Nl7Bkqxf_Nm4BVv2IjDGASxhaVK_oxwdCJj_tpQ2Vfs)
This project is a JavaScript and HTML coding challenge that demonstrates a dynamic web page with a fading background color animation and the ability to fetch and display random quotes.
-
Fading Background Animation: The project features a smoothly animated background color transition that continuously changes colors in a gradient pattern.
-
Random Quote Generation: Users can click the "Get a quote!" button to fetch a random quote and display it on the web page.
-
Error Handling: If there's an issue with fetching a quote, the system displays an error message in an alert.
- A modern web browser that supports HTML5, JavaScript, and CSS animations.
-
Clone this repository to your local machine.
-
Open the
index.html
file in your preferred web browser.
-
Click the "Get a quote!" button to fetch and display a random quote.
-
Enjoy the fading background color animation while reading inspirational quotes.
You can customize this project by:
-
Modifying the CSS in
main.css
to change the animation duration, colors, or other styles. -
Changing the API endpoint in
main.js
to fetch quotes from a different source.
Contributions are welcome! Please follow the Contributing Guidelines for more information.
This project is licensed under the MIT License - see the LICENSE file for details.
-
This project was created as a coding challenge.
-
The background color animation inspiration came from CSS Gradient Animator.