Random Quote Machine

Developer
Thomas Vaeth
Size
5,186 Kb
Views
18,216
  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?

Random Quote Machine for FreeCodeCamp.. What is a random quote machine? How do you make a random quote machine? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.

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> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="inner cover"> <p class="cover-heading quote">A long time ago in a galaxy far, <br/>far away....</p> <p class="lead character"></p> <p class="lead"> <button class="btn btn-lg btn-default btn-force">Use the Force</button><a class="twitter"> <button class="btn btn-lg btn-default btn-tweet">Tweet</button></a> </p> </div> </div> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Random Quote Machine - Script Codes CSS Codes

a,
a:focus,
a:hover { text-decoration: none; color: #fff;
}
.btn,
.btn:hover,
.btn:focus,
.btn:active:focus,
.btn.active:focus { color: #333; background-color: #fff; border: 1px solid #fff; text-shadow: none; outline: none;
}
.quote { font-size: 36px; font-weight: 600;
}
html,
body { height: 100%; background-image: url("https://images.unsplash.com/photo-1421930535025-d2af27c14065?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=686e760fd53bcab95e052a3f3747c11d"); background-size: cover; background-color: #333;
}
body { color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.site-wrapper { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5); box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner { display: table-cell; vertical-align: top;
}
.cover-container { margin-right: auto; margin-left: auto;
}
.inner { padding: 30px;
}
.cover { padding: 0 20px;
}
.cover .btn-lg { padding: 10px 20px; font-weight: bold;
}
@media (min-width: 768px) { .site-wrapper-inner { vertical-align: middle; } .cover-container { width: 100%; }
}
@media (min-width: 992px) { .cover-container { width: 700px; }
}

Random Quote Machine - Script Codes JS Codes

(function() { var generateQuote, quotes, said, speaker; speaker = ''; said = ''; quotes = [ { quote: "It's a trap!", character: "Admiral Ackbar" }, { quote: "Because he's holding a thermal detonator!", character: "C-3PO" }, { quote: "Don't call me a mindless philosopher, you overweight glob of grease.", character: "C-3PO" }, { quote: "Don't get technical with me.", character: "C-3PO" }, { quote: "Let the Wookiee win.", character: "C-3PO" }, { quote: "Sir, the possibility of successfully navigating an asteroid field is approximately 3,720 to 1.", character: "C-3PO" }, { quote: "We're doomed.", character: "C-3PO" }, { quote: "All too easy.", character: "Darth Vader" }, { quote: "I find your lack of faith disturbing.", character: "Darth Vader" }, { quote: "No. I am your Father.", character: "Darth Vader" }, { quote: "Stay on target.", character: "Gold Five" }, { quote: "Great, kid. Don't get cocky.", character: "Han Solo" }, { quote: "Laugh it up, fuzzball.", character: "Han Solo" }, { quote: "Never tell me the odds.", character: "Han Solo" }, { quote: "Traveling through hyperspace ain't like dusting crops, farm boy.", character: "Han Solo" }, { quote: "If there's a bright center to the universe, you're on the planet that it's farthest from.", character: "Luke Skywalker" }, { quote: "I have a very bad feeling about this.", character: "Luke Skywalker" }, { quote: "There is good in him. I've felt it.", character: "Luke Skywalker" }, { quote: "This is Red Five. I'm going in!", character: "Luke Skywalker" }, { quote: "In my experience there is no such thing as luck.", character: "Obi-Wan Kenobi" }, { quote: "Remember... the Force will be with you, always.", character: "Obi-Wan Kenobi" }, { quote: "Your eyes can deceive you. Don't trust them.", character: "Obi-Wan Kenobi" }, { quote: "Aren't you a little short for a stormtrooper?", character: "Princess Leia" }, { quote: "Somebody has to save our skins.", character: "Princess Leia" }, { quote: "Why you stuck-up, half-witted, scruffy-looking nerf-herder!", character: "Princess Leia" }, { quote: "Your focus determines your reality.", character: "Qui-Gon Jinn" }, { quote: "Do. Or do not. There is no try.", character: "Yoda" }, { quote: "Once you start down the dark path, forever will it dominate your destiny.", character: "Yoda" } ]; generateQuote = function() { var randomQuote; randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; if (randomQuote.quote.length + randomQuote.character.length > 97) { return generateQuote(); } else { $('.quote').text(randomQuote.quote); $('.character').text(randomQuote.character); said = randomQuote.quote.split(' ').join('%20'); return speaker = randomQuote.character.split(' ').join('%20'); } }; $(document).ready(function() { $('.btn-tweet').hide(); return $('.btn-force').on('click', function() { generateQuote(); $('.twitter').attr('href', 'https://twitter.com/intent/tweet?text=' + speaker + '%20said,%20"' + said + '"%20%23StarWars%20https://goo.gl/MOxWg1').attr('target', '_blank'); return $('.btn-tweet').show(); }); });
}).call(this);
Random Quote Machine - Script Codes
Random Quote Machine - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 24, 2022
Rating 3
Size 5,186 Kb
Views 18,216
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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Instafetch.js Example
Button Offset Mixin
Button Split Mixin
Local Weather
Twitch.tv
Calculator
Wired Link Mixin
Button Draw on Hover Mixin
Pokemon React
Camper Leaderboard
Create amazing web 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!