screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Generate Random Quote</h3> <p>{{ quote }}</p> <button @click="generateQuote">Generate Quote</button> </div> <script type="module"> const app = Vue.createApp({ data() { return { quotes: [ { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" }, { text: "You miss 100% of the shots you don't take.", author: "Wayne Gretzky" }, { text: "I have not failed. I've just found 10,000 ways that won't work.", author: "Thomas Edison" }, { text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", author: "Winston S. Churchill" }, { text: "Believe you can and you're halfway there.", author: "Theodore Roosevelt" } ], quote: "" } }, methods: { generateQuote() { const randomIndex = Math.floor(Math.random() * this.quotes.length); const randomQuote = this.quotes[randomIndex]; this.quote = `"${randomQuote.text}" - ${randomQuote.author}`; } }, mounted() { this.generateQuote(); } }) app.mount('#app') </script> <style scoped> #app { text-align: center; margin: 20px; } p { font-size: 24px; line-height: 1.5; margin-bottom: 20px; } button { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin-top: 20px; cursor: pointer; border-radius: 4px; } </style> </body> </html>