DEV Community: RoyalityFree

Best Ultimate Guide To Build A Random Quote Generator 2022

RoyalityFree — Fri, 26 Nov 2021 16:08:16 +0000

Hey Everyone 👋, today’s article is aimed at beginners trying to build a random quote generator using JavaScript. This will definitely make you understand the interaction between the frontend and backend and how they work on a web browser.

In my previous post, I had shared about Amazing Text To Speech Converter With HTML, CSS & JavaScript (2021) – RoyalityFree Blog. I received a great response to that, so I thought why not share more of my projects for free 🎉.

Note: I've worked very hard on this project and the output, was making it free 🤗. You can too support me in return for free by stargazing the official repository here.

As for this project, we’ll build a random quote generator that will display a quote fetched from an API on a button click or a default set. To get started, like always you’ll need three essential things that are forever useful for any sort of project:

A web browser
A code editor
A desire boost

For this tutorial, I will use the Microsoft Edge browser, Visual Studio Code as my code editor, and most importantly a boost in my desire to build something till the end! If you don’t seem familiar with my suggestions, feel free to use any other alternative.

Random Quote Generator (Understanding)

A Random Quote Generator is proficient in pulling quotes randomly from an API, any database, or plainly from an array. We will be designing a Random Quote Generator from scratch using HTML, CSS, JavaScript, and free-quotes API.

Random Quote Generator (Building)

For every project, we need some basic core files. In this case, we’ll need three files with alike extensions, i.e .html, .css, .js. Once you’ve organized them in a folder (e.g random-quote-generator), you are good to paste the source code from the following sections.

You can optionally download the whole source code of this Random Quote Generator from the available mirrors, at the end of the article.

Firstly, create an HTML file with a filename index.html and paste the following code into your HTML file. Save It, you’ve to create a file with an .html extension at the last.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Meta Tags Start, For Reference https://www.w3schools.com/tags/tag_meta.asp -->
<meta charset="utf-8">
<meta name="description" content="Free random quotes generator, either inspirational or motivational.">
<meta name="keywords" content="quotes, random quotes, random quote generator">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- Meta Tags End-->
<!-- Title (Change This If Publlic)-->
<title>Random Quotes | RoyalityFree</title>
<!-- Link Custom Stylesheet And Fonts Start -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!-- Link Custom Stylesheet And Fonts End-->
<body>
<!-- Start Container -->
<div class="wrapper">
<!-- Start Header -->
<header>
    Quote For <span id="getday"></span>
</header>
<!-- End Header -->
<!-- Start Content -->
<div class="content">
<div class="quote-area">
<i class="fas fa-quote-left"></i>
<p class="quote">Protecting your mind, body and spirit from negativity is a sign of self-love.</p>
<i class="fas fa-quote-right"></i>
</div>
<div class="author">
<span>__</span>
<span class="name">Nitin Namdeo</span>
</div>
</div>
<div class="buttons">
<div class="features">
<ul>
<li class="speech"><i class="fas fa-volume-up"></i></li>
<li class="copy" onclick="onCopy()"><i class="fas fa-copy"></i></li>
<li class="twitter"><i class="fab fa-twitter"></i></li>
</ul>
<button>Another</button>
</div>
</div>
</div>
<!-- End Content -->
<!-- Get Script-->
<script src="script.js">
</script>
</body>
</html>

Secondly, create a CSS file with the filename style.css and paste the following code into the file. Save It, you have to create a file with .css an extension at the last.

