Random Quote Machine Complete

Developer
Victor Hall
Size
4,076 Kb
Views
24,288
  1. Random Quote Machine Complete Previews
  2. Random Quote Machine Complete HTML Codes
  3. Random Quote Machine Complete CSS Codes
  4. Random Quote Machine Complete JS Codes

How do I make an random quote machine complete?

What is a random quote machine complete? How do you make a random quote machine complete? This script and codes were developed by Victor Hall on 13 September 2022, Tuesday.

Random Quote Machine Complete Previews
IQ Test

Random Quote Machine Complete - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Quote Machine Complete</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta charset="utf-8"> <title>Random Quote Machine</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">	<link rel="stylesheet" href="bootstrap-social-gh-pages/bootstrap-social.css" > <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body> <div class="position"> <blockquote> <p id="quote"></p> <small id="author"></small> <br> <div class="row"> <div class="col-xs-6" id="dynamic"> <a id="tweet" class="twitter-share-button" href="https://twitter.com/share" data-size="large" data-text=" " data-hashtags=" "></a> </div> <div class="col-xs-6"> <button id="newQuote" type="button" class="btn btn-twitter pull-right">New Quote</button> </div> </div> </blockquote> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Random Quote Machine Complete - Script Codes CSS Codes

.position { background-color: white; position: fixed; top: 25%; left: 50%; /* bring your own prefixes */ transform: translate(-50%, -50%); border-radius: 3px; } div > a#tweet { margin: 50px !important; } .btn{ padding: 4px 7px !important; border: white !important; background-color: #1b95e0 !important; color: white; }

Random Quote Machine Complete - Script Codes JS Codes

changeBackground();
initQuote();
$("#newQuote").click(function (e) { //http://denvycom.com/blog/twitter-button-with-dynamic-custom-data-text-message/ //http://tumblr.christophercamps.com/post/4072517874/dynamic-tweet-button-text-using-jquery //location.reload(true); $("#dynamic").empty();(".twitter-share-button"); changeBackground(); newQuote();
});
function changeBackground() { //Sets background color //Cycles through 3 different colors //on screen load var value = Math.floor((Math.random() * 3) + 0); switch (value) { case 0: $("body").css("background-color", "rgb(57,110,29)"); break; case 1: $("body").css("background-color", "rgb(51, 134, 148)"); break; case 2: $("body").css("background-color", "rgb(148, 70, 39)"); break; }
}
//Called everytime the user wants a new quote
function newQuote() { $.ajax({ // Tell jQuery we're expecting JSONP dataType: "jsonp", // The name of the callback parameter, as specified by the YQL service jsonp: "callback", url: "https://quotes.stormconsultancy.co.uk/random.json?callback=my_method", // Tell YQL what we want and that we want JSON data: { q: "select title,abstract,url from search.news where query=\"cat\"", format: "json" }, // Work with the response success: function (response) {//Beginning of success var quote = response.quote; //quote from author var author = response.author; //authors name //if the quote is greater than 140 characters it //shortens the string and adds dots at the end if (quote.length >= 140) { quote = quote.slice(0, 129).concat("..."); } //this sets the author and the quote to the //text retrieved from api document.getElementById("quote").innerHTML = quote; document.getElementById("author").innerHTML = author; newTweet(quote); }//End of success });
}
//creates new twitter button
function newTweet(quote){ var div = document.getElementById("dynamic");
var twitter = document.createElement('a');
twitter.setAttribute('href', 'https://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button');
twitter.setAttribute('data-text', quote);
twitter.setAttribute('data-hashtags', "quotes");
twitter.setAttribute('data-size', "large"); // codepen was autopopulating the url with a code pen url so //I set the url to an empyt string to get rid of it
twitter.setAttribute('data-url', ' ');
//creates the twitter button inside an existing div
div.appendChild(twitter); $.getScript('https://platform.twitter.com/widgets.js')
}
//Creates the initial tweet
function initQuote() { $.ajax({ // Tell jQuery we're expecting JSONP dataType: "jsonp", // The name of the callback parameter, as specified by the YQL service jsonp: "callback", url: "https://quotes.stormconsultancy.co.uk/random.json?callback=my_method", // Tell YQL what we want and that we want JSON data: { q: "select title,abstract,url from search.news where query=\"cat\"", format: "json" }, // Work with the response success: function (response) {//Beginning of success var quote = response.quote; //quote from author var author = response.author; //authors name //if the quote is greater than 140 characters it //shortens the string and adds dots at the end if (quote.length >= 140) { quote = quote.slice(0, 129).concat("..."); } //this sets the author and the quote to the //text retrieved from api document.getElementById("quote").innerHTML = quote; document.getElementById("author").innerHTML = author; //this sets the twitter tweet to the quote that is retrieved from //the api document.getElementById("tweet").setAttribute("data-text", quote); document.getElementById("tweet").setAttribute("data-hashtags", "quotes"); /*** Just using document.getElementById('tweet').setAttribute("data-text" , quote" ); Unfortunately, will not work. This is because the twitter script evaluates tag attributes on page load (and probably modifies the tag itself too) . From my experience the getElementById method returns a null value even when the correct id is provided. The reason is that $(document).ready() will execute after all the <script> tags in the document, including twitter’s . When twitter’s js file runs, it immediately replaces the a tag with an iframe, and then it’s too late to affect it with our jQuery. I had to somehow run twitter’s js file after my code. Thanks to jQuery the solution was easy! --solution provided by Christopher Camps!! */ $.getScript('https://platform.twitter.com/widgets.js'); //very important }//End of success });
}
Random Quote Machine Complete - Script Codes
Random Quote Machine Complete - Script Codes
Home Page Home
Developer Victor Hall
Username vhall_io
Uploaded September 13, 2022
Rating 3
Size 4,076 Kb
Views 24,288
Do you need developer help for Random Quote Machine Complete?

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!

Victor Hall (vhall_io) Script Codes
Name
FCC Test
Wikipedia Viewer
Black Leopard
Culinary Arts Institute
WhatIsInAName
Missing letters
Everything be true
Tribute Page
Weather
Font size
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!