Quote Machine

Developer
Omran Abazid
Size
3,091 Kb
Views
24,288
  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 Omran Abazid on 15 September 2022, 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" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="box" class="box"> <p id="text" class="text"> We must not cease from exploration and the end of all our exploring will be to arrive where we began and to know the place for the first time. </p> <p id="speaker" class="speaker">William Beck</p> <button id="generate" id="speaker" class="generate"> New Quote </button> <a target="_blank" href="" id="tweet">Tweet</a>
</div>
</body>
<footer> <p>Designed By Omran Abazid</p>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quote Machine - Script Codes CSS Codes

@charset "UTF-8";
html,
body { font-family: 'Raleway', sans-serif; background: #4d8eb4 no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.box { padding: 60px; width: 700px; height: 700px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0px 0px 17.01px 3.99px rgba(0, 0, 0, 0.31);
}
.box p.text { padding-left: 100px; font-size: 30px; font-family: 'Raleway'; position: relative; color: #545454; line-height: 1.3em;
}
p.speaker { padding-left: 100px; font-size: 20px; font-weight: 900; color: #4d8eb4; text-transform: uppercase;
}
p.speaker:before { content: "— ";
}
p.text:before { content: "\f10d"; font-family: 'Fontawesome'; font-size: 100px; color: #4d8eb4; position: absolute; left: -5px; top: -10px;
}
p.text span { display: block;
}
p.text:after { content: "\f10d"; font-family: 'Fontawesome'; font-size: 100px; margin-left: 10px; margin-top: 30px; color: #4d8eb4; float: right;
}
button.generate { position: absolute; bottom: 60px; right: 60px; display: block; min-width: 700px; border: none; background: #4d8eb4; color: white; height: 50px; font-size: 30px; font-weight: 900; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear; -webkit-font-smoothing: subpixel-antialiased;
}
button.generate:hover { background: #62b4e4;
}
button.generate:active { background: #3e7290;
}
a#tweet { position: absolute; bottom: 120px; text-decoration: none; text-align: center; right: 60px; display: block; min-width: 700px; border: none; background: #4d8eb4; color: white; height: 50px; font-size: 30px; font-weight: 900; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; transition: border .25s linear, color .25s linear, background-color .25s linear; -webkit-font-smoothing: subpixel-antialiased;
}
a#tweet:hover { background: #62b4e4;
}
a#tweet:active { background: #3e7290;
}
footer p { position: absolute; bottom: 1px; right: 20px; color: white;
}

Quote Machine - Script Codes JS Codes

var generator= (function(){	//variables	var prevIndex;	var arr=[	["It all began, I said, when I decided that some experts don't really know enough to make a pronouncement of doom on a human being. And I said I hoped they would be careful about what they said to others; they might be believed and that coud be the beginning of the end.","Norman Cousins, Anatomy of an Illness"	],	["Because it's there.","George Mallory on climbing mountains"	],	["One man asked another on the death of a mutual friend, 'How much did he leave?' His friend responded, 'He left it all.'","Proverb"	]	];	//cash the dom	var $box = $('#box');	var $text = $box.find("#text");	var $name = $box.find('#speaker');	var $button = $box.find("#generate");	var $tweet = $box.find("#tweet");	//bind events	$button.on('click', __render);	//render	__render();	function __render(){	var index=Math.floor((Math.random() * arr.length));	while(prevIndex==index){	index=Math.floor((Math.random() * arr.length));	}	$text.html(arr[index][0]);	$tweet.attr("href", "https://twitter.com/home/?status="+arr[index][0]+"— "+arr[index][1]);	$name.html(arr[index][1]);	prevIndex = index;	}
})();
Quote Machine - Script Codes
Quote Machine - Script Codes
Home Page Home
Developer Omran Abazid
Username OmranAbazid
Uploaded September 15, 2022
Rating 3
Size 3,091 Kb
Views 24,288
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!

Omran Abazid (OmranAbazid) Script Codes
Name
Bootstrap Portfolio Website
Bootstrap-jquery Address Book
Wikipedia Search using the API
Tic tac toe
Bootstrap page Header Template
A Pen by Omran Abazid
Weather App
Convert data into d3 format
FCC Campers News
Pomodora Timer
Create amazing video scripts 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!