Quote Generator

This responsive quote generator, built using HTML, CSS, and JavaScript, features modern and professional-looking repeatable SVG background patterns from Hero Patterns. The Forismatic API is used for dynamic quote retrieval and easy content updates, while Twitter web intent is integrated for easy sharing of inspiring quotes.

Link to project:

• Live Site URL: Netlify

Screenshot

Desktop View

How It's Made:

Tech used: HTML, CSS, JavaScript

This project uses HTML, CSS, and JavaScript to create a responsive quote generator. Hero Patterns is used to add visually appealing SVG background patterns to the project. The Forismatic API is used to retrieve and display quotes dynamically.

Optimizations:

In the future, I plan to optimize the mobile view of the quote generator by utilizing CSS Grid to create a layout that adapts seamlessly to smaller screens. Additionally, I am looking to build this project using React and Tailwind, which will provide significant performance and maintenance benefits. By incorporating these optimizations, the quote generator would become even more efficient and user-friendly, making it a valuable tool for anyone looking for inspiration or motivation.

Lessons Learned:

This project provided me with valuable experience in using the Forismatic API to retrieve and display data dynamically on a web page using asynchronous JavaScript functions like async/await. Additionally, I gained proficiency in creating visually appealing and user-friendly designs.

Author

• Github - BK Pecho
• Twitter - @bkpecho
• LinkedIn - in/bkpecho
• Frontend Mentor - @bkpecho

For other examples of my work, check out these projects:

• Infinite Scroll: GitHub Repository
• Social Proof Section: GitHub Repository