How To Create Quote Generator App Using HTML, CSS, and JavaScript | Random Quote Generator App

In this video, I had tried making Random Quote Generator App using HTML, CSS, and JavaScript ☺
• Quote API: api.com/quotable.io/random
• CORS Fix: / 3-ways-to-fix-the-cors...
Video Sponsored By - famoid.com​​​​​​​
(Meet The New Way Of Becoming Famous!)
____________________________________________
▶️ Follow Us On:
• Facebook: techlenses​​​​​​​
• CZcams: / techlenses​​​​​​​
• Instagram: / techlenses​​​​​​​
• Twitter: / tech_lenses​​​​​​​
• For Business Enquiry: [e-mail]
• Donate at PayPal ❤: [e-mail]

[@techlenses]

Hey Guys,
I found some improvements:
1. Use Flex Instead Of Position Absolute To Perfectly Center The Loader Animation.
2. You are not required to use an event object inside the event listener.
3. Most Important One I Found, Use the "else" statement to change the font size of the quote back to 32px if quote characters are less than 100.
4. If you click the refresh button multiple times, the alert box will also show multiple times as we are invoking the updateUI function every time we click the refresh button, and inside the updateUI function, there is also a click event added to the copy button.
To fix this, add the click event listener to the copy button and declare it outside the updateUI function (i.e in global scope), and then copy data to the clipboard by getting the quote and author name from the quoteContainer and authorContainer querySelector reference.
See the below code for better understanding:
const updateUI = (response) => {
const authorData = `- ${response.author}`;
const quoteData = `${response.content}`;
quoteContainer.textContent = quoteData;
authorContainer.textContent = authorData;
if(quoteData.length > 100) {
quoteContainer.setAttribute("style", "font-size: 22px")
} else {
quoteContainer.setAttribute("style", "font-size: 32px")
}
*// Event listener added to the copy button removed from here...*
if(quoteData.length) {
loaderHide();
};
};
*// Event listener added to the copy button and declared here...*
copy.addEventListener("click", () => {
const copyData = `${quoteContainer.textContent} - ${authorContainer.textContent}`;
navigator.clipboard.writeText(copyData);
alert("Quote copied to your clipboard!");
if(quoteContainer.textContent.length) {
loaderHide();
};
});

[@Aventa9001]

Hey what is the best keyboard under 2500 rs

[@techlenses]

CB GK 16

[@Aventa9001]

😊 thanks

[@Aventa9001]

And what about cb gk 18 is it bad

[@techlenses]

GK 18 comes with red switches.

[@Aventa9001]

But it is not available