quote_app

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• Generate a Quote when the page loaded
• Click in the dice and generate a new Quote

Screenshot

Links

• Solution URL: [https://github.com/Omared250/quote_app]
• Live Site URL: [https://omared250.github.io/quote_app/]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Responsive Design
• Recursion
• [Vanilla JS]
• [Architecture - MVC]

What I learned

With this project I was able to gain more confidence in CSS and HTML, I was also able to work more with the API CALLS and reinforce my knowledge of how to treat and use the information provided through the APIS, as well as practice more the concept of RECURSION in Vanilla JS

• RECURSION [https://www.freecodecamp.org/espanol/news/como-entender-recursividad-en-javascript/]

const loadAdvice = async function() {
    try {
        await model.loadQuote();
        quoteView.render(model.quote);
        getQuoteByClickDIce();
    } catch (err) {
        quoteView.renderError();
    }
}

const getQuoteByClickDIce = async function() {
    try {
        const dice = document.querySelector('.dice');
        dice.addEventListener('click', async function(e) {
            e.preventDefault();
            quoteView.clearContainer();
            await loadAdvice();
        })
    } catch (err) {
        quoteView.renderError();
    }
}

Author

• Github - Omar Ascanio
• Frontend Mentor - @omared250