Parables · April 21, 2020 16:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>

 <body>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

        * {
            margin: 0;
            padding: 0;
            list-style: none;
            vertical-align: baseline;
        }

        div {
            position: relative;
            z-index: 2;
        }

        body {
            background-color: #333;
            color: #333;
            font-family: "Raleway", sans-serif;
            font-weight: 400;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .footer {
            width: 450px;
            text-align: center;
            display: block;
            margin: 15px auto 30px auto;
            font-size: 0.8em;
            color: #fff;
        }


        #quote-box {
            border-radius: 3px;
            position: relative;
            width: 450px;
            padding: 40px 50px;
            display: table;
            background-color: #fff;
        }

        #quote-box .quote-text {
            text-align: center;
            width: 450px;
            height: auto;
            clear: both;
            font-weight: 500;
            font-size: 1.75em;
        }

        #quote-box .quote-text i {
            font-size: 1.0em;
            margin-right: 0.4em;
        }

        #quote-box .quote-author {
            width: 450px;
            height: auto;
            clear: both;
            padding-top: 20px;
            font-size: 1em;
            text-align: right;
        }

        #quote-box .buttons {
            width: 450px;
            margin: auto;
            display: block;
        }

        #quote-box .buttons .button {
            height: 38px;
            border: none;
            border-radius: 3px;
            color: #fff;
            background-color: #333;
            outline: none;
            font-size: 0.85em;
            padding: 8px 18px 6px 18px;
            margin-top: 30px;
            opacity: 1;
            cursor: pointer;
        }

        #quote-box .buttons .button:hover {
            opacity: 0.9;
        }

        #quote-box .buttons .button#new-quote {
            float: right;
        }
    </style>

    <div id="wrapper">
        <div id="quote-box">
            <div class="quote-text">
                <i class="fa fa-quote-left"> </i><span id="text"></span>
            </div>
            <div class="quote-author">
                - <span id="author"></span>
            </div>
            <div class="buttons">

                <button class="button" id="new-quote">New quote</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.0.js"
        integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
        integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    <script>
        let quotes = [
            {
                quote: "It is better to be defeated standing for a high principle than to run by committing subterfuge.",
                author: "Stephan Grover Cleveland"
            },
            { quote: "No race can prosper till it learns that there is as much dignity in tilling a field as in writing a poem.", author: "Booker T.Washington" },
            { quote: "  I cannot win anything until I am willing to lose everything.", author: "Kennedy Schultz" },
            { quote: "The invariable mark of wisdom is to see the miraculous in the common.", author: "Ralph Waldo Emerson" },
            { quote: " The things I want to know are in books; my best friend is the man who will get me a book I ain't read.", author: "Abraham Lincoln" },
            { quote: " Most lies succeed because no one goes through the work to figure out how to catch them.", author: "Paul Ekman" },
            { quote: " Waste neither time nor money, but make the best use of both.", author: "Benjamin Franklin" },
            { quote: " Nothing is more powerful than an individual acting out of his conscience, thus helping to bring the collective conscience to life.", author: "Norman Cousins" },
            { quote: "To re - create strength, rest.To re - create mind, repose.To re - create cheerfulness, hope in God, or change the object of attention to one more elevated and worthy of thought.", author: "G.Simmons" },
            { quote: "It must be this rhapsody or none, The rhapsody of things as they are.", author: "Wallace Stevens" }

        ]

        var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];


        function getRandomQuote() {
            return quotes[Math.floor(Math.random() * quotes.length)];
        }

        function getQuote() {

            let randomQuote = getRandomQuote();

            currentQuote = randomQuote.quote;
            currentAuthor = randomQuote.author;


            $(".quote-text").animate(
                { opacity: 0 },
                500,
                function () {
                    $(this).animate({ opacity: 1 }, 500);
                    $("#text").text(randomQuote.quote);
                }
            );

            $(".quote-author").animate(
                { opacity: 0 },
                500,
                function () {
                    $(this).animate({ opacity: 1 }, 500);
                    $("#author").html(randomQuote.author);
                }
            );

            var color = Math.floor(Math.random() * colors.length);
            $("html body").animate(
                {
                    backgroundColor: colors[color],
                    color: colors[color]
                },
                1000
            );
            $(".button").animate(
                {
                    backgroundColor: colors[color]
                },
                1000
            );
        }

        $(document).ready(function () {
            getQuote();

            $("#new-quote").on("click", getQuote);


        });
    </script>

 </body>


 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<style>
	@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

	* {
	margin: 0;
	padding: 0;
	list-style: none;
	vertical-align: baseline;
	}

	div {
	position: relative;
	z-index: 2;
	}

	body {
	background-color: #333;
	color: #333;
	font-family: "Raleway", sans-serif;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	}

	.footer {
	width: 450px;
	text-align: center;
	display: block;
	margin: 15px auto 30px auto;
	font-size: 0.8em;
	color: #fff;
	}


	#quote-box {
	border-radius: 3px;
	position: relative;
	width: 450px;
	padding: 40px 50px;
	display: table;
	background-color: #fff;
	}

	#quote-box .quote-text {
	text-align: center;
	width: 450px;
	height: auto;
	clear: both;
	font-weight: 500;
	font-size: 1.75em;
	}

	#quote-box .quote-text i {
	font-size: 1.0em;
	margin-right: 0.4em;
	}

	#quote-box .quote-author {
	width: 450px;
	height: auto;
	clear: both;
	padding-top: 20px;
	font-size: 1em;
	text-align: right;
	}

	#quote-box .buttons {
	width: 450px;
	margin: auto;
	display: block;
	}

	#quote-box .buttons .button {
	height: 38px;
	border: none;
	border-radius: 3px;
	color: #fff;
	background-color: #333;
	outline: none;
	font-size: 0.85em;
	padding: 8px 18px 6px 18px;
	margin-top: 30px;
	opacity: 1;
	cursor: pointer;
	}

	#quote-box .buttons .button:hover {
	opacity: 0.9;
	}

	#quote-box .buttons .button#new-quote {
	float: right;
	}
	</style>

	<div id="wrapper">
	<div id="quote-box">
	<div class="quote-text">
	<i class="fa fa-quote-left"> </i><span id="text"></span>
	</div>
	<div class="quote-author">
	- <span id="author"></span>
	</div>
	<div class="buttons">

	<button class="button" id="new-quote">New quote</button>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.5.0.js"
	integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
	integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
	<script>
	let quotes = [
	{
	quote: "It is better to be defeated standing for a high principle than to run by committing subterfuge.",
	author: "Stephan Grover Cleveland"
	},
	{ quote: "No race can prosper till it learns that there is as much dignity in tilling a field as in writing a poem.", author: "Booker T.Washington" },
	{ quote: " I cannot win anything until I am willing to lose everything.", author: "Kennedy Schultz" },
	{ quote: "The invariable mark of wisdom is to see the miraculous in the common.", author: "Ralph Waldo Emerson" },
	{ quote: " The things I want to know are in books; my best friend is the man who will get me a book I ain't read.", author: "Abraham Lincoln" },
	{ quote: " Most lies succeed because no one goes through the work to figure out how to catch them.", author: "Paul Ekman" },
	{ quote: " Waste neither time nor money, but make the best use of both.", author: "Benjamin Franklin" },
	{ quote: " Nothing is more powerful than an individual acting out of his conscience, thus helping to bring the collective conscience to life.", author: "Norman Cousins" },
	{ quote: "To re - create strength, rest.To re - create mind, repose.To re - create cheerfulness, hope in God, or change the object of attention to one more elevated and worthy of thought.", author: "G.Simmons" },
	{ quote: "It must be this rhapsody or none, The rhapsody of things as they are.", author: "Wallace Stevens" }

	]

	var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];


	function getRandomQuote() {
	return quotes[Math.floor(Math.random() * quotes.length)];
	}

	function getQuote() {

	let randomQuote = getRandomQuote();

	currentQuote = randomQuote.quote;
	currentAuthor = randomQuote.author;


	$(".quote-text").animate(
	{ opacity: 0 },
	500,
	function () {
	$(this).animate({ opacity: 1 }, 500);
	$("#text").text(randomQuote.quote);
	}
	);

	$(".quote-author").animate(
	{ opacity: 0 },
	500,
	function () {
	$(this).animate({ opacity: 1 }, 500);
	$("#author").html(randomQuote.author);
	}
	);

	var color = Math.floor(Math.random() * colors.length);
	$("html body").animate(
	{
	backgroundColor: colors[color],
	color: colors[color]
	},
	1000
	);
	$(".button").animate(
	{
	backgroundColor: colors[color]
	},
	1000
	);
	}

	$(document).ready(function () {
	getQuote();

	$("#new-quote").on("click", getQuote);


	});
	</script>

	</body>


	</html>
No results found