Exercise - Build a Random Quote Machine

Developer
Roksana
Size
4,604 Kb
Views
18,216
  1. Exercise - Build a Random Quote Machine Previews
  2. Exercise - Build a Random Quote Machine HTML Codes
  3. Exercise - Build a Random Quote Machine CSS Codes
  4. Exercise - Build a Random Quote Machine JS Codes

How do I make an exercise - build a random quote machine?

What is a exercise - build a random quote machine? How do you make a exercise - build a random quote machine? This script and codes were developed by Roksana on 22 November 2022, Tuesday.

Exercise - Build a Random Quote Machine Previews
IQ Test

Exercise - Build a Random Quote Machine - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Exercise - Build a Random Quote Machine</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE HTML>
<html lang="en">
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Exercise - Build a Random Quote Machine</title> <link rel="stylesheet" href="main.css" type="text/css" /> <script src="https://use.fontawesome.com/f9a688749b.js"></script> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body> <header class="header"> <h1>Random Quotes Rewritten</h1> </header> <div class="quote-box"> <div class="quote-text"> <i class="fa fa-quote-left"></i> <p class="quote-text-paragraph"></p> </div> <div class="quote-author"></div> <button class="social" title="Tweet this quote!"> <a href="https://twitter.com/intent/tweet" target="_blank"> <i class="fa fa-twitter"></i> Tweet </a> </button> <button class="new-quote">New quote</button> <div style="clear:both"></div> </div> <footer> <p>by <a href="#">Roksana</a></p> </footer> <script src="main.js"></script>
</body> <script src="js/index.js"></script>
</body>
</html>

Exercise - Build a Random Quote Machine - Script Codes CSS Codes

html { font-size: 62.5%; margin: 0; padding: 0;
}
body { margin: 0; padding: 0; font-family: 'Raleway', sans-serif; font-size: 2.5rem; color: #FFFFFF; background-color: #00CCCC;
}
.header { width: 100%; text-align: center;
}
.quote-box { width: 40%; padding: 50px; margin: 0; margin: auto; text-align: center; background-color: #FFFFFF; color: #00CCCC; border-radius: 5px; font-size: 2.8rem;
}
.quote-box i, .quote-box p { display: inline;
}
.quote-text { padding: 20px 0px;
}
.quote-author { text-align: right; font-size: 1.8rem; padding: 10px 0px 50px 0px; font-style: italic;
}
button { background-color: #00CCCC; color: #FFFFFF; padding: 0; border: none; border-radius: 4px; font-size: 1.8rem;
}
button:hover { opacity: 0.8;
}
.social { height: 4.5rem; text-align: center; padding: 0px 15px; float: left; margin-right: 5px;
}
.social a { display: block; color: #FFFFFF; padding: 0; height: 4.5rem; padding: 0px 25px; text-decoration: none; margin-top: 10px;
}
.new-quote { height: 4.5rem; text-align: center; padding: 0px 25px; float: right; cursor: pointer;
}
footer { margin: auto; text-align: center; color: #FFFFFF; font-size: 1.8rem; clear: both;
}
footer a { text-decoration: none; color: #FFFFFF;
}

Exercise - Build a Random Quote Machine - Script Codes JS Codes

