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]