Random Quote Generator
Welcome to the Random Quote Generator challenge! In this page, you can navigate between the different tasks of your challenge and submit your solution for evaluation.
Random Quote Generator
Create a random quote generator that displays a new quote when a button is clicked.
Instructions:
- Create a card layout to display the quote.
- Include a 'New Quote' button and a 'Copy' button.
- Display the quote text and author prominently.
Evaluating Requirement: You MUST use the following classes for evaluation:
- Heading element must be an H1 with text 'Random Quote Generator'
- Quote text element:
.random-quote - Author text element:
.quote-author - New Quote button:
.generate-btn - Copy button:
.copy-btn - Main wrapper:
.container(must use this class for pixel-perfect evaluation)
- Implement functionality to generate a random quote from the provided list on load and on click.
- Implement functionality to copy the quote to clipboard.
Upload Your Web Page Files (Upload a Folder)
Your Uploaded Page
Upload files to see your page here.
Original Task Page
Evaluation Results
Load a task and upload your files to see evaluation results.