seonmo-kang / random-quote-machine

Random Quote Machine from FreeCodeCamp

Random-Quote-Machine toy project from FreeCodeCamp

---

Preview

Project goal

• Build an app with frontend framework ( react ).
• Understand React framework.
• Understand and review HTML, CSS.

Tech Stack

• HTML
• JavaScript
• CSS

Advanced Feature

• React Hook( useState, useEffect )
• animate CSS using document.getElementByID().animate( ) function

    const getRandomQuote = () =>{
        setRandomQuote( ()=>{ 
            return quotes[Math.floor(Math.random()*quotes.length)];
        });
        document.getElementById("text").animate([{opacity:0},{opacity:1}],{duration:1000,easing:"ease-in"});
        document.getElementById("author").animate([{opacity:0},{opacity:1}],{duration:1000,easing:"ease-in"});
    }

• Using CSS variable --designated-color

/* src/App.css */ 
:root{
  --designated-color : #fff;
}

.App {
  text-align: center;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100vw;
  height:100vh;
  background-color: var(--designated-color);
  transition: background-color 1s ease-in-out;
}
/* src/components/Quote.module.css */
.quoteText, .quoteAuthor{
    color : var(--designated-color);
}

• Change style property using document.document.style.setProperty('--desingated-color',randomColor);

// src/components/QuoteBox.js
    const [randomColor, setRandomColor] = useState(colors[Math.floor(Math.random()*colors.length)]);

    useEffect(()=>{
        getRandomColor();
    },[]);
    const getRandomColor = ()=>{
        setRandomColor( ()=>{
            return colors[Math.floor(Math.random()*colors.length)];
        });
        console.log('getRandomColor',randomColor);
        document.documentElement.style.setProperty('--designated-color',randomColor);
    }

Improvements

• Using redux

Module

├── @fortawesome/[email protected]

├── @fortawesome/[email protected]

├── @fortawesome/[email protected]

├── @fortawesome/[email protected]

├── @reduxjs/[email protected]

├── @testing-library/[email protected]

├── @testing-library/[email protected]

├── @testing-library/[email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

└── [email protected]