Random Quote Machine

Developer
Tyler Moeller
Size
5,843 Kb
Views
12,144
  1. Random Quote Machine Previews
  2. Random Quote Machine HTML Codes
  3. Random Quote Machine CSS Codes
  4. Random Quote Machine JS Codes

How do I make an random quote machine?

Developed by Tyler Moeller for the freeCodeCamp Zipline project: Zipline: Build a Random Quote Machine. http://www.freecodecamp.com/challenges/build-a-random-quote-machine. What is a random quote machine? How do you make a random quote machine? This script and codes were developed by Tyler Moeller on 06 November 2022, Sunday.

Random Quote Machine Previews
IQ Test

Random Quote Machine - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Quote Machine</title> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- **** *** *** *** *** **** * Copyright (C) 2016 Tyler Moeller. All rights reserved. * * All trademarks, product names, and logos on this site * * are the property of their respective owners. * **** *** *** *** *** ****
Assignment Details: - Developed for the freeCodeCamp zipline project: Zipline: Build a Random Quote Machine - Details: https://freecodecamp.com/challenges/zipline-build-a-random-quote-machine
Requirements for this assignment: - Build a random quote machine that emulates this: https://codepen.io/AdventureBear/full/vEoVMw. - Don't look at the source code of the project you are emulating - Users are able to click a button to get a new random quote - Bonus: Users are able to click a button to tweet the quote
Assignment Completed: - Responsive deisgn using JavaScript, jQuery, HTML5, with Materialize + FontAwesome CSS libraries. - Random quote given on page load - Button to get a new random quote - Button to tweet quote with transition effects and tooltips to help show it's a button - twitter js widget to present modal dialog instead of separate tab/page in browser - Quotes are filtered so they can all fit whithin 140-char tweet limit - Classes, ids, and icons named carefully to prevent adblock issues - Button to view the quote author on Google
-->
<main> <div class="container center"> <div class="row"> <h3 class="title">Random Quote Machine</h3> </div> <div class="row main-content center"> <div class="col s4 offset-s4"> <div class="preloader-wrapper big active spinner" id="spinner"> <div class="spinner-layer spinner-blue-only"> <div class="circle-clipper left"> <div class="circle"></div> </div> <div class="gap-patch"> <div class="circle"></div> </div> <div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> </div> <div class="col s8 offset-s2"> <div id="quote-text" class="flow-text"> <p id="quote"></p> <p><i id="author"></i></p> </div> <div id="quote-actions" class="row"> <div class="tooltipped col s3 offset-s3" data-position="bottom" data-tooltip="Search for this author!"> <a id="wikiLink" target="_blank" rel="noopener noreferrer"> <img class="authorSearch" src="https://developers.google.com/identity/images/g-logo.png"> </a> </div> <div class="tooltipped col s3" data-position="bottom" data-tooltip="Tweet this quote!"> <a id="tweetLink" target="_blank" rel="noopener noreferrer"> <img class="shareQuote" src="https://tylermoeller.github.io/random-quote-machine/img/logo-twit.png"> </a> </div> </div> </div> </div> <a class="new-quote-btn btn blue-grey lighten-5 black-text" onclick="getQuote()">Generate another quote!</a> </div>
</main>
<footer class="page-footer grey darken-4"> <div class="container center"> <div class="row grey-text"> <p class="footer-text">Developed for the freeCodeCamp Front-end Development Challenge: <a href="https://www.freecodecamp.com/challenges/build-a-random-quote-machine" target="_blank" rel="noopener noreferrer"> Build a Random Quote Machine</a>. </p> </div> <div class="footer-logos row"> <a href="https://twitter.com/Tyler_Moeller" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a> <a href="https://www.linkedin.com/in/tylermoeller" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a> <a href="https://github.com/TylerMoeller" target="_blank" rel="noopener noreferrer"><i class="fa fa-github"></i></a> <a href="https://freecodecamp.com/tylermoeller" target="_blank" rel="noopener noreferrer"><i class="fa fa-fire"></i></a> <a href="https://codepen.io/TylerMoeller/pens/public" target="_blank" rel="noopener noreferrer"><i class="fa fa-codepen"></i></a> <a href="https://tylermoeller.net" target="_blank" rel="noopener noreferrer"><i class="fa fa-wordpress"></i></a> </div> </div>
</footer>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script> <script src="js/index.js"></script>
</body>
</html>