var quotes = [ { quote: "Don't cry because it's over, smile because it happened.", author: "Dr. Seuss"}, { quote: "I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.", author: "Marilyn Monroe"}, { quote: "Be yourself, everyone else is already taken.", author: "Oscar Wilde"}, { quote: "Two things are infinite: the universe and human stupidity, and I'm not sure about the universe.", author: "Albert Einstein"}, { quote: "Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.", author: "Bernard M. Baruch"}, { quote: "You've gotta dance like there's nobody watching, love like you'll never be hurt, sing like there's nobody listening, and live like it's heaven on earth.", author: "William W. Purkey"}, { quote: "So many books, so little time.", author: "Frank Zappa"}, { quote: "A room without books is like a body without a soul.", author: "Marcus Tullius Cicero"}, { quote: "You know you're in love when you can't fall asleep because reality is finally better than your dreams.", author: "Dr. Seuss"}, { quote: "You only live once, but if you do it right, once is enough.", author: "Mae West"}, { quote: "Be the change that you wish to see in the world.", author: "Mahatma Gandhi"}, { quote: "In three words I can sum up everything I've learned about life: it goes on.", author: "Robert Frost"}, { quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling"}, { quote: "Friendship ... is born at the moment when one man says to another 'What! You too? I thought that no one but myself'", author: "C.S. Lewis"}, { quote: "Don’t walk in front of me… I may not follow don’t walk behind me… I may not lead, walk beside me… just be my friend", author: "Albert Camus"}, { quote: "No one can make you feel inferior without your consent.", author: "Eleanor Roosevelt"}, { quote: "If you tell the truth, you don't have to remember anything.", author: "Mark Twain"}, { quote: "A friend is someone who knows all about you and still loves you.", author: "Elbert Hubbard"}, { quote: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.", author: "Maya Angelou"}, { quote: "Always forgive your enemies, nothing annoys them so much.", author: "Oscar Wilde"}, { quote: "Live as if you were to die tomorrow. Learn as if you were to live forever.", author: "Mahatma Gandhi"}, { quote: "To live is the rarest thing in the world. Most people exist, that is all.", author: "Oscar Wilde"}, { quote: "Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.", author: "Martin Luther King Jr."}, { quote: "I am so clever that sometimes I don't understand a single word of what I am saying.", author: "Oscar Wilde"}, { quote: "Without music, life would be a mistake.", author: "Friedrich Nietzsche"}, { quote: "To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.", author: "Ralph Waldo Emerson"}, { quote: "Here's to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They're not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can't do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.", author: "Rob Siltanen"}, { quote: "Insanity is doing the same thing, over and over again, but expecting different results.", author: "Narcotics Anonymous"}, { quote: "I believe that everything happens for a reason. People change so that you can learn to let go, things go wrong so that you appreciate them when they're right, you believe lies so you eventually learn to trust no one but yourself, and sometimes good things fall apart so better things can fall together.", author: "Marilyn Monroe"}, { quote: "We accept the love we think we deserve.", author: "Stephen Chbosky"}
];
var nextQuote;
var currentQuote;
function newQuote() { do { var randomized = Math.floor(Math.random() * quotes.length); } while (currentQuote === randomized) nextQuote = quotes[randomized]; //console.log(nextQuote); currentQuote = randomized; $(".quote-text-paragraph").html(nextQuote.quote); $(".quote-author").html("-- " + nextQuote.author);
}
function tweet() { var tweetQuote = quotes[currentQuote].quote; if (tweetQuote.length > 100) { tweetQuote = tweetQuote.substr(0, 100).match(/(^.+)\s/)[1] + "..."; } window.open("https://twitter.com/intent/tweet?text=" + encodeURI('"' + tweetQuote + '" -- ') + encodeURI(quotes[currentQuote].author));
}
$(document).ready(function() { newQuote(); $(".new-quote").click(newQuote); $(".social").click(tweet);
});
Exercise - Build a Random Quote Machine - Script Codes
Exercise - Build a Random Quote Machine - Script Codes
Home Page Home
Developer Roksana
Username roksanaop
Uploaded November 22, 2022
Rating 3
Size 4,604 Kb
Views 18,216
Do you need developer help for Exercise - Build a 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!

Roksana (roksanaop) Script Codes
Name
Weather App
Build a Tic Tac Toe Game
Image Processing
Exercise - Build a Tribute Page
Use the Twitchtv JSON API
Built a Tribute Page
Build a JavaScript Calculator
Build a Wikipedia Viewer - FCC
Build a Pomodoro Clock
Build a Simon Game
Create amazing sales emails 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!