Random Quote Generator using HTML, TailwindCSS & JavaScript | Coding Torque

byPiyush Patil -
0




 Random Quote Generator using HTML, TailwindCSS & JavaScript

Hello Guys! Welcome to Coding Torque. In this blog we are going to create Random Quote Generator using HTML, TailwindCSS & JavaScript😍. 

Let's go step by step💥

HTML with TailwindCSS Classes Code

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Tailwind CSS  -->
    <script> src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <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">

    <title>Quotes Generator App - @code.scientist x @codingtorque</title>
</head>

<body class="bg-zinc-900 text-white font-[poppins]">
    <div class="mt-48 flex flex-col items-center justify-center">
        <div
            class="profileCard h-72 w-[30rem] bg-zinc-800 shadow-xl flex flex-col items-center justify-between py-10 rounded-xl">
            <h2> class="text-2xl font-bold mb-4 text-cyan-500 shadow-xl">Random Quote Generator</h2>
            <p> id="quote" class="text-uppercase text-md text-gray-400 text-center px-8">Try not to become a
                man of
                success but rather try to become a man of value.
            </p>
            <p> id="author" class="italic">By Author</p>

            <button class="h-12 w-12 rounded-full bg-cyan-500 flex items-center justify-center mt-5 shadow-xl"
                onclick="generateQuote()"><i> class="fas fa-sync"></i></button>
        </div>
    </div>
</body>

</html>
JavaScript Code
const generateQuote = () => {
let url = "https://type.fit/api/quotes";
fetch(url).then(function (response) {
    return response.json()
}).then(function (data) {
    let randNum = Math.floor((Math.random() * 1500) + 1);
    let randomQuote = data[randNum];
    document.getElementById("quote").innerHTML = `"${randomQuote.text}"`;
    document.getElementById("author").innerHTML = `- ${randomQuote.author ? randomQuote.author : ""}`;
});
}


If you have any doubt or any project idea feel free to Contact Us
Hope you find it helpful💖

Written by : Coding Torque | Piyush Patil

Follow us on instagram  for more projects like this👨‍💻
- @code.scientist
- @codingtorque
- @codingknights

Tags:

Post a Comment

Previous Post Next Post