Harshil Chovatiya's 100DaysOfCode Journey: Day 42 - Unleashing the Power of Random Quotes.

on
Harshil Chovatiya's 100DaysOfCode Journey: Day 42 - Unleashing the Power of Random Quotes.

Harshil Chovatiya's 100DaysOfCode Journey: Day 42 - Unleashing the Power of Random Quotes.

Welcome back to my coding adventure! Today, I dived into the fascinating realm of random quote generation. Join me as I explore the intricacies of creating a quote generator with exciting features for a richer user experience.

Random Quote Generator

Here's a brief overview of the app I've created:

Introduction

Embark on today's coding escapade with me as I venture into the realm of random quote generation. Armed with HTML, CSS, and JavaScript, I set out to create an engaging experience complete with features like Instagram sharing, clipboard copy, and even the ability to bring quotes to life through voice. Let's unravel the magic behind the scenes and discover the art of crafting dynamic and unpredictable quotes.

File Structure:

Before we delve into the application's details, let's take a look at its file structure. Understanding how the Random Quote Generator is organized behind the scenes can help you navigate and customize it effectively.

The app's file structure typically consists of the following components:

                Random Quote Generator/
                  
                  │   
                  └── index.html
                  └── style.css
                  └── index.js
  • index.html: This is the main HTML file that serves as the entry point for the application. It contains the structure of the app's user interface.
  • styles.css: The stylesheet file, app's visual design is defined. You can customize the app's appearance by modifying this file.
  • app.js: The JavaScript file responsible for handling the app's logic. It fetches currency prices data, processes it, and updates the user interface accordingly.

Code Snippets:

Here are code snippets for the three main files:

index.html (UI Creation):

                
                
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wapper">
        <header>Quates of the days</header>
        <div class="content">
            <div class="quote-area">
                <i class="fas fa-quote-left"></i>
                <p class="quote">Naver give up</p>
                <i class="fas fa-quote-right"></i>
            </div>
            <div class="author">
                <span>____</span>
                <span class="name">Harshil</span>
            </div>
        </div>
        <div class="buttons">
            <div class="features">
                <ul>
                    <li class="sound"><i class="fas fa-volume-up"></i></li>
                    <li class="copy"><i class="fas fa-copy"></i></li>
                    <li class="instagram"><i class="fab fa-instagram"></i></li>
                </ul>
                <button id="button">New Quote</button>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css (Visual Design):

                
                
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #5372F0;
}
.wapper{
    width: 605px;
    background: #fff;
    border-radius: 35px;
    padding: 30px 30px 25px;
}
.wapper header{
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}
.wapper .content{
    margin: 35px 0;
}
.content .quote-area{
    display: flex;
    justify-content: center;
}
.quote-area i{
    font-size: 15px;
}
.quote-area i:first-child{
    margin: 3px 10px 0 0;
}
.quote-area i:last-child{
    display: flex;
    align-items: flex-end;
    margin: 0 0 3px 10px;
}
.quote-area .quote{
    font-size: 22px;
    text-align: center;
    word-break: break-all;
}
.content .author{
    display: flex;
    margin-top: 20px;
    font-size: 11px;
    font-style: italic;
    justify-content: flex-end;
}
.author span:first-child{
    margin: -7px 5px 0 0;
    font-family: monospace;
}
.wapper .buttons{
    border-top: 1px solid #ccc;
}
.buttons .features{
    display: flex;
    align-items: center;
    margin-top:23px ;
    justify-content: space-between;
}
.features ul{
    display: flex;
}
.features ul li{
    list-style: none;
    margin: 0 5px;
    height: 47px;
    width: 47px;
    display: flex;
    cursor: pointer;
    color: #5372F0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid #5372F0;
}
.features ul li:hover{
    color: #fff;
    background: #5372F0;
}
.features button{
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    font-style: 16px;
    padding: 13px 22px;
    background: #5372F0;
    border-radius: 30px;
}
button.loading{
    opacity: 0.7;
    pointer-events: none;
}

script.js (Logic and Data Handling):

                
                
const quoteText = document.querySelector(".quote");
const quoteauthor = document.querySelector(".author .name");
quoteBtn = document.querySelector("button");
soundBtn = document.querySelector(".sound");
copyBtn = document.querySelector(".copy");
instagram = document.querySelector(".instagram");
imagea = document.querySelector(".img");

//rendom 
function randomQuote(){
    quoteBtn.classList.add('loading');
    quoteBtn.innerText = "Loading Quote....";
    fetch("https://api.quotable.io/random").then(res => res.json()).then(result =>{
        console.log(result);
        quoteText.innerText = result.content;
        quoteauthor.innerText = result.author;
        quoteBtn.innerText = "New Quote";
        quoteBtn.classList.remove('loading');
    });
}

soundBtn.addEventListener("click", ()=>{
    voices = window.speechSynthesis.getVoices();
    var msg = new SpeechSynthesisUtterance(quoteText.innerText + 'by' +quoteauthor.innerText);
    msg.voice = voices[4];
    window.speechSynthesis.speak(msg);
});

copyBtn.addEventListener("click", ()=>{
    navigator.clipboard.writeText(quoteText.innerText);
})

instagram.addEventListener('click', ()=>{
    let url = "https://instagram.com/harshilchovatiyaa";
    window.open(url, "_blank");
})

quoteBtn.addEventListener("click", randomQuote);

Features

  • Random Quotes: Generate a variety of quotes dynamically with each click.
  • Instagram Sharing: Easily share your favorite quotes on Instagram for a social touch.
  • Clipboard Copy: Copy quotes to your clipboard with a click, making sharing even more convenient.
  • Voice Integration: Bring quotes to life with the ability to listen to them in your preferred voice.

Live Example

Here is the Live Preview of the above code

If you're interested in accessing the source code for this GithubUser Search application, simply click on this link to visit the repository: Click Here. To get a feel for how the application works, you can check out the live preview by clicking here.

Conclusion

Wrapping Up Day 42

Day 42 has been an exhilarating journey into the world of random quotes. From coding intricacies to user-friendly features, it's been a day well spent. Stay tuned for more updates as I continue my 100DaysOfCode challenge. Happy coding!

Social Media

Comments

Post a Comment