Prerna हिन्दी

Prerna हिन्दी is a small web project aimed at generating random Hindi quotes to inspire and motivate users. This project serves as a learning tool for me, allowing me to explore and implement various web development technologies.

Visit the page: If you wish to visit the working page. Click on this: Prerna हिन्दी The link for the page is: https://energelpen.github.io/Prerna-Hindi-Quotes/Website/index.html

Project Overview

This project features:

• Tailwind CSS for styling: Tailwind CSS is used to create a responsive and modern design with utility-first classes. This project helped me learn how to use Tailwind CSS to quickly style elements and make the interface visually appealing.
• JavaScript for dynamic content: JavaScript is used to handle user interactions and dynamically update the content displayed on the page.
• API Integration: The project integrates with the Hindi Quotes API provided by nkilm to fetch and display Hindi quotes. This integration allowed me to practice working with APIs, handling asynchronous data, and updating the DOM based on API responses.

Features

• Random Quote Display: The main feature of the application is to display a random Hindi quote on page load and whenever the "Generate Random Quote" button is clicked.
• Category-Based Quote Display: Users can select a quote category from a dropdown menu, and the application will fetch and display a quote from the selected category.
• Static Quotes: Five static cards at the bottom of the page are initialized with random quotes to provide additional inspiration.

Getting Started

To run this project locally, follow these steps:

1. Download or Clone the Repository

   • Download: Download the repository as a ZIP file from GitHub.
   • Clone: Open your terminal and run:

     git clone https://github.com/energelpen/Prerna-Hindi-Quotes/
     

2. Navigate to the Project Directory

   • cd (to the directory)

3. Open prerna.html in Your Browser

• Open the prerna.html file in your preferred web browser to see the application in action.

Project Structure

• prerna.html: The main HTML file that structures the content and includes references to external styles and scripts.
• script.js: The JavaScript file that handles fetching quotes from the API, updating the content on the page, and managing user interactions.

Learning Experience

This project has been a great way for me to learn and apply:

• Tailwind CSS: I have learned how to use Tailwind CSS to style a responsive layout, manage spacing, and create visually appealing components.
• JavaScript: I’ve gained experience in handling asynchronous data, manipulating the DOM, and managing user interactions.
• API Integration: Working with the Hindi Quotes API has taught me how to make API requests, handle responses, and display dynamic content.
• HTML: Working with HTML has made my knowledge of HTML better and I hope to sharpen it in the future.

Acknowledgements

I would like to extend my thanks to nkilm for creating the Hindi Quotes API. Your work provided the perfect API for this project and was instrumental in making this project possible.

I have also used Wikimedia CC for the picture showing the Hindi Language in Devanagari Script.

Future Improvements

• User Customization: Allow users to save their favorite quotes or select multiple categories to receive a mix of quotes.
• Create my own DB and API: To allow for a wider range of quotes or eventually even a quote library in Hindi

License

This project is open-source and available under the MIT License.