Random quote machine

A web page that randomly generates a quote every time the button is clicked

Links

• ➡ Solution URL: Repo GitHub SimonaPiz/
• ☑ Live Site URL: simonapiz.github.io/random-quote-machine/

Table of contents

• Links
• Overview
• My process
• Built with
• Author
• Acknowledgements

Overview

Objective

Build an app that is functionally similar to this: random-quote-machine.freecodecamp.

My process

1. 🗂 Initialize the project on GitHub and use Git for log my commits and versioning my work.

2. ✏ I looked at the designs to start planning how to approach the project

3. ⚙ Implemented project features with HTML, SCSS, and JQuery:

   • ☑issue #1 Implement HTML main structure

     • I can see a wrapper element with a corresponding id="quote-box" that contains:
       • an element with a corresponding id="text".
       • an element with a corresponding id="author".
       • a clickable element with a corresponding id="new-quote".
       • a clickable a element with a corresponding id="tweet-quote".

   • ☑issue #1 Add style

     I used SCSS extension

   • ☑issue #2 Get random quote

     I used API Ninjas and JQuery Ajax request

   • ☑issue #3 Add interactions

     • On first load, my quote machine displays:
       • a random quote in the element with id="text".
       • the random quote's author in the element with id="author".
     • When the #new-quote button is clicked:
       • my quote machine should fetch a new quote and display it in the #text element.
       • My quote machine should fetch the new quote's author and display it in the #author element.
       • Change random color
     • I can tweet the current quote by clicking on the #tweet-quote a element. This a element should include the "twitter.com/intent/tweet" path in its href attribute to tweet the current quote.

   • Test suite provided

     • ✅ 12/12 passed

Built with

• Semantic HTML5 markup
• CSS/SCSS custom properties
• Flexbox
• JQuery Ajax
• JQuery Manipulation

Author

• Website - Simona Pizio
• Codepen - SimonaPiz/pen
• Freecodecamp - freecodecamp/SimonaPiz

Acknowledgements

This is a solution to the Build a Random Quote Machine project to earn the Front End Development Libraries certification by FreeCodeCamp.