https://github.com/bkpecho/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.
https://github.com/bkpecho/quote-generator

api async-await cors css3 css3-animations flexbox html5 javascript twitter-web-intents

Last synced: 28 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/bkpecho/quote-generator
• Owner: bkpecho
• Created: 2023-04-16T00:57:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-20T18:36:24.000Z (over 1 year ago)
• Last Synced: 2024-12-12T20:36:17.980Z (about 1 month ago)
• Topics: api, async-await, cors, css3, css3-animations, flexbox, html5, javascript, twitter-web-intents
• Language: CSS
• Homepage: https://bk-quote-generator.netlify.app/
• Size: 184 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://bk-quote-generator.netlify.app/)

## Screenshot

### Desktop View

![](/src/images/desktop-view.png)

## 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](https://www.github.com/bkpecho)

- Twitter - [@bkpecho](https://www.twitter.com/bkpecho)

- LinkedIn - [in/bkpecho](https://www.linkedin.com/in/bkpecho/)

- Frontend Mentor - [@bkpecho](https://www.frontendmentor.io/profile/bkpecho)

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

- **Infinite Scroll:** [GitHub Repository](https://github.com/bkpecho/infinite-scroll)

- **Social Proof Section:** [GitHub Repository](https://github.com/bkpecho/social-proof-section)