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