The Inspirational Quotes Website is a web app constructed using React. It showcases quotes to inspire and uplift users. Users have the ability to explore a selection of quotes and even share their quotes on social media. There is an option for navigating back to the already read quotes and a share button for social profiles. The background theme changes with each quote.
Preview of Finla Output:
Preview of Final Output
Prerequisites / Technologies Used
Approach:
The idea is to display the quote on the homepage along with the name of quoter, It can be easily done with the help of a node package which will provide us, a large amount of quotes which we can show on our website.
- Showcasing a motivational quote on the page.
- Allowing users to click a button for a quote.
- Utilizing a minimalist user friendly and adaptable design.
Steps to create Project
Step 1: Create a new React JS project using the following command
npx create-react-app inspirationalquotes
Step 2: Change to the project directory
cd inspirationalquotes
Step 3: Install some npm packages required for this project using the following command:
npm install @divyanshu013/inspirational-quotes
Project Structure:
Project Structure
The updated dependencies in package.json will look like this:
"dependencies": {
"@divyanshu013/inspirational-quotes": "^1.0.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Write the following code in respective files
- These three files index.js, App.js and App.css will be in the src folder
Javascript
// FileName: App.js   import React, { useState, useEffect } from "react"; import { getRandom, getAll } from "@divyanshu013/inspirational-quotes"; import "./App.css";   export default function App() {     const [quotes, setQuotes] = useState([]);     const [currentIndex, setCurrentIndex] = useState(0);       useEffect(() => {         // Fetch all quotes and set them in the state         const quotesData = getAll();         setQuotes(quotesData);     }, []);       const handleNextClick = () => {         setCurrentIndex((prevIndex) => (prevIndex + 1) % quotes.length);     };       const handlePreviousClick = () => {         setCurrentIndex((prevIndex) =>             prevIndex === 0 ? quotes.length - 1 : prevIndex - 1         );     };       const currentQuote = quotes.length > 0 ? quotes[currentIndex] : null;       const backgroundColors = ["#8cc084", "#b7ebc3", "#ffb37e", "#7fa8d7"];       const currentBackgroundColor =         backgroundColors[currentIndex % backgroundColors.length];       return (         <div className="content" style={{ background: currentBackgroundColor }}>             <h1 id="top">neveropen</h1>             <h1>Inspirational Quote Generator</h1>             {currentQuote && (                 <blockquote>                     <p>"{currentQuote.quote}"</p>                 </blockquote>             )}             {currentQuote && <h2>{currentQuote.author}</h2>}             {currentQuote && <h3>{currentQuote.source}</h3>}             <div className="button-container">                 <button onClick={handlePreviousClick}>Previous</button>                 <button onClick={handleNextClick}>Next</button>                 <button                     onClick={() =>                         window.open( `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}`                         )                     }                 >                     Share on Facebook                 </button>             </div>         </div>     ); } |
CSS
/* FileName: App.css */html, body { Â Â Â Â height: 100%; Â Â Â Â margin: 0; Â Â Â Â padding: 0; } Â Â body { Â Â Â Â font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Â Â Â Â Â Â Â Â Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; Â Â Â Â text-align: center; Â Â Â Â color: rgba(255, 255, 255, 0.8); Â Â Â Â background: linear-gradient(45deg, #f0f2ef, #f0f1f0); Â Â Â Â Â Â display: flex; Â Â Â Â flex-direction: column; Â Â Â Â align-items: center; Â Â Â Â justify-content: center; Â Â Â Â min-height: 100vh; Â Â Â Â margin: 0; } Â Â Â Â .content { Â Â Â Â display: flex; Â Â Â Â flex-direction: column; Â Â Â Â align-items: center; Â Â Â Â justify-content: center; Â Â Â Â padding: 1rem 2rem; } Â Â #top { Â Â Â Â color: green; } Â Â blockquote { Â Â Â Â background-color: rgba(255, 255, 255, 0.2); Â Â Â Â padding: 20px; Â Â Â Â border-radius: 5px; Â Â Â Â margin: 10px; } Â Â button { Â Â Â Â display: inline-block; Â Â Â Â padding: 10px 20px; Â Â Â Â font-size: 16px; Â Â Â Â text-align: center; Â Â Â Â text-decoration: none; Â Â Â Â border: 2px solid #23870e; Â Â Â Â border-radius: 5px; Â Â Â Â background-color: #23870e; Â Â Â Â color: #ffffff; Â Â Â Â cursor: pointer; Â Â Â Â transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease; Â Â Â Â margin: 10px; } Â Â Â Â .button-container { Â Â Â Â display: flex; Â Â Â Â justify-content: center; } |
Steps to run the project:
Step 1: Type the following command in terminal.
npm start
Step 2: Open web-browser and type the following URL
http://localhost:3000/
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
