Random Quote Machine

Developer
Sam Koshy
Size
4,626 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?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/yeVgBY.. What is a random quote machine? How do you make a random quote machine? This script and codes were developed by Sam Koshy 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> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200' rel='stylesheet' type='text/css'>
<div class="title"> <h1> Sampling of Reddit's Shower Quotes At Random </h1>
</div>
<div class="description"> <h2>I found these quotes on tickld in an article by Rudro Chakrabarti (link to article can be found below). I wish I could give further credit to the original Reddit authors as some of them are truly quite witty. Alas! the article didn't have that information. Click the "New Quote" button and enjoy! </h2>
</div>
<div style='text-align:center; margin-top:40px; margin-bottom:30px'><a href='#' class='btn'>New Quote </a></div>
<br>
<div id="quote"> <p>Oops! something is wrong. Click the button please. </p>
</div>
<div id="tweetBtn"><a class="twitter-share-button" data-text="This is what we want to change dynamically" data-count="none" data-size="large"> Tweet</a></div>
<div class="link"><a href="http://www.tickld.com/x/jaw/20-most-profound-things-people-thought-of-in-the-shower-9-is-epic?utm_source=tickld&utm_medium=facebook&utm_campaign=showerthoughts&ts_pid=2&utm_content=inf_10_381_2">Original Article</a></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://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://s3-us-west-1.amazonaws.com/pictureholder/white-linen-paper-texture.jpg"); background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(https://s3-us-west-1.amazonaws.com/pictureholder/Showering_on_Skylab_-_GPN-2000-001710.jpg) center fixed; //background-color: rgba(0, 0, 0, 0.8); background-size: cover;
}
.title { margin-top: 50px; font-family: 'Permanent Marker'; font-size: 180%; text-align: center;
}
.description { font-family: 'Yanone Kaffeesatz'; font-weight: 200; font-size: 120%; padding-left: 60px; padding-right: 60px; padding-bottom: 20px; padding-top: 5px;
}
.btn { border: 1px solid #ababab; background: #888a8a; background: -webkit-gradient(linear, left top, left bottom, from(#de1f55), to(#888a8a)); background: -webkit-linear-gradient(top, #de1f55, #888a8a); background: -moz-linear-gradient(top, #de1f55, #888a8a); background: -ms-linear-gradient(top, #de1f55, #888a8a); background: -o-linear-gradient(top, #de1f55, #888a8a); background-image: -ms-linear-gradient(top, #de1f55 0%, #888a8a 100%); padding: 13.5px 27px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(255, 255, 255, 0.4) 0 1px 0; text-shadow: #1a1d1f 0 1px 0; color: #000000; font-size: 22px; font-family: 'Permanent Marker'; //helvetica, serif; text-decoration: none; vertical-align: middle; margin: 30px;
}
.btn:hover { border: 1px solid #ababab; text-shadow: #05080a 0 1px 0; background: #888a8a; background: -webkit-gradient(linear, left top, left bottom, from(#de1f55), to(#888a8a)); background: -webkit-linear-gradient(top, #de1f55, #888a8a); background: -moz-linear-gradient(top, #de1f55, #888a8a); background: -ms-linear-gradient(top, #de1f55, #888a8a); background: -o-linear-gradient(top, #de1f55, #888a8a); background-image: -ms-linear-gradient(top, #de1f55 0%, #888a8a 100%); color: #fff;
}
#quote { font-family: 'Yanone Kaffeesatz'; margin-top: 40px; margin-left: 20px; margin-right: 20px; font-weight: 400; text-align: center; font-size: 300%; padding-top: 20px; padding-left: 60px; padding-right: 60px; padding-bottom: 20px; background: rgba(32, 79, 94, 0.5); border-radius: 10px;
}
.twitter-share-button { float: right; position: fixed; margin-top: -32px; margin-right: 23px;
}
.link { font-family: 'Yanone Kaffeesatz'; margin-left: 60px; font-size: 130%; position: fixed; bottom: 0;
}

Random Quote Machine - Script Codes JS Codes

var quoteArray = ["The object of golf is to play the least amount of golf.", "The sinking of the Titanic must have been a miracle to the lobsters in the kitchen.", "Instead of all the prequel and sequel movies coming out, they should start making “equels” - films shot in the same time period as the original film, but from an entirely different perspective.", "April Fools Day is the one day of the year that people critically evaluate news articles before accepting them as true.", "Websites should post their password requirements on their login pages so I can remember WTF I needed to do to my normal password to make it work on their site.", "Now that cellphones are becoming more and more waterproof, pretty soon it will be okay to push people into pools again.", "Maybe \"Are You Smarter Than a 5th Grader?\" isn't a show that displays how stupid grown adults can be, but rather, a show that depicts how much useless information we teach grade schoolers that won't be retained or applicable later in life.", " \"Go to bed, you'll feel better in the morning\" is the human version of \"Did you turn it off and turn it back on again?\" ", "In the future, imagine how many Go-Pros will be found in snow mountains containing the last moments of people's lives.", "We should have a holiday called Space Day, where lights are to be shut off for at least an hour at night to reduce light pollution, so we can see the galaxy.", "Your shadow is a confirmation that light has traveled nearly 93 million miles unobstructed, only to be deprived of reaching the ground in the final few feet thanks to you.", "Senior citizen discounts should just round dollar amounts down so we don't have to wait in line behind them while they dig for change.", "Since smart watches can now read your pulse, there should be a feature that erases your browser history if your heart stops beating.", "Waterboarding at Guantanamo Bay sounds super rad if you don’t know what either of those things are.", "The person who would proof read Hitler's speeches was literally a grammar Nazi."];
var min = 2, max = quoteArray.length, num;
num = Math.floor(Math.random() * (max - min) + min);
document.getElementById("quote").textContent = quoteArray[num];
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", quoteArray[num]);
$(document).ready(function() { $(".btn").click(function() { num = Math.floor(Math.random() * (max - min) + min); document.getElementById("quote").textContent = quoteArray[num]; $('#tweetBtn iframe').remove(); // Remove existing iframe // Generate new markup var tweetBtn = $('<a></a>') .addClass('twitter-share-button') .attr('data-text', quoteArray[num]) .attr('data-count','none') .attr('data-size', 'large'); $('#tweetBtn').append(tweetBtn); twttr.widgets.load(); //reload the twitter widget });
});
Random Quote Machine - Script Codes
Random Quote Machine - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 4,626 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!

Sam Koshy (codinger) Script Codes
Name
Wikipedia Viewer
Local Weather App
A Pen by Sam Koshy
Pomodoro Clock
Tic Tac Toe _ Alternate
Twitchtv Status
Tic Tac Toe
Personal Portfolio Webpage
Simon
Data Visualization - US GDP
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!