Quote generator

Size
2,325 Kb
Views
34,408

How do I make an quote generator?

What is a quote generator? How do you make a quote generator? This script and codes were developed by Alex Sperellis on 16 September 2022, Friday.

Quote generator Previews

Quote generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>quote generator</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="quote-generator"> <blockquote id="quote" class="text-center"></blockquote> <div class="buttons"> <button id="generateQuote" class="btn btn-primary">Generate</button> <a id="tweetQuote" href="" class="btn btn-secondary" target="_blank">Tweet</a> </div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quote generator - Script Codes CSS Codes

body { background-color: #152026; color: #fff;
}
.btn { border: none; color: #fff; cursor: pointer;
}
.btn + .btn { margin-left: 20px;
}
.btn-primary { background-color: #A57164;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: rgba(165, 113, 100, .6);
}
.btn-secondary { background-color: #394146;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active { background-color: rgba(57, 65, 70, .6); color: #fff;
}
.buttons { display: flex; justify-content: center;
}
blockquote { background-color: #6AC2AA; padding-left: 150px; padding-right: 150px; font-size: 35px; flex: 1; justify-content: center; display: flex; flex-direction: column; max-height: 75vh;
}
.quote-generator { display: flex; flex-direction: column; height: 100vh;
}

Quote generator - Script Codes JS Codes

const tweetBtn = document.getElementById('tweetQuote');
const generateQuote = document.getElementById('generateQuote');
const quoteContainer = document.getElementById('quote');
const changeQuote = function(data) { console.log(data); const quote = data[0].content.replace('<p>', '').replace('</p>', '') + "\n— " + data[0].title; console.log(quote); quoteContainer.innerHTML = quote; tweetBtn.href = 'https://twitter.com/intent/tweet?hashtags=quotes&text=' + encodeURI(quote);
};
const getQuote = function() { $.getJSON("https://quotesondesign.com/wp-json/posts?callback=", changeQuote);
};
getQuote();
generateQuote.addEventListener("click", getQuote, false);
Quote generator - Script Codes
Quote generator - Script Codes
Home Page Home
Developer Alex Sperellis
Username asperellis
Uploaded September 16, 2022
Rating 3
Size 2,325 Kb
Views 34,408
Do you need developer help for Quote generator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Sperellis (asperellis) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!