This post is a continuation of the previous post. For context, I'm making a Random Quote Machine for FreeCodeCamp projects. This is how I completed it.
Before this, we have completed the fading function. Now, we want to change its color each time the new quote is shown. This part is kinda trivial, this would be left as an exercise to the reader.
I also applied the colors to
background-color property of buttons and
Now, it is time to do a few touch ups!
If you have seen Tweet buttons on some website, they may use Twitter Web Intent.
It's a special Twitter URL that allow users to tweet some pre-defined content. The URL is placed as the
href attribute in a button.
You can read more here.
After placing them inside the tweet button, it's time for the final touch ups!
First, made the site neat with layout adjustments.
Then, added rounded corners to all buttons and the quote box.
I also took some fonts from Google Fonts (specifically, Akshar and Open Sans font).
And... we're done! How cool is that?
Now, to publish them onto CodePen.
CodePen only allows HTML codes that you normally put inside the
var body = document.body; body.classList.add("same-color"); document.documentElement.style.setProperty("--trans-time", "0.5s");
We also need to put our Google Fonts link into the
head tag. Luckily, CodePen already have a special setting for that.
The most important thing here is importing React, ReactDOM and FontAwesome library into the site. This can be done by searching the necessary package in the setting.
And now we're done.
Yay I finished it! I'm now one step closer towards becoming a front-end developer. For those who are struggling with bugs or any random stuff, keep going! Finishing a project will make you forget about that random bug at 3am, or that dependency hell you encounter, or heck anything. It felt blissful and reassuring.
Hope tomorrow would be better for you!