Skip to content

Commit 7c2a07b

Browse files
thinkswellthinkswell
authored
Merge pull request thinkswell#165 from SaiSridhar783/RandomQuoteGen-saisridhar783-branch
Next Quote Generator
2 parents a0fa55b + 81d7132 commit 7c2a07b

File tree

9 files changed

+280
-0
lines changed

9 files changed

+280
-0
lines changed

‎RandomQuoteGenerator/saisridhar783/.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎RandomQuoteGenerator/saisridhar783/.gitignore

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
*lock.json
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env.local
30+
.env.development.local
31+
.env.test.local
32+
.env.production.local
33+
34+
# vercel
35+
.vercel

‎RandomQuoteGenerator/saisridhar783/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Next Quote Generator
2+
3+
This project generates random quotes on the click of a button or after idling for 3 minutes. You can choose the category from the drop down. It uses an API found at [api.quotable.io](https://api.quotable.io/).
4+
5+
If you like this project, check out my [github](https://github.com/saisridhar783)
6+
7+
## Technologies
8+
9+
Project is created with:
10+
11+
1. [Next.js](https://nextjs.org/)
12+
1. [React Hooks](https://reactjs.org/docs/hooks-intro.html)
13+
1. [Chakra UI](https://chakra-ui.com/)
14+
15+
## Run the project on local server
16+
17+
Clone the project and follow these steps -
18+
19+
First, install the dependencies:
20+
21+
```bash
22+
cd javascript-mini-projects/RandomQuoteGenerator/saisridhar783
23+
npm install
24+
```
25+
26+
Start the server using:
27+
28+
```bash
29+
npm run dev
30+
```
31+
32+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

‎RandomQuoteGenerator/saisridhar783/next.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
reactStrictMode: true,
3+
}

‎RandomQuoteGenerator/saisridhar783/package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "saisridhar783",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@chakra-ui/react": "^1.6.8",
13+
"@emotion/react": "^11.4.1",
14+
"@emotion/styled": "^11.3.0",
15+
"axios": "^0.22.0",
16+
"framer-motion": "^4.1.17",
17+
"next": "11.1.2",
18+
"react": "17.0.2",
19+
"react-dom": "17.0.2",
20+
"react-idle-timer": "^4.6.4"
21+
},
22+
"devDependencies": {
23+
"eslint": "7.32.0",
24+
"eslint-config-next": "11.1.2"
25+
}
26+
}

‎RandomQuoteGenerator/saisridhar783/pages/_app.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { ChakraProvider } from "@chakra-ui/react";
2+
3+
function MyApp({ Component, pageProps }) {
4+
return (
5+
<ChakraProvider>
6+
<Component {...pageProps} />
7+
</ChakraProvider>
8+
);
9+
}
10+
11+
export default MyApp;

‎RandomQuoteGenerator/saisridhar783/pages/index.js

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import Head from "next/head";
2+
import {
3+
Flex,
4+
Text,
5+
Heading,
6+
Select,
7+
Spinner,
8+
Box,
9+
Button,
10+
} from "@chakra-ui/react";
11+
import axios from "axios";
12+
import { useRef, useState } from "react";
13+
import { useIdleTimer } from "react-idle-timer";
14+
15+
export default function Home({ category, quote, start }) {
16+
const cat = useRef();
17+
const [author, setAuthor] = useState(quote.author);
18+
const [quotes, setQuotes] = useState(quote.content);
19+
const [val, setVal] = useState(false);
20+
const [bgImage, setBgImage] = useState("white");
21+
const [fontCol, setFontCol] = useState("black");
22+
const { reset } = useIdleTimer({
23+
timeout: 1000 * 60 * 3,
24+
onIdle: handleOnIdle,
25+
});
26+
27+
function handleOnIdle() {
28+
cat.current.value =
29+
category[Math.floor(Math.random() * category.length)];
30+
genQuote();
31+
reset();
32+
}
33+
34+
async function genQuote() {
35+
const response = await axios.get(
36+
`https://api.quotable.io/random?tags=${cat.current.value}`
37+
);
38+
setAuthor(response.data.author);
39+
setQuotes(response.data.content);
40+
let x = Math.floor(Math.random() * 256);
41+
let y = Math.floor(Math.random() * 256);
42+
let z = Math.floor(Math.random() * 256);
43+
let bgColor = "rgb(" + x + "," + y + "," + z + ")";
44+
setBgImage(bgColor);
45+
46+
let luminance = (0.299 * x + 0.587 * y + 0.114 * z) / 255;
47+
let d = 0;
48+
if (luminance > 0.5) d = 0;
49+
// bright colors - black font
50+
else d = 255; // dark colors - white font
51+
52+
setFontCol(`rgb(${d},${d},${d})`);
53+
54+
setVal(!val);
55+
}
56+
57+
return (
58+
<>
59+
<Head>
60+
<title>Random Quote Generator</title>
61+
<meta
62+
name="description"
63+
content="Generated by create next app"
64+
/>
65+
<link rel="preconnect" href="https://fonts.googleapis.com" />
66+
<link
67+
rel="preconnect"
68+
href="https://fonts.gstatic.com"
69+
crossOrigin="true"
70+
/>
71+
<link
72+
href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap"
73+
rel="stylesheet"
74+
/>
75+
</Head>
76+
<Box minH="100vh" w="100vw" zIndex="-1" position="fixed"></Box>
77+
<Flex
78+
flexDir="column"
79+
alignItems="center"
80+
justifyContent="center"
81+
w="100vw"
82+
bg={bgImage}
83+
minH="100vh"
84+
>
85+
<Heading my="3rem" fontSize="2rem" color={fontCol}>
86+
Random Quote Generator
87+
</Heading>
88+
<Flex
89+
justifyContent="center"
90+
bg="purple"
91+
w="100vw"
92+
mb="3rem"
93+
p="1rem"
94+
>
95+
<Flex
96+
alignItems="center"
97+
justifyContent="space-around"
98+
w="30%"
99+
minW="200px"
100+
>
101+
<Text as="strong" color="white">
102+
Select a category :
103+
</Text>
104+
<Select
105+
maxW="250px"
106+
textTransform="capitalize"
107+
ref={cat}
108+
defaultValue={start}
109+
variant="outline"
110+
color="black"
111+
bgColor="white"
112+
>
113+
{category &&
114+
category.map((item) => (
115+
<option value={item} key={item}>
116+
{item}
117+
</option>
118+
))}
119+
{!category && <Spinner size="lg" />}
120+
</Select>
121+
</Flex>
122+
</Flex>
123+
<Box
124+
w="50%"
125+
minW="250px"
126+
bg="gray.100"
127+
boxShadow="inset 2px 2px 8px gray"
128+
borderRadius="lg"
129+
p="3rem"
130+
fontSize="1.8rem"
131+
fontFamily="Prompt"
132+
>
133+
<Text as="blockquote" fontWeight="semibold">
134+
{quotes}
135+
</Text>
136+
<Text as="i" d="block" textAlign="right" mt="2rem">
137+
~ {author}
138+
</Text>
139+
</Box>
140+
<Button onClick={genQuote} colorScheme="facebook" mt="3rem">
141+
Get New Quote
142+
</Button>
143+
</Flex>
144+
</>
145+
);
146+
}
147+
148+
export async function getStaticProps() {
149+
const resp = await axios.get("https://api.quotable.io/tags");
150+
const categories = resp.data.map((each) => each.name);
151+
152+
let tempCat = categories[Math.floor(Math.random() * categories.length)];
153+
if (tempCat === "proverb") tempCat = "business";
154+
155+
const quoterR = await axios.get(
156+
"https://api.quotable.io/random?tags=" + tempCat
157+
);
158+
159+
return {
160+
props: {
161+
category: categories,
162+
start: tempCat,
163+
quote: quoterR.data,
164+
},
165+
};
166+
}

‎RandomQuoteGenerator/saisridhar783/public/favicon.ico

25.3 KB
Binary file not shown.

‎RandomQuoteGenerator/saisridhar783/public/vercel.svg

+4
Loading

0 commit comments

Comments
 (0)