Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
The code passed but there is 1 thing i cannot do. I can’t transition smoothly the text of the quote.I tried just adding transition effect but it doesn’t work. (the background-color works fine).
Thank you. :slight_smile:

Your code so far
index.js//

import React from "react";
import ReactDOM from "react-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
import "./index.css";
import Quote from "./Quotes";
import Button from "./Button";

const App = () => {
    const [quote, setQuote] = React.useState([]);
    const [color, setColor] = React.useState("#000000");

    const fetchQuote = async () => {
        const response = await fetch("https://api.quotable.io/random");
        const randomQuote = await response.json();
        setQuote(randomQuote);
        setColor("#" + Math.floor(Math.random() * 16777215).toString(16));
    };

    React.useEffect(() => {
        fetchQuote();
    }, []);

    const handleClick = () => {
        return fetchQuote();
    };

    return (
        <div className="container" style={{ backgroundColor: color }}>
            <wrapper id="quote-box">
                <Quote
                    content={quote.content}
                    author={quote.author}
                    color={color}
                />
                <div id="footer">
                    <a href="/" id="tweet-quote">
                        <FontAwesomeIcon icon={faTwitter} />
                    </a>
                    <Button handleClick={handleClick} />
                </div>
            </wrapper>
            <p className="comment">Made by me</p>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

Quotes.js//

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuoteLeft } from "@fortawesome/free-solid-svg-icons";

export default function Quote(props) {
    return (
        <div className="main">
            <h1 id="text">
                <i className="quote_icon">
                    <FontAwesomeIcon icon={faQuoteLeft} />
                </i>
                {props.content}
            </h1>
            <p style={{ color: props.color }} id="author">
                -{props.author}
            </p>
        </div>
    );
}

Button.js//
import React from "react";

export default function Button(props) {
    return (
        <button onClick={props.handleClick} id="new-quote">
            New Quote
        </button>
    );
}

index.css//

* {
    margin: 0;
    box-sizing: border-box;
    font-family: "Spirax", cursive;
}
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: background-color 0.5s ease-in-out;
}

#quote-box {
    background-color: white;
    padding: 25px 50px;
    border-radius: 3px;
    max-width: 560px;
}

#text {
    font-size: x-large;
    margin-bottom: 20px;
    color: black;
}

#author {
    display: flex;
    float: right;
}

#footer {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
}

button {
    border-radius: 3px;
    border-style: none;
    height: 40px;
    width: 150px;
    background-color: black;
    color: antiquewhite;
    font-size: large;
    cursor: pointer;
}

#tweet-quote {
    width: 40px;
    height: 40px;
    background-color: black;
    display: grid;
    place-content: center;
    color: white;
    font-size: large;
    border-radius: 3px;
}

#author {
    font-size: larger;
}

.comment {
    margin-top: 10px;
    color: black;
    font-weight: 500;
}

.quote_icon {
    margin-right: 15px;
}

.main {
    transition: opacity 0.5s ease-in-out;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

2

Do you have this in codepen, github, or something similar? You are much more likely to get good help if you give us a link to where we can find your code instead of trying to paste all of it in here.

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4
5

Your deployed on github-pages app shows readme file.

If this is not expected behaviour, there is guide how to deploy cra on github-pages:
gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

the whole thing is just installing one npm package and adding couple lines into package.json

6

I did it just yesterday and it was working…I think it is a bug or sth.

7

back to your question

I see transition prop only in main selector, and in container selector

According to MDN, transition is not inherited, double-check here:

8

The text is changing like the background color does. I can’t understand why it’s not working. I don’t understand what you mean by “it’s not inherited”.

9

Inheritance - it’s when CSS props from parent elements also automatically applied to it’s children

Your text - it is props.content, right? It is rendered inside h1. Did you try to add CSS transition property to the h1?

Your .container has back-ground color which is changing as expected as I see. .container selector has transition property. That’s why it is working.

more on inheritance:

10

Yes, that did not work either.

11

Ok, It was not all about inheritance, my bad, did not figure out it right away.

The problem is - CSS animation will play when element is re-rendered, but:
your ‘h1’ element acually is not re-rendering on button click, the text-content inside h1 is re-rendering

Since h1 is not re-rendering - no animations.

But we can trick react alittle bit to re-render h1 fairly easy - tho I don’t know if it is good practice.

In order to make this work I chaged the below stuff in your code:

CSS: added some arbitrary animation to #text:

#text {
    font-size: x-large;
    margin-bottom: 20px;
    color: black;
    animation-name: text-appearance;
    animation-duration: 6s;
}

@keyframes text-appearance {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Quotes: just added key prop to h1:

...
<div className="main">
            <h1 id="text" key={props.content}>
...

I found this trick on stackoverflow, but again, I am not sure if this is cool thing to do it like that - we are kinda re-rendering additional stuff just for the sake of replaying animation.

1 Like
12

It works :slight_smile: Thank you very much for the info!!