Programming Quote Generator | Programming Quote Generator using html css javascript

Programming Quote Generator | Programming Quote Generator using HTML css javascript

Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Programming Quote Generator. We use HTML & CSS and javascript for this Programming Quote Generator. Hope you enjoy our blog so let’s start with a basic HTML structure for Programming Quote Generator.

HTML code for Quote Generator

 <!DOCTYPE html>  
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<div class="container">
<p id="quote"></p>
<p id="author" class="author"></p>
<button class="btn" onclick="getQuote()">New</button>
<script src="index.js"></script>

There is all HTML code for the Programming Quote Generator. Now, you can see output without CSS, then we write CSS for our programming Quote Generator.


Programming Quote Generator | Programming Quote Generator using html css javascript

CSS for Quote Generator

 @import url('');  
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 450px;
background: #212121;
box-shadow: 0 0 30px #2121216b;
padding: 3.5em 2.5em;
color: white;
position: relative;
display: flex;
align-items: center;
flex-direction: column;
.container .author{
margin-top: 1em;
background: linear-gradient(to right, #16A085, #f4D03F);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 150px;
height: 40px;
position: absolute;
bottom: -8%;
background: linear-gradient(to right, #16A085, #f4D03F);
color: white;
border: none;
cursor: pointer;
font-size: 1.3em;
box-shadow: -10px 20px 50px #16A0848e,10px 20px 50px #f4D03F98 ;

Now we have completed our CSS section,  Here is our updated output CSS.


Now add javascript for the get  Programming Quote in box.

Javascript for Quote Generator

const Quote = document.getElementById("quote");
const Author = document.getElementById("author");
function getQuote() {
.then((res) => {
return res.json();
.then((data) => {
Quote.innerText = data.quote;
Author.innerText = `-${}`;


Check it more

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like A Programming Quote Generator, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Programming Quote Generator using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “Programming Quote Generator | Programming Quote Generator using html css javascript”

Leave a Comment