Quote Machine

What is a quote machine How do you make a quote machine? This script and codes were developed by Yas on 11 March 2022, Friday.

How do I make an quote machine?
  1. Quote Machine Previews
  2. Quote Machine HTML Codes
  3. Quote Machine CSS Codes
  4. Quote Machine JS Codes
Quote Machine Previews

Quote Machine HTML Codes

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
  <title>Quote Machine</title>
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Handlee'>

      <link rel="stylesheet" href="css/style.css">


  <title>Quote Machine</title>
    <div class="container">
        <div class="quote-box">
            <p class="quote-text" id="q1">Life is really simple, but we insist on making it complicated.</p>
            <p class="author" id="a1">- George Bernard Shaw</p>

            <p class="quote-text" id="q2">Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.</p>
            <p class="author" id="a2">- Buddha</p>

            <p class="quote-text" id="q3">Life isn't about finding yourself. Life is about creating yourself.</p>
            <p class="author" id="a3">- George Bernard Shaw</p>

            <p class="quote-text" id="q4">The most important thing is to enjoy your life - to be happy - it's all that matters.</p>
            <p class="author" id="a4">- Audrey Hepburn</p>

            <p class="quote-text" id="q5">I actually don't have a bad hairline.</p>
            <p class="author" id="a5">- Donald Trump</p>

            <p class="quote-text" id="q6">Keep your face to the sunshine and you cannot see a shadow.</p>
            <p class="author" id="a6">- Helen Keller</p>

            <p class="quote-text" id="q7">He not busy being born is busy dying.</p>
            <p class="author" id="a7">- Bob Dylan</p>

            <p class="quote-text" id="q8">The only source of knowledge is experience.</p>
            <p class="author" id="a8">- Albert Einstein</p>

            <p class="quote-text" id="q9">Procrastination is the art of keeping up with yesterday.</p>
            <p class="author" id="a9">- Don Marquis</p>

            <p class="quote-text" id="q10">Don't cry because it's over, smile because it happened.</p>
            <p class="author" id="a10">- Dr. Seuss</p>

            <p class="quote-text" id="q11">Be yourself; everyone else is already taken.</p>
            <p class="author" id="a11">- Oscar Wilde</p>

            <p class="quote-text" id="q12">Being deeply loved by someone gives you strength, while loving someone deeply gives you courage.</p>
            <p class="author" id="a12">― Lao Tzu</p>

        <div id="qButtons">

            <button class="more-btn">Give me another</button>

          <div id="tweetBtn">
            <a class="twitter-share-button" href="https://twitter.com/share" data-url="http://test.com" data-text="REPLACEME" data-size="large">Tweet</a>




  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

    <script  src="js/index.js"></script>


Quote Machine CSS Codes

.container {
  display: block;
  width: 500px;
  height: 225px;
  margin: auto auto;

.container .quote-box {
  display: block;
  width: 400px;
  height: 165px;
  margin-top: 70px;
  background-color: #e6f0ff;
  border-radius: 12px 50px;
  padding: 24px 50px;

.quote-text {
  display: block;
  color: #003366;
  font-size: 28px;
  font-family: 'Handlee', cursive;
  margin: 6px 0;

.author {
  display: block;
  font-family: 'Hind Guntur', sans-serif;
  color: #003366;
  font-size: 20px;
  text-align: right;
  margin-top: 20px;

#qButtons {
  display: inline-block;
  width: 100%;
  margin-top: 10px;

#qButtons button {
  width: 140px;
  height: 28px;
  margin-left: 10px;
  background-color: #4681b9;
  border: 0px;
  color: #fff;
  font-size: 14px;
  float: left;
  border-radius: 4px;
  float: right;

#qButtons button:hover {
  background-color: #2e6aa4;
.twitter-share-button {
  float: right;
  display: block;

#q1, #q2, #q3, #q4, #q5, #q6, #q7, #q8, #q9, #q10, #q11, #q12, #a1, #a2, #a3, #a4, #a5, #a6, #a7, #a8, #a9, #a10, #a11, #a12  {
  display: none;

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: .6rem;
  background-color: #efefef;
  text-align: center;
  font-family: 'Hind Guntur', sans-serif;
  font-size: 12px;

Quote Machine JS Codes

$(document).ready(function(e) {
  var num = 1;
  var MIN_QUOTE_NUM = 1;
  var MAX_QUOTE_NUM = 12;
  var prevNum = 1;
  var currentQuote = "#q1";
  var currentAuthor = "#a1";
  var toUrl = $(currentQuote).text() + " " + $(currentAuthor).text();
  function getRandomNum(a, b) {
     return Math.random() * (b - a) + a;
  $(".more-btn").on('click', function(ev) {
      num = getRandomNum(MIN_QUOTE_NUM, MAX_QUOTE_NUM);
    if(prevNum != num) {
        num = Math.round(num);
        $(this).closest('.container').find('#q' + num).show();
        $(this).closest('.container').find('#a' + num).show();
        currentQuote = '#q' + num;
        currentAuthor = '#a' + num;
        toUrl = $(this).closest('.container').find(currentQuote).text() + " " + $(this).closest('.container').find(currentAuthor).text();
        // Remove existing iframe
        $('#tweetBtn iframe').remove();
        // Generate new markup
        var tweetBtn = $('<a></a>')
            .attr('href', 'https://twitter.com/share')
            .attr('data-url', 'https://codepen.io/Yas46/pen/VKgbdX')
            .attr('data-size', "large")
            .attr('data-text', toUrl);
      } else {
        num = getRandomNum(MIN_QUOTE_NUM, MAX_QUOTE_NUM);
        prevNum = num;

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {

  return t;
}(document, "script", "twitter-wjs"));
Do you want hide your ip address?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.