Skip to content

Latest commit

 

History

History
107 lines (84 loc) · 3.96 KB

README.md

File metadata and controls

107 lines (84 loc) · 3.96 KB

desktop design

Quote Generator

Solution for a challenge from zerotomastery.io.

Table of contents

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

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.