Quote Generator

Live Demo

Solution for a challenge from zerotomastery.io.

Table of contents

• Overview
  • About
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Acknowledgments

Overview

About

This is a generator that randomly pulls quotes from a Quotes API.

Users should be able to:

1. View the optimal layout for the app depending on their device's screen size.
2. See hover states for all interactive elements on the page
3. Generate a new quote by clicking the New Quote button.
4. Pre-populate a Tweet with the generated quote by clicking the Twitter button.

Screenshot

Mobile design

My process

Built with

• Semantic HTML5 markup
• CSS CUBE methodology
• CSS custom properties
• CSS logical properties
• CSS flexbox
• CSS grid
• Asynchronous JavaScript

What I learned

This was my first-time building a project using fetch API with async/await.

const getQuote = async () => {
  const apiUrl = "https://type.fit/api/quotes";
  try {
    const response = await fetch(apiUrl);
    apiQuotes = await response.json();
    newQuote();
  } catch (error) {
    alert(`Whoops, something went wrong. Try again later.`);
    console.log(error);
  }
};

With this challenge, I learned how to solve CORS issues by building a proxy server. Fortunately, the API I used for the final product did not have this issue.

Another first-time encounter I had while creating this project was using Twitter's Tweet Web Intent Docs to pre-populate a Tweet with the generated quote (code snippet below).

const tweetQuote = () => {
  const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`;
  // Opens twitter page in new tab
  window.open(twitterUrl, "_blank");
};

Overall, this project was a great learning experience and made me feel slightly more confident utilizing async/await.

Continued development

Other ideas for this project include:

• Use a different API to generate quotes
• Implement a filter feature to filter quotes by category or by length
• Pre-populate a post for various social media sites with the generated quote

Useful resources

• CSS Logical Properties and Values - This is a good resource for learning about CSS Logical Properties and Values.
• CUBE CSS documentation - From the docs: "CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working in—often the browser—rather than against it."
• Every Layout - Extremely helpful resource for simplifying CSS layouts.
• Modern CSS Reset
• Responsively App - This DevTool helps in responsive web development. It allows you to see mirrored user-interactions across all devices.

Acknowledgments

• @xtopolis - My ever-so patient mentor - Thank you so much for your patience and support. I appreciate you taking the time to do code reviews and provide feedback.