Random Quote Generator
How do I make an random quote generator?
For freecode camp challenge. What is a random quote generator? How do you make a random quote generator? This script and codes were developed by Claudia Contreras on 14 October 2022, Friday.
Random Quote Generator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Quote Generator</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="row text-center"> <h2>Random Movie Quote Generator</h2> </div> <div class="row text-center"> <div class="col-xs-2"></div> <div class="col-xs-8 well message"> <div id="quote-content"> Quote Content </div> <div id="quote-author"> Quote Author </div> </div> <div class="col-xs-2"></div> <div class="row text-center"> <div class="col-xs-12"> <a id="tweetQuote" class="btn" href="#"><i id="tweetQuote" class="fa fa-twitter fa-3x" aria-hidden="true"></i></a> <button id="getMessage" class="btn"> Get New Quote </button> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Random Quote Generator - Script Codes CSS Codes
body { background: #36384C; color: #E9DCCD;
}
.message { background: #613A43; color: #E3BAB3; font-family: 'Cherry Swash', cursive; font-weight: bold; font-size: 22px;
}
#getMessage { color: #613A43; background: #E9DCCD; font-weight: bold; font-size: 16px;
}
#getMessage:active { color: #E9DCCD; background: #613A43; border: 2px solid #E9DCCD;
}
#getMessage:hover { background: #E3BAB3;
}
#getMessage, .fa-twitter { margin: 0px 100px;
}
.fa-twitter { color: #E9DCCD;
}
.fa-twitter:hover{ color: #E3BAB3
}
.fa-twitter:active{ color: #E3BAB3
}
Random Quote Generator - Script Codes JS Codes
//To start off with a quote
doIt();
//Change the quote everytime the button is pushed
$(document).ready(function() { $("#getMessage").on("click", function() { doIt(); });
});
//This is the code to get and display the quotes
function doIt() { $.ajax({ url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=famous', type: 'POST', data: {}, dataType: 'json', success: function(data) { //Show the quote and the author on different lines $("#quote-content").text("\"" + data.quote + "\""); $("#quote-author").text("- " + data.author); }, error: function(err) { alert(err); }, beforeSend: function(xhr) { xhr.setRequestHeader("X-Mashape-Authorization", "ZDRLNucPDUmshnv84BUjqJQcW3ewp1jleEBjsn4t5qLdVhvu5C"); } });
} $('#tweetQuote').on('click', function tweetQuote(e) { var twitterURL = 'https://twitter.com/intent/tweet'; var text = $('#quote-content').text() + ' - ' + $("#quote-author").text(); if(text.length > 140) { text = text.substr(0, 137) + '...'; } text = encodeURIComponent(text); window.open(twitterURL + '?text=' + text); });
Developer | Claudia Contreras |
Username | coderpilot |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 2,677 Kb |
Views | 26,312 |
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!
Name | Size |
Twitch API | 3,412 Kb |
Wikipedia API | 2,802 Kb |
Weather App | 2,688 Kb |
TEst | 1,622 Kb |
Coder Pilot Portfolio | 5,826 Kb |
Walt Disney Tribute Page | 3,635 Kb |
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!
Name | Username | Size |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Nice textured background | Hans | 2,659 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!