Hello Jonathan,
Looks very good, it’s responsive, this very good. Also passes the test, cool.
personally I don’t like that 100vh height for the background, becasue there is some more data as footer. User needs to scroll to catch that part. I think it’s kind of waste of page area. But this is my thought, you may ignore.
I see this is kind of client-server work, since it asks for a quote from an external API and loads it, very good.
Please note lines 7 and 9 of BlockQuote.js
, I recommend you escape the literal double-quote as "
Considering:
...
<span className="double-quote">"</span>
{props.text}
<span className="double-quote">"</span>
...
I just tried some random quotes, and hopefully it didn’t came up with same quote serially, very good. Not sure if I was lucky(I think I was),but please consider, even you choose the quotes randomly, this is possible to the new random quote is the same as just provided recently so user see two exact same quote.
I don’t know if it’s possible with the API you use to tell it exclude some quotes you got recently(maybe using id if possible), but even if it doesn’t support it, you may do this in your client. Just before you show the new quote, check if it’s same as currently one is showing, if yes then ask for another quote till you grab one unique/new.
One thing I really don’t like about dynamic data and UI/UX is the location of controllers when data is changed. This is not critical, but not very pro.
You can experience it too, this is easy. Just press the new quote several times. You see becasue some quotes are long, and some are short, it moves the new quote up and down, and user need to jump the mouse pointer to perform new request. This is not pro comrade.
One good fix is replace the new quote somewhere you know it never will moved based on new quote text length, maybe top of the form.
or maybe give a constant height to text section(I don’t recommend this way) so new quote button will be at its place, but remember to let the text container scroll when needed, and also let user resize it too.
Overall looks good Jonathan, you really work good comrade.
Keep going on great work, happy coding.
Edit:
(sorry forgot to answer your question)
Honestly didn’t check you all codes, since they were too much! And they seems working! but one thing I would to tell you, and I believe you already experienced is about using libraries and frameworks like react, …
I’m not telling you to not use them, but you know sometimes it doesn’t worth to code too much for a small application like this using react. I believe this could be much simpler, and less complex using pure JS.
Happy coding.