Programming Quote Generator | Programming Quote Generator using html css javascript

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
Programming Quote Generator | Programming Quote Generator using html css javascript

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

Programming Quote Generator | Programming Quote Generator using html css javascript

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 

1 Comments

Post a Comment

Previous Post Next Post