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">
<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>Quotes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p id="quote"></p>
<p id="author" class="author"></p>
<button class="btn" onclick="getQuote()">New</button>
</div>
<script src="index.js"></script>
</body>
</html>

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.

output

Programming Quote Generator | Programming Quote Generator using html css javascript
output

CSS for Quote Generator

 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');  
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
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;
}
.btn{
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.

output

Now add javascript for the get  Programming Quote in box.

Javascript for Quote Generator

 // http://quotes.stormconsultancy.co.uk/random.json  
const Quote = document.getElementById("quote");
const Author = document.getElementById("author");
function getQuote() {
fetch("http://quotes.stormconsultancy.co.uk/random.json")
.then((res) => {
return res.json();
})
.then((data) => {
Quote.innerText = data.quote;
Author.innerText = `-${data.author}`;
});
}
getQuote();

output

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