Quote gen

Developer
Maria Marica
Size
3,270 Kb
Views
12,144
  1. Quote gen Previews
  2. Quote gen HTML Codes
  3. Quote gen CSS Codes
  4. Quote gen JS Codes

How do I make an quote gen?

What is a quote gen? How do you make a quote gen? This script and codes were developed by Maria Marica on 26 October 2022, Wednesday.

Quote gen Previews
IQ Test

Quote gen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>quote gen</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>	<meta charset="utf-8">	<title>Random Quote Machine</title>	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">	<link href="https://fonts.googleapis.com/css?family=Acme|EB+Garamond|Philosopher" rel="stylesheet">	<link rel="stylesheet" type="text/css" href="css/gen.css">
</head>
<body>	<div class="container">	<div class="row">	<div class="col-md-12">	<h1>Random Quote Machine</h1>	<hr>	</div>	</div>	<div class="row">	<div class="col-md-8 col-md-offset-2">	<div class="quote-box">	<h4 id="quote"></h4>	<p id="author"></p>	</div>	<ul class="list-inline">	<li><a href="#" class="btn btn-default btn-sm tweet"><i class="fa fa-twitter"></i>Tweet!</a></li>	<li><a href="#" class="btn btn-default btn-sm genquote">New Quote</a></li>	</ul>	</div>	</div>	</div>	<footer>	<p>by Maria Marica</p>	</footer>	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">	</script>	<script	src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"	integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="	crossorigin="anonymous"></script>	<script type="text/javascript" src="js/gen.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Quote gen - Script Codes CSS Codes

body {	background-image: url("../images/pentagon.png");	background-repeat: repeat;
}
body, h1, h4, p {	font-family: 'Philosopher', 'Helvetica', 'Arial', sans-serif;	color: white;
}
p{	font-style: italic;
}
.container{	text-align: center;	margin: 6em auto;	padding-top: 2em;	padding-bottom: 2em;	width: 70%;	text-shadow: 0px 3px 2px rgba(88, 89, 91,0.3), 0px 6px 10px rgba(88, 89, 91,0.1), 0px 16px 20px rgba(88, 89, 91,0.3); -webkit-box-shadow: -7px 10px 44px 0px rgba(88, 89, 91,0.36);	-moz-box-shadow: -7px 10px 44px 0px rgba(88, 89, 91,0.36);	box-shadow: -7px 10px 44px 0px rgba(88, 89, 91,0.36);
}
hr{	width: 95%;	border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.quote-box{	border-radius: 15px;	padding: 10px;	margin-bottom: 20px;	height: 10em;
}
h4:before{	font-family: FontAwesome;	content:"\f10d";	display: inline-block; padding-right: 7px; font-size: 23px;
}
footer p{	text-align:center;	color: #e3e5e8;
}
.btn {	border: none;	text-shadow: none;	color: #58595b;	-webkit-box-shadow: -7px 10px 44px 0px rgba(88, 89, 91,0.36);	-moz-box-shadow: -7px 10px 44px 0px rgba(88, 89, 91,0.36);	box-shadow: -7px 10px 44px 0px rgba(88, 89, 91,0.36);
}
i.fa-twitter{	color: #4099FF;
}
#author{	float: right;
}

Quote gen - Script Codes JS Codes

$(document).ready(function(){	var quote;	var author;	function newQuote(){	$.ajax({	url: "https://api.forismatic.com/api/1.0/",	jsonp: 'jsonp',	dataType: 'jsonp',	data: {	method: 'getQuote',	lang: 'en',	format: 'jsonp',	},	success: function(resp){	console.log(resp);	quote = resp.quoteText;	author = resp.quoteAuthor;	$("#quote").animate({ opacity: 0 }, 500, function() { $(this).animate({ opacity: 1 }, 500); $(this).text(quote); });	if(author){	$('#author').animate({	opacity:0	}, 500,	function(){	$(this).animate({	opacity:1	}, 500);	$(this).text("- "+author);	});	}else{	$("#author").animate({	opacity:0	}, 500,	function(){	$(this).animate({	opacity:1	}, 500);	$(this).text("-unknown");	});	}	}	});	}	newQuote();	var colors= ["#009688", "#EB684D", "#247B7B", "#0D5C63", "#BC412B", "#fd8f45","#D94949", "#226666", "#19372D", "#63a36b", "#D1603D"];	$(".container").css("background-color", colors[Math.floor(Math.random()*colors.length)]);	$(".genquote").on("click", function(event){	event.preventDefault();	newQuote();	$(".container").animate({backgroundColor: colors[Math.floor(Math.random()*colors.length)]}, 500);	});	$(".tweet").on("click", function(event){	event.preventDefault();	window.open("https://twitter.com/intent/tweet?text="+ encodeURIComponent(quote+" -- "+author));	});
});
Quote gen - Script Codes
Quote gen - Script Codes
Home Page Home
Developer Maria Marica
Username mariamarica
Uploaded October 26, 2022
Rating 3
Size 3,270 Kb
Views 12,144
Do you need developer help for Quote gen?

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!

Maria Marica (mariamarica) Script Codes
Name
Tribute page
Off Canvas
Dropdown navbR
To-do list
Ppage
A Pen by Maria Marica
Animation
Simon Game
Calculator
Mostly Fluid
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!