Quote Generator App using NextJS
In this article, we will build an quote generator using NextJS. The user will be given a button that, when clicked, will retrieve a random quote from the API and display it on the screen. By clicking the button again, users can generate a large number of advices.
Technologies Used/Prerequisites
- Introduction to Next
- Next Component
- React Hooks
- NPM or NPX
Approach / Functionalities:
The provided code defines a React component known as App. This component imports necessary dependencies, such as useState and useEffect from the ‘react‘ library, as well as styles from ‘Home.module.css‘. Inside the component, the useState hook is utilized to manage state variables for quote text, author information, and a indicating copied status. Additionally, there is a function called generateQuote which fetches a random quote asynchronously from an API and updates the state accordingly. To ensure this behavior occurs upon initial rendering, the useEffect hook triggers the generateQuote function. Lastly, there is another function named copyToClipboard that creates a temporary textarea and facilitates copying of the quote to the clipboard while managing its copied status.
Steps to create the NextJS Application:
Step 1: Create a new Next.js project using the following command
npx create-next-app QuoteGenerator
Step 2: Change to the project directory:
cd QuoteGenerator
Project Structure:
package.json
{
"name": "quote-generator",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
Example: In this example, we will see the Quote Generator App using Next.js
Javascript
// index.js import { useState, useEffect } from 'react' ; import styles from '../styles/Home.module.css' ; const App = () => { const [quote, setQuote] = useState( '' ); const [author, setAuthor] = useState( '' ); const [copied, setCopied] = useState( false ); const generateQuote = async () => { try { const response = await fetch( 'https://type.fit/api/quotes' ); const quoteList = await response.json(); const randomIdx = Math.floor( Math.random() * quoteList.length); const quoteText = quoteList[randomIdx].text; const auth = quoteList[randomIdx].author || 'Anonymous' ; setQuote(quoteText); setAuthor( '~ ' + auth); } catch (error) { console.error( 'Error fetching quote:' , error); } }; useEffect(() => { generateQuote(); }, []); const copyToClipboard = () => { const textArea = document.createElement( 'textarea' ); textArea.value = quote; document.body.appendChild(textArea); textArea.select(); document.execCommand( 'copy' ); document.body.removeChild(textArea); setCopied( true ); setTimeout(() => setCopied( false ), 2000); }; return ( <div className={styles.container}> <div className={styles.boxSize}> <h1 className={styles.QuoteText}>{quote}</h1> <p className={styles.author} id= "author" > {author} </p> <hr /> <div className={styles.QuoteBtn}> <button className={styles.copyButton} onClick={copyToClipboard} disabled={copied} > {copied ? 'Copied!' : 'Copy' } </button> <button className={styles.GenerateQuote_next} onClick={generateQuote}> Next quote </button> </div> </div> </div> ); }; export default App; |
CSS
/* Home.module.css */ .boxSize { margin : 40px auto ; padding : 20px ; border-radius: 10px ; width : 800px ; display : flex; flex- direction : column; align-items: center ; box-shadow: 0 4px 10px 0px grey; background-color : rgba( 255 , 255 , 255 , 0.9 ); } .QuoteText { text-align : center ; font-size : 28px ; font-weight : bold ; margin-bottom : 20px ; color : #333 ; } .author { text-align : right ; font-size : 20px ; font-style : italic ; font-family : cursive ; color : #666 ; } .QuoteBtn { margin-top : 20px ; display : flex; justify- content : space-between; align-items: center ; width : 100% ; } .GenerateQuote_next { font-size : 18px ; border : none ; border-radius: 5px ; cursor : pointer ; padding : 12px 20px ; font-weight : bold ; color : white ; background-color : #2c5e1a ; transition: background-color 0.3 s; box-shadow: 0px 0px 10px 0px grey; } .GenerateQuote_next:hover { background-color : #1d3e12 ; } .copyButton { font-size : 18px ; border : none ; border-radius: 5px ; cursor : pointer ; padding : 12px 20px ; font-weight : bold ; color : white ; background-color : #007acc ; transition: background-color 0.3 s; box-shadow: 0px 0px 10px 0px grey; } .copyButton:hover { background-color : #005aaf ; } .copyButton:disabled { background-color : #ccc ; cursor : not-allowed; } |
Step 3: To run the next.js application use the following command and then go to this URL http://localhost:3000
npm run dev
Output: