https://github.com/jmrashed/get-motivation
get-motivation
https://github.com/jmrashed/get-motivation
Last synced: 4 months ago
JSON representation
get-motivation
- Host: GitHub
- URL: https://github.com/jmrashed/get-motivation
- Owner: jmrashed
- Created: 2024-08-14T05:47:25.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-08-14T05:55:46.000Z (11 months ago)
- Last Synced: 2025-01-07T20:14:20.411Z (6 months ago)
- Language: HTML
- Homepage: https://get-motivation.vercel.app
- Size: 107 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Get Motivation
**Get Motivation** is a simple web application that displays motivational quotes with random colors and fonts. The quotes are fetched from a local JSON file and are displayed in an `
` element with a dynamic style that changes with each interaction.
## Features
- **Random Quotes**: Displays quotes fetched from a local JSON file.
- **Random Colors**: Each word in the quote is styled with a random color.
- **Random Fonts**: The entire quote is styled with a randomly selected font-family.
- **Responsive Design**: Utilizes Bootstrap for responsive layout.
## Technologies Used
- HTML
- CSS
- JavaScript (jQuery)
- Bootstrap (for responsive design)
## Setup and Installation
To get started with this project, follow these steps:
1. **Clone the Repository**
```bash
git clone [email protected]:jmrashed/get-motivation.git
```
2. **Navigate to the Project Directory**
```bash
cd get-motivation
```
3. **Open the `index.html` File**
Open the `index.html` file in your preferred web browser to view the application.
## File Structure
- `index.html`: The main HTML file for the project.
- `assets/css/styles.css`: Contains the CSS styles for the application.
- `assets/fonts/stylesheet.css`: Contains font-face definitions for custom fonts.
- `assets/data/motivation.json`: JSON file containing motivational quotes.
## Customization
You can customize the application by modifying the following:
- **Quotes**: Update the `assets/data/motivation.json` file with your own quotes.
- **Fonts**: Add or change fonts in the `assets/fonts/stylesheet.css` file and update the `fontFamily` array in `index.html`.
- **Colors**: Adjust the `getRandomColor()` function in the script to change the color generation logic.
## Usage
- **Initial Load**: When the page loads, a random quote is displayed with a random color and font.
- **Update on Click**: Clicking anywhere on the body updates the quote with a new random color and font.
## Contributing
Contributions are welcome! If you have suggestions or improvements, feel free to open an issue or submit a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
For any inquiries, please reach out to [[email protected]](mailto:[email protected]).