Quote Machine

Developer
Yas
Size
3,625 Kb
Views
6,072
  1. Quote Machine Previews
  2. Quote Machine HTML Codes
  3. Quote Machine CSS Codes
  4. Quote Machine JS Codes

How do I make an quote machine?

What is a quote machine? How do you make a quote machine? This script and codes were developed by Yas on 05 January 2023, Thursday.

Quote Machine Previews
IQ Test

Quote Machine - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <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">
</head>
<body> <html> <title>Quote Machine</title> <body> <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> <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> </div> </div> </div> </div> </body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quote Machine - Script Codes 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; outline:none;
}
#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 - Script Codes 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(); $(currentQuote).show(); $(currentAuthor).show(); 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) { $(this).closest('.container').find(currentQuote).hide(); $(this).closest('.container').find(currentAuthor).hide(); 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(); ev.preventDefault(); // Remove existing iframe $('#tweetBtn iframe').remove(); // Generate new markup var tweetBtn = $('<a></a>') .addClass('twitter-share-button') .attr('href', 'https://twitter.com/share') .attr('data-url', 'https://codepen.io/Yas46/pen/VKgbdX') .attr('data-size', "large") .attr('data-text', toUrl); $('#tweetBtn').append(tweetBtn); twttr.widgets.load(); } else { num = getRandomNum(MIN_QUOTE_NUM, MAX_QUOTE_NUM); alert(Math.round(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) { t._e.push(f); }; return t;
}(document, "script", "twitter-wjs"));
Quote Machine - Script Codes
Quote Machine - Script Codes
Home Page Home
Developer Yas
Username Yas46
Uploaded January 05, 2023
Rating 3
Size 3,625 Kb
Views 6,072
Do you need developer help for 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!

Yas (Yas46) Script Codes
Name
Tic-tac-toe
Weather
Browser Calculator
TicTacToe
Wikipedia Search
Tic-tac-toe React
Pomodoro Clock
Twitch Streamers
A Pen by Yas
Create amazing marketing copy 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!