The Motivational Line Maker is a simple web application that fetches and displays motivational quotes along with their authors. It displays a "Quote of the Day" when the page loads and allows users to generate new quotes by clicking the "New Quote" button. The quotes are fetched dynamically from the Quotable API.
- Display Motivational Quotes: Shows a motivational quote and the author's name.
- Fetch New Quotes: Users can click a button to fetch and display a new quote.
- Clean, Responsive Design: Styled with CSS to ensure a visually appealing and responsive layout.
The project consists of three main files:
-
HTML (
index.html)
Provides the structure of the webpage with sections for displaying the quote and its author, and a button to generate a new quote. -
CSS (
style.css)
Defines the styling for the page, including fonts, layout, button effects, and general aesthetics. -
JavaScript (
script.js)
Handles the dynamic fetching of quotes from an external API and updates the quote and author displayed on the page.
- When the page loads, a quote is fetched from the Quotable API and displayed on the page inside the
<p>tag. - The user can click the New Quote button, which triggers an API call to get a fresh quote.
- The fetched quote and its author replace the current displayed content dynamically.
- Clone or download the project files.
- Open
index.htmlin any web browser. - A motivational quote will be displayed on page load.
- Click the "New Quote" button to fetch a new random quote.
-
Font Awesome (for quote icons)
Included via CDN in the<head>of the HTML file. -
Quotable API
Provides the random quotes used in the application.