/* Built By RoyalityFree | Codes Initiative */
*{
    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;
    padding:0 10px;
    background-image: radial-gradient(#31e9cb,#a3f5e8,#31e9cb);
    user-select: none;
}
::selection{
    color:#fff;
    background:#1AE78D
}
.wrapper{
    width:605px;
    background:#fff;
    border-radius:15px;
    padding:30px 30px 25px;
    box-shadow:0 12px 35px rgba(0,0,0,.1)
}
header,.content :where(i,p,span){
    color:#102137
}
.wrapper header{
    font-size:35px;
    font-weight:600;
    text-align:center
}
.wrapper .content{
    margin:35px 0
}
.content .quote-area{
    display:flex;
}
.quote-area i{
    font-size:15px
}
.quote-area i:first-child{
    margin:3px 0 0 0
}
.quote-area i:last-child{
    display:flex;
    margin:0 0 3px 10px;
    align-items:flex-end;
}
.quote-area .quote{
    font-size:22px;
    text-align:center;
}
.content .author{
    display:flex;
    font-size:18px;
    margin-top:20px;
    font-style:italic;
    justify-content:flex-end
}
.author span:first-child{
    margin:-6px 5px 0 0;
    font-family:monospace;
}
.buttons .features{
    display:flex;
    margin-top:20px;
    align-items:center;
    justify-content:space-between;
}
.features ul{
    display:flex
}
.features ul li{
    margin:0 5px;
    height:47px;
    width:47px;
    display:flex;
    cursor:pointer;
    color:#1AE78D;
    list-style:none;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    border:2px solid #1AE78D;
    transition:all .3s ease
}
.features ul li:first-child{
    margin-left:0
}
ul li:is(:hover,.active){
    color:#fff;
    background:#1AE78D
}
ul .speech.active{
    pointer-events:none
}
.buttons button{
    border:none;
    color:#fff;
    outline:none;
    font-size:16px;
    cursor:pointer;
    padding:13px 22px;
    border-radius:15px;
    background:#1AE78D
}
.buttons button:hover{
    background: #4DD99C;
}
.buttons button.loading{
    opacity:.7;
    pointer-events:none
}
@media(max-width:728px){
    .wrapper{
        padding:25px 25px 20px;
        margin: 15px 15px 15px 15px;    
    }
    .wrapper header{
        font-size:29px
    }
    .quote-area .quote{
        font-size:20px;
        word-break:keep-all
    }
    .content .author{
        font-size:16px
    }
    .quote-area i{
        font-size:12px
    }
    .features ul li{
        margin:0 3px;
        height:45px;
        width:45px
    }
    .buttons button{
        font-size:15px;
        padding:12px 20px
    }
}

Lastly, create a JavaScript file with a filename script.js and paste the following code into your JavaScript file. Save It, you have to create a file with .js an extension at last.

// Built By RoyalityFree | Codes Initiative

const quoteText = document.querySelector(".quote"),
    quoteBtn = document.querySelector("button"),
    authorName = document.querySelector(".name"),
    speechBtn = document.querySelector(".speech"),
    copyBtn = document.querySelector(".copy"),
    pingTwitter = document.querySelector(".twitter"),
    synth = speechSynthesis;

function randomQuote() {
    quoteBtn.classList.add("loading");
    quoteBtn.innerText = "Loading 🎉";
    fetch("https://free-quotes-api.herokuapp.com/").then(response => response.json()).then(result => {
        quoteText.innerText = result.quote;
        authorName.innerText = result.author || "No Author";
        quoteBtn.classList.remove("loading");
        quoteBtn.innerText = "Another";
    });
}
speechBtn.addEventListener("click", () => {
    if (!quoteBtn.classList.contains("loading")) {
        let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} by ${authorName.innerText}`);
        synth.speak(utterance);
        setInterval(() => {
            !synth.speaking ? speechBtn.classList.remove("active") : speechBtn.classList.add("active");
        }, 10);
    }
});
copyBtn.addEventListener("click", () => {
    navigator.clipboard.writeText(quoteText.innerText);
});
pingTwitter.addEventListener("click", () => {
    let twitterUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
    window.open(twitterUrl, "_blank");
});
quoteBtn.addEventListener("click", randomQuote);

pingTwitter.addEventListener("click", () => {
    let twitterUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
    window.open(twitterUrl, "_blank");
});
const d = new Date();
const weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
let day = weekday[d.getDay()];
document.getElementById("getday").innerHTML = day;
function onCopy() {
    alert("Copied Quote Successfully To 📋!");
  }

With all that set in place, we’re ready to check the output of all three files combined to build a powerful webpage. It should do something like this by now:

Random Quote Generator (Last Words)

That’s it, you’ve now successfully built a Random Quote Generator Webpage in native HTML, CSS, and JavaScript.

If your code does not work or you have faced any problem/issue, try downloading the source files from the provided download button below.

It’s priceless and a .zip file that will be downloaded and then just extract it to your file manager, server, etc.

Building A Text To Speech Converter For Beginners!

RoyalityFree — Wed, 24 Nov 2021 15:28:58 +0000

Hey everyone! Today we’ll be building something just too awesome in this article, you will learn how to create a Text To Speech Converter with HTML, CSS, and JavaScript.

I have worked very hard on this project to make it come true, all that for not even a single penny 😍. Do stargaze and support this project at the official repository for this project on GitHub and a demo is available here!How Cloud Speech Works (Source: Google)

What Is Text To Speech Converter In The First Place? (Core Basics)

Text To Speech (TTS) is a technology that empowers your text to be converted into speech verbal sounds.

In this project (Text To Speech Converter), you can convert your text into speech with different voices and accents powered by native output methods for every type of device.

A pause and resume button that is embedded into the core of your text is above the minimum requirement of ~125 words/characters.

About The Text To Speech Converter Project (Understanding Basics)

In the JavaScript code, originally, I got the user text and call a function textToSpeech() with parsing the user input text as an argument.

Inside this function, leveraging the speech synthesis property of the window object, I converted the user input text to speech.

Speech Synthesis is defined as a web speech API that moderates the speech service using native speech verbal’s available on the base device.
After this, I got all the available verbal voices from the user device using the getVoices() scheme of Speech Synthesis and insert it into the attributed HTML select tag.

That’s all and I request you to continue reading to get more knowledge depth on what the code is actually performing.

Source: SugarMint

Building Text To Speech Converter Project (Free Source Code 🎉)

To build this Text To Speech Converter project, you need to create three core files, namely a .html, .css and a .js file. After organizing these files just paste the given codes into your file.

You can further download the source code files of this Text To Speech Project from the proffered download button below at the end of this article.

Firstly, create an HTML file with a filename of index.html and paste the following codes into your HTML file. Save It, you’ve to create a file with an .html extension at the last.

<!doctype html>
<html lang="en">
  <head>
<!-- Built By RoyalityFree's Blog-->
    <meta charset="utf-8">
    <title>Text To Speech | RoyalityFree Codes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/style.css">
  </head>
  <body>
    <div class="wrapper">
     <div class="container-fluid">
      <h2 class="h2 text-center">
          Text To Speech
      </h2>
      <form>
        <div class="form-group row">
          <label class="col-sm- col-form-label">Enter Text <span class="badge badge-success">Max 5000 Letters</span>
          </label>
          <div class="col-15">
              <textarea maxlength="5000"></textarea>
        </div>
        </div>
        <div class="form-group row">
            <label>Select Voice</label>
            <div class="outer">
              <select></select>
            </div>
        </div>
        <div class="form-group row">
          <div class="col-15">
            <button type="submit" class="btn btn-primary">Convert To Speech</button>
          </div>
        </div>
      </form>
     </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Secondly, create a CSS file with the filename of style.css and paste the following code in the file. Save It, you have to create a file with .css extension at the last.

/* Built By RoyalityFree's Blog | Codes */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
} /*Applied Universally*/

body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image: linear-gradient(90deg, #1d4aff, #829bff,#1d4aff);
}

::selection{
  color: #fff;
  background: #5256AD; /* Change Selection Colour*/
}

.wrapper{
  width: 370px;
  padding: 25px 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0,0,0,0.05);
} /*Box Behind*/

.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

.wrapper form{
  margin: 35px 0 20px;
}

form .row{
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}

form .row label{
  font-size: 18px;
  margin-bottom: 5px;
}

form .row:nth-child(2) label{
  font-size: 17px;
}

form :where(textarea, select, button){
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
}

form .row textarea{
  resize: none;
  height: 110px;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid #999;
}

form .row textarea::-webkit-scrollbar{
  width: 0px;
}

form .row .outer{
  height: 47px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}

form .row select{
  font-size: 14px;
  background: none;
}

form .row select::-webkit-scrollbar{
  width: 8px;
}

form .row select::-webkit-scrollbar-track{
  background: #fff;
}

form .row select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}

form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  background: #675AFE;
  transition: 0.3s ease;
}

form button:hover{
  background: #4534fe;
}

@media(max-width: 728px){
  .wrapper{
    max-width: 345px;
    width: 100%;
    margin-left: 7px;
    margin-right: 7px;
  }
} /*For Mobile View*/

Finally, create a JavaScript file with a filename of script.js and paste the following code in your JavaScript file. Save It, you have to create a file with .js extension at last.

const textarea = document.querySelector("textarea"),
voiceList = document.querySelector("select"), // Selection
speechBtn = document.querySelector("button");

let synth = speechSynthesis,
isSpeaking = true;

voices();

function voices(){
    for(let voice of synth.getVoices()){
        let selected = voice.name === "Google US English" ? "selected" : "";
        let option = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
        voiceList.insertAdjacentHTML("beforeend", option); // Getting Verbal's 
    }
}

synth.addEventListener("voiceschanged", voices);

function textToSpeech(text){
    let utterance = new SpeechSynthesisUtterance(text);
    for(let voice of synth.getVoices()){
        if(voice.name === voiceList.value){
            utterance.voice = voice;
        }
    }
    synth.speak(utterance);
}

speechBtn.addEventListener("click", e =>{
    e.preventDefault();
    if(textarea.value !== ""){
        if(!synth.speaking){
            textToSpeech(textarea.value);
        }
        if(textarea.value.length > 80){
            setInterval(()=>{
                if(!synth.speaking && !isSpeaking){
                    isSpeaking = true;
                    speechBtn.innerText = "Convert To Speech"; //Execute
                }else{
                }
            }, 500);
            if(isSpeaking){
                synth.resume();
                isSpeaking = false;
                speechBtn.innerText = "Pause Speech"; //Pause
            }else{
                synth.pause();
                isSpeaking = true;
                speechBtn.innerText = "Resume Speech"; //Resume
            }
        }else{
            speechBtn.innerText = "Convert To Speech"; //Execute
        }
    }
});

Source: VoximPlant

Text To Speech Converter (Last Words)

That’s it, you’ve now successfully built a Text To Speech Converter Project in native HTML, CSS, and JavaScript.

If your code does not work or you have faced any problem/issue, try downloading the source files from the provided download button below.

It’s priceless and a .zip file will be downloaded and then just extract it to your filemanager, server, etc.

Hosting A Website On RoyalityFree For Free

RoyalityFree — Thu, 28 Oct 2021 06:13:28 +0000

Firing up your website online is not that hard at all. In this article we will show how you can host a little site for free using RoyalityFree.

RoyalityFree has some great features that you can enjoy using, and in my personal experience it is one of the best hosting platforms you can get for free.

So let's dig into the process of hosting a website there.

1. CREATE ACCOUNT OR LOG IN YOUR ACCOUNT

There creating an account is an easy and straightforward process as shown in the following image:

2. Create a Hosting Account

Here you can now create an account with the name of the website you want to host and not your details and you do so by clicking on the Create Account button.

3. Use a Custom Domain or Subdomain Provided by RoyalityFree

Here if you have your custom domain, you can enter it and change your nameservers in your domain providers to point to RoyalityFree. Need help with this? Check out this docs article!

For custom domains, you would click on the Custom Domains tab, then enter your domain name and click Search button.

For the subdomains provided by RoyalityFree, click on the Subdomains tab and enter your preferred subdomain name.

4. Simplifying management

We all love to filter stuff in our day to day life. So we brought the account label to help you login to your account for the correct purpose :)

5. Manage your account

After successful creation of your subdomain or domain, your account will appear with a button to manage it. Click on the Manage button.

Mine shows two accounts, that's because I have two accounts, yours may show one, if this is the first time.

6. Upload Your Files

Another window will open and a screen like this will open:

Click on file manager and you will see a window like this, now go to htdocs and upload your files there.

Your uploaded files should appear there now.

7. Creating Your Database

This is the most important part, some get stuck here.

Click on Control Panel and it will open another tab

Now click on MySQL Database which will open another window as shown below:

Enter your database name and click Create Database.

Your database will now appear in the current database. Click on admin button and another tab will open as shown below and from there you can start creating your tables or click on import tab and import your already created database.

Password's

There is only one password across all databases, etc. You can find the all in one password in the client area.