Random Quote Machine
How do I make an random quote machine?
This is a Random Quote Machine that uses Forismatic API.. What is a random quote machine? How do you make a random quote machine? This script and codes were developed by Mihkel on 08 December 2022, Thursday.
Random Quote Machine - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Quote Machine</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h2 class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam sequi, odit architecto placeat porro animi pariatur officia quas delectus doloribus!</h2> <span class="author">- John Doe</span> <hr> <a href="#" class="tweet-btn" title="Tweet" target="_blank"> <button type="button" class="btn"> <i class="fa fa-twitter" aria-hidden="true"> Tweet</i> </button> </a> <button type="button" class="btn generate-btn" title="Generate"><i class="fa fa-quote-right" aria-hidden="true"> Generate</i></button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Random Quote Machine - Script Codes CSS Codes
body { background-color: #3A506B;
}
.container { margin: 0 auto; width: 960px; background-color: #F4F4F8; padding: 15px; border-radius: 3px; box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
.main { margin-top: 2em;
}
.quote { font-family: "Times New Roman", Times, serif; font-weight: 500; margin-top: 0; margin-bottom: 10px;
}
.author { color: #777; font-size: 1em; font-weight: 400; font-family: Arial, Helvetica, sans-serif;
}
.btn { padding: 7px 15px; background-color: transparent; outline: none; border: 1px solid #1C2541; border-radius: 2px; cursor: pointer; -webkit-transition: 100ms; transition: 100ms; text-transform: uppercase; letter-spacing: 0.4px;
}
.btn:hover { background-color: #1C2541; color: #fafafa;
}
.btn:hover .fa-twitter { color: #fafafa;
}
.tweet-btn { text-decoration: none;
}
.tweet-btn .btn { border-color: #5BC0BE;
}
.tweet-btn .btn:hover { background-color: #5BC0BE;
}
.generate-btn { color: #333;
}
.fa-twitter { -webkit-transition: 100ms; transition: 100ms; color: #5BC0BE;
}
@media all and (max-width: 960px) { .container { width: auto; }
}
Random Quote Machine - Script Codes JS Codes
$(document).ready(function () { var apiUrl = "https://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&key=999999&lang=en&jsonp=?", tweetUrl = "https://twitter.com/intent/tweet?text=", $quote = $(".quote"), $author = $(".author"), $tweet = $(".tweet-btn"); function getQuote(res) { $quote.text(res.quoteText); $author.text("- " + (res.quoteAuthor || "Unknown")); $tweet.attr("href", tweetUrl + res.quoteText + " " + res.quoteAuthor); } function onclick() { $.getJSON(apiUrl, getQuote); } $(".generate-btn").on("click", onclick); $.getJSON(apiUrl, getQuote);
});
Developer | Mihkel |
Username | Krokodill |
Uploaded | December 08, 2022 |
Rating | 3 |
Size | 2,692 Kb |
Views | 6,072 |
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 |
Camper Leaderboard | 4,964 Kb |
Pomodoro Timer | 3,599 Kb |
Form validation with jQuery | 2,641 Kb |
Snake Game | 2,941 Kb |
React Markdown Preview | 2,675 Kb |
React Weather Broadcast | 6,708 Kb |
Mobile navigation bar | 2,549 Kb |
React.js Game of Life | 5,760 Kb |
React Recipe Box | 5,347 Kb |
Loading animation | 1,572 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 |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Bubble animation | Ftabor | 6,565 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
React Vote Component | Souporserious | 5,465 Kb |
After America | Jonathangarner | 2,686 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
Polygon Logo in CSS | Kai | 3,412 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!