This content originally appeared on DEV Community and was authored by Kemystra
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.
Adding random colors 🌈
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 body element.
Now, it is time to do a few touch ups!
Added Twitter Intent properly
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!
Finalizing the site
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.
Publishing!
CodePen only allows HTML codes that you normally put inside the body tag, so we need to set inline styles to them thru JavaScript:
var body = document.body;
body.classList.add("same-color");
document.documentElement.style.setProperty("--trans-time", "0.5s");
Since we are not writing pure CSS or JavaScript, we need to set the preprocessors for each: Babel for JS, and SASS for CSS.
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.
Afterwords
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!
Fullo me on Github!
Also on Twitter!
This content originally appeared on DEV Community and was authored by Kemystra
Kemystra | Sciencx (2022-04-21T14:00:01+00:00) Day 16: Final SASS touch-up. Retrieved from https://www.scien.cx/2022/04/21/day-16-final-sass-touch-up/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.