Random Movie Quote Generator
How do I make an random movie quote generator?
Movie quote generator as part of free code camp. Click to display a random quote. Tweet current quote.. What is a random movie quote generator? How do you make a random movie quote generator? This script and codes were developed by Adam on 28 November 2022, Monday.
Random Movie Quote Generator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Movie Quote Generator</title> <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid text-center"> <header> <h1>Movie Quoter</h1> </header> <div class="row"> <div> <div id="message" class="quote"></div> </div> <div> <div id="title" class="film"></div> </div> </div> <button id="getMessage" class="btn btn-prop">Get Quote</button> <a href="https://twitter.com/share" class="btn btn-primary" id="tweet">Tweet</a> <footer>Quotes selected from AFI "Top 100 Quotes"</footer>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Random Movie Quote Generator - Script Codes CSS Codes
html { font-size: 20px;
}
@media (max-width: 600px) { html { font-size: 16px; }
}
@media (max-width: 800px) { html { font-size: 18px; }
}
body { background-color: #111111; background-image: url(http://img.wallpaperfolder.com/f/77D2AAB0B970/filming-simple-graphics-3d-fine.jpg); background-size: 1800px 600px; font-family: 'righteous', sans-serif; text-align: center;
}
header { margin: 10px -15px;
}
header h1 { color: #FF6611; font-size: 4rem; background-color: black;
}
.row > div { display: flex; justify-content: center; align-items: center;
}
.quote, .film { width: 50%; padding: 20px; background-color: white;
}
@media (max-width: 800px) { .quote, .film { width: 80%; padding: 10px; }
}
.quote { border-radius: 10px 10px 0 0; height: 120px; font-size: 1.5rem; margin: 40px 10px 0;
}
.film { height: 50px; font-size: 0.9rem; border-radius: 0 0 10px 10px; margin: -2px 0 20px; text-align: right;
}
button { background-color: #FF6611;
}
footer { color: white; margin-top: 10px;
}
Random Movie Quote Generator - Script Codes JS Codes
/*Simple Movie quoter app with tweet quote function for Free Code Camp* Using Bootstrap and Jquery*/
$(document).ready(function() { //Array with selected quotes and films var quoteArray = [{ quote: "Frankly, my dear, I don't give a damn.", film: "Gone With the Wind" }, { quote: "I'm going to make him an offer he can't refuse.", film: "The Godfather" }, { quote: "May the Force be with you.", film: "Star Wars" }, { quote: "You talking to me?", film: "Taxi Driver" }, { quote: "You're gonna need a bigger boat.", film: "Jaws" }, { quote: "There's no place like home", film: "The Wizard of Oz" }, { quote: "Show me the money!", film: "Jerry Maguire" }, { quote: "I'm walking here! I'm walking here!", film: "Midnight Cowboy" }, { quote: "Houston, we have a problem.", film: "Apollo 13" }, { quote: "Well, nobody's perfect.", film: "Some Like It Hot" }, { quote: "Say “hello” to my little friend!", film: "Scarface" }, { quote: "Bond. James Bond.", film: "Dr. No" }, { quote: "You can't handle the truth!", film: " A Few Good Men" }, { quote: "I'll have what she's having.", film: "When Harry Met Sally" }, { quote: "I see dead people.", film: "The Sixth Sense" }, { quote: "Keep your friends close, but your enemies closer.", film: "The Godfather II" }, { quote: "Here's Johnny!", film: "The Shining" }, { quote: "Hasta la vista, baby.", film: "Terminator 2: Judgment Day" }]; //declare variables var randomMovieQuote = ""; var randomFilmName = ""; //tweet current quote and film function tweet() { window.open("https://twitter.com/intent/tweet?text= " + randomMovieQuote + " - " + randomFilmName); } /*function to obtain a random quote and display in html*/ function randomQuote() { random = Math.floor(Math.random() * quoteArray.length); randomMovieQuote = quoteArray[random].quote; randomFilmName = quoteArray[random].film; $("#message").html(randomMovieQuote); $("#title").html(randomFilmName); } //Event listeners $("#getMessage").on("click", randomQuote); $("#tweet").on("click", tweet); randomQuote();
});
Developer | Adam |
Username | rzencoder |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 3,861 Kb |
Views | 16,192 |
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!
Name | Size |
React Betting App | 6,005 Kb |
Countdown Anagram Game | 7,625 Kb |
The Crystal Maze | 16,117 Kb |
Playable Piano Keyboard with Demos | 10,019 Kb |
Calculator | 4,572 Kb |
CSS World Flags | 8,782 Kb |
Wikipedia Viewer | 3,276 Kb |
Scrolling Effects Practice | 6,441 Kb |
React Leaderboard | 4,333 Kb |
HTML Canvas Paint App | 3,477 Kb |
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!
Name | Username | Size |
Midterm dry run | Jds317 | 1,649 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
STAR WARS LIGHTSABER | Francoiscoron | 4,420 Kb |
CLE_Old_March | Saritaleroux | 6,234 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!