Random Quote Machine - Script Codes CSS Codes

body { background-image: url(https://tylermoeller.github.io/random-quote-machine/img/wenge.jpg); color: white; display: flex; flex-direction: column; min-height: 100vh; font-family: 'Roboto', sans-serif;
}
.container { max-width: 768px; min-width: 270px;
}
.title { margin-top: 5%;
}
@media (max-width: 600px) { .title { margin-top: .5em; }
}
.main-content { font-size: 1.6em; min-height: 14em;
}
.spinner { margin: 2em auto;
}
.authorSearch,
.shareQuote { border-radius: 12.5%; font-size: .6em; height: 3em; margin-top: 1em;
}
.authorSearch { padding: .4em; background-color: white;
}
.authorSearch:hover,
.shareQuote:hover { opacity: .8; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.new-quote-btn, .new-quote-btn:hover { border: 1px solid #bdbdbd; box-shadow: 0 5px 0 #bdbdbd; font-weight: 500; margin-bottom: 5em; padding: 0 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.new-quote-btn:active,
.new-quote-btn:focus { border-style: none; box-shadow: 0 0 0 1px #bdbdbd inset, 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 1px 3px 1px rgba(0, 0, 0, .1); position: relative; top: 4px;
}
/* footer formatting */
main { flex: 1 0 auto;
}
.footer-text { font-size: 1em; margin: 0;
}
.footer-logos i { border: 1px solid #646464; border: 1px solid rgba(100, 100, 100, .3); border-radius: 25%; color: #646464; font-size: 1.1em; margin-right: .25em; padding: .4em;
}
.footer-logos i:hover { color: #eee;
}

Random Quote Machine - Script Codes JS Codes

'use strict';
function hideQuoteBox() { $('#quote-actions, #quote-text').hide(); $('#spinner').show();
}
function showQuoteBox() { $('#spinner').hide(); $('#quote-text, #quote-actions').show();
}
function quoteHandler(data) { var quoteText = $(data[0].content.trim()).text(), quoteAuthor = data[0].title.trim() || 'Anonymous', quoteMachineUrl = 'https://s.codepen.io/TylerMoeller/debug/WQGjvO', tweetText = quoteText + ' ' + quoteAuthor + ' ' + quoteMachineUrl, tweetUrl = 'https://\ttwitter.com/intent/tweet?text=' + encodeURIComponent(tweetText), // '\t' bypasses adblock wikiUrl = 'https://www.google.com/search?q=' + quoteAuthor; // Twitter has a 140 character limit + 23 characters allowed for the URL = 163. if (tweetText.length > 163) { getQuote(); return; } // Populate the HTML $('#quote').text(quoteText); $('#author').text('~' + quoteAuthor); $('#tweetLink').attr('href', tweetUrl); $('#wikiLink').attr('href', wikiUrl); // Initialize tooltips and add click handler for dismissing them on mobile $('.tooltipped').tooltip({ delay: 50 }).click(function () { return $('.tooltipped').blur(); }); // Show the quote! showQuoteBox();
}
function error(jqxhr, textStatus, error) { $('#quote').html('Error ' + jqxhr.status + ', ' + textStatus + ' ' + error + '. ' + 'Please try again later.'); $('#author').html('~ Random Quote Machine'); showQuoteBox(); $('#quote-actions').hide();
}
// Get a quote
function getQuote() { hideQuoteBox(); // Disable the quote button while getting the quote and throttle connection attempts to 1 quote per second $('.new-quote-btn').css('pointer-events', 'none'); setTimeout(function () { $.getJSON('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=' + Date.now()).done(quoteHandler).fail(error).always($('.new-quote-btn').css('pointer-events', 'auto')); }, 1000);
}
$(document).ready(getQuote);
Random Quote Machine - Script Codes
Random Quote Machine - Script Codes
Home Page Home
Developer Tyler Moeller
Username TylerMoeller
Uploaded November 06, 2022
Rating 3.5
Size 5,843 Kb
Views 12,144
Do you need developer help for Random Quote Machine?

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!

Tyler Moeller (TylerMoeller) Script Codes
Name
IslandJS - Bootstrap
Local Weather App v1.0
Material Design Weather Widget
Twitch JSON API Example
Pomodoro Timer
Boostrap Grid Examples
Basic Website - Materialize
NodeSchool Survey Example
JavaScript Calculator
Tylermoeller.github.io
Create amazing Facebook ads 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!