This challenge is an excellent opportunity to gain practical experience in utilizing external APIs within your application. The task involves creating a straightforward application for generating random quotes, which will necessitate the use of an external API.
- Create a random quote app that matches the given design.
- Use HTML to create the basic structure.
- Add author name, quote, tag,.. according to the design.
- Use vanilla JavaScript to add interactivity.
- Users can see a random quote when they first visit the page.
- Users can see a random quote after they select the random button.
- Users can copy the quote to the clipboard.
- The page should be responsive on different screen sizes.
- Deploy the solution and submit Repository URL and Demo URL.
- Vite
- BEM
- zod
- fontsource fonts:
- tabler icons
- svgomg
- PaperQuotes API (Free Quota)
- quicktype
- Online Image Compressor and Aspect Ratio Calculator for screenshot
- Alert when quote copied to clipboard
- Error handling
- Fetch API
- Clipboard API
- Create a random quote app with HTML, CSS, and JavaScript.
- Handle errors or
Clipboard API
To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:
# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges
# install all required dependencies
cd dev-challenges
pnpm install --filter "@hdoc/dev-challenges" --filter random-quote...
# Run random-quote in dev-mode
cd vanilla/random-quote/
pnpm run dev --open