├── .prettierrc.json ├── .dockerignore ├── .husky └── pre-commit ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── index.css ├── setupTests.js ├── App.test.js ├── reportWebVitals.js ├── index.js ├── components │ ├── apiInfo.js │ ├── contributorInfo.js │ ├── header.js │ └── content.js ├── App.css ├── cards │ ├── boredAPI.js │ ├── randomAdvice.js │ ├── chuckNorrisJoke.js │ ├── tronalddump.jsx │ ├── RandomKanyeQuote.jsx │ ├── randomFoodPics.js │ ├── RandomDogimage.js │ ├── RandomDuckAPI.js │ ├── quoteClearAPI.js │ ├── randomGotQuotes.js │ ├── starWarsAPI.js │ ├── randomPoemsAPI.jsx │ ├── RandomCatimages.js │ ├── RandomBriyaniPics.js │ ├── randomDadJoke.js │ ├── randomCarImage.js │ ├── UsaCovidCases.jsx │ ├── randomFoxImage.js │ ├── randomCatFacts.jsx │ ├── coffeApi.jsx │ ├── PageVisits.jsx │ ├── randomDadJokes.jsx │ ├── randomGeekJokes.jsx │ ├── randomDogfacts.js │ ├── ZipCodeDetailsAPI.js │ ├── covidApi.js │ ├── randomJokeApi.jsx │ ├── NasaApi.js │ ├── MemesApi.js │ ├── randomAnime.js │ ├── randomQuotes.js │ ├── SpacexcrewAPI.jsx │ ├── HistoryOfTheDay.jsx │ ├── BeerApi.js │ ├── breadPuns.js │ ├── PublicApiApi.js │ ├── GenderGuess.js │ ├── randomCreditCard.jsx │ ├── robohash.js │ ├── RandomAnimeSeries.js │ ├── RandomValorantWeapon.js │ ├── foaasapi.js │ ├── GetIcon.js │ ├── RandomMovieQuote.jsx │ ├── ricknmortyApi.js │ ├── randomPlaceholderImage.js │ ├── bookDetails.js │ ├── PasswordGenerator.jsx │ ├── dogWithAnimeQuotes.js │ ├── url-shortener.jsx │ ├── MusicPlayer.js │ ├── githubUser.js │ ├── giphyapi.js │ ├── Sunshinetime.js │ ├── RandomAdage.jsx │ ├── SimpleAdd.jsx │ ├── EvaluateMath.jsx │ ├── HaikuSyllableCounter.jsx │ ├── imageCompressionAPI.jsx │ ├── Dungeons.jsx │ ├── publicholiday.js │ ├── weatherApi.js │ ├── weatherApi2.jsx │ ├── TrendingRepositories.js │ ├── pokeAPI.js │ ├── cryptoDetails.js │ ├── RandomProfile.js │ ├── Movies.js │ ├── fakeStoreAPI.js │ └── ageCalculator.js ├── github.svg ├── logo.svg └── App.js ├── craco.config.js ├── Dockerfile ├── tailwind.config.js ├── .gitignore ├── .prettierignore ├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── ci.yml ├── LICENSE.md ├── CONTRIBUTING.md ├── package.json ├── CODE_OF_CONDUCT.md └── README.md /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | **/node_modules -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedangj044/just-calling-random-api/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedangj044/just-calling-random-api/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vedangj044/just-calling-random-api/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | /* ./src/index.css */ 2 | @tailwind base; 3 | @tailwind components; 4 | @tailwind utilities; 5 | -------------------------------------------------------------------------------- /craco.config.js: -------------------------------------------------------------------------------- 1 | // craco.config.js 2 | module.exports = { 3 | style: { 4 | postcss: { 5 | plugins: [require("tailwindcss"), require("autoprefixer")], 6 | }, 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn react link", () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:12-alpine as builder 2 | 3 | WORKDIR /app 4 | 5 | COPY . . 6 | 7 | RUN sed -i "s/https:\/\/vedangj044.github.io\/just-calling-random-api/\./g" package.json 8 | 9 | RUN npm install 10 | 11 | RUN npm run build 12 | 13 | 14 | FROM nginx:1.17.1-alpine 15 | 16 | COPY --from=builder /app/build/ /usr/share/nginx/html -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | fontFamily: { 6 | body: ["Montserrat", "sans-serif"], 7 | }, 8 | extend: {}, 9 | }, 10 | variants: { 11 | extend: { 12 | backgroundColor: ["active"], 13 | opacity: ["disabled"], 14 | }, 15 | }, 16 | plugins: [], 17 | }; 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .idea/ 21 | .env 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | README.old.md 27 | .vscode -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 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 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | .idea/ 21 | .env 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | README.old.md 27 | .vscode -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Please include the details of the API used in this PR. 4 | 5 | ## Screenshot 6 | 7 | Optional 8 | 9 |
10 | Checklist 11 | 12 | - [ ] API used in this PR was not used in just-calling-random-api before. 13 | - [ ] API used in this PR is Public or I have permission to use it. 14 | - [ ] My contribution is working. 15 | - [ ] My contribution doesn't expose any API keys. 16 | - [ ] My changes don't generate any new warnings. 17 | - [ ] My changes don't affect any work done by other developers. 18 | 19 | To tick a box, replace `[ ]` with `[x]`. 20 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/apiInfo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function ApiInfo(props) { 4 | return ( 5 | 6 |
7 | Hyperlink icon 12 |

{props.apiName}

13 |
14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/components/contributorInfo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function ContributorInfo(props) { 4 | return ( 5 | 6 |
7 | Contributor's avatar 12 |

{props.username}

13 |
14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import github from "../github.svg"; 3 | 4 | export default function Header(props) { 5 | return ( 6 |
7 |
8 | 9 |

10 | Just Calling Random APIs 11 |

12 | 13 |
14 | 19 | 20 | 21 |
22 |
23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/cards/boredAPI.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomActivity(props) { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://www.boredapi.com/api/activity") 10 | .then((res) => res.json()) 11 | .then((data) => setResponse(data.activity)); 12 | }, []); 13 | 14 | return ( 15 |
16 |

Random Activity

17 |

{response}

18 | 19 | 23 | 24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/cards/randomAdvice.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomAdvice(props) { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://api.adviceslip.com/advice") 10 | .then((resp) => resp.json()) 11 | .then((data) => setResponse(data.slip.advice)); 12 | }, []); 13 | 14 | return ( 15 |
16 |

Random Advice API

17 |

{response}

18 | 19 | 23 | 24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/cards/chuckNorrisJoke.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function ChuckNorrisJoke() { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://api.chucknorris.io/jokes/random") 10 | .then((resp) => resp.json()) 11 | .then((data) => setResponse(data.value)); 12 | }, []); 13 | 14 | return ( 15 |
16 |

Random Chuck Norris Joke API

17 |

{response}

18 | 19 | 23 | 24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/cards/tronalddump.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function TronaldDump(props) { 6 | const [Quote, setQuote] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://api.tronalddump.io/random/quote") 10 | .then((res) => res.json()) 11 | .then((data) => setQuote(data.value)); 12 | }, []); 13 | 14 | return ( 15 |
16 |
17 |

Tronald Dump

18 |

{Quote}

19 | 23 | 24 |
25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/cards/RandomKanyeQuote.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomKanyeQuote(props) { 6 | const [kanyeQuote, setKanyeQuote] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://api.kanye.rest") 10 | .then((res) => res.json()) 11 | .then((data) => setKanyeQuote(data.quote)); 12 | }, []); 13 | return ( 14 |
15 |
16 |

Random Kanye West Quotes

17 |

{kanyeQuote}

18 | 22 | 23 |
24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/cards/randomFoodPics.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | export default function RandomFoodPicApi() { 6 | const [foodImg, setImg] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://foodish-api.herokuapp.com/api/") 10 | .then((res) => res.json()) 11 | .then((data) => setImg(data.image)); 12 | }, []); 13 | 14 | return ( 15 |
16 |

Random Food Pic API

17 | foodimage 18 | 19 | 23 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/cards/RandomDogimage.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomDogimage(props) { 6 | const [dogImage, setdogImage] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://dog.ceo/api/breeds/image/random") 10 | .then((res) => res.json()) 11 | .then((data) => setdogImage(data.message)); 12 | }, []); 13 | return ( 14 |
15 |
16 |

Random Dog images

17 | dogimage 18 | 19 | 23 | 24 |
25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/cards/RandomDuckAPI.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const RandomDuckApi = () => { 6 | const [img, setImg] = useState(""); 7 | useEffect(() => { 8 | fetch("https://random-d.uk/api/v2/random") 9 | .then((res) => res.json()) 10 | .then((res) => { 11 | setImg(res.url); 12 | }) 13 | .catch((err) => { 14 | console.log("error:", err); 15 | }); 16 | }, []); 17 | return ( 18 |
19 |

Random Duck API

20 | 21 | 25 | 26 |
27 | ); 28 | }; 29 | 30 | export default RandomDuckApi; 31 | -------------------------------------------------------------------------------- /src/cards/quoteClearAPI.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const QuoteClearAPI = () => { 6 | const [quote, setQuote] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://quoteclear.web.app/api/random") 10 | .then((res) => res.json()) 11 | .then((data) => { 12 | //console.log(data) 13 | setQuote(data.text); 14 | }); 15 | }, []); 16 | // console.log(quote) 17 | return ( 18 |
19 |

Quote Clear API

20 |

{quote}

21 | 22 | 26 | 30 |
31 | ); 32 | }; 33 | 34 | export default QuoteClearAPI; 35 | -------------------------------------------------------------------------------- /src/cards/randomGotQuotes.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomGotQuotes(props) { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://game-of-thrones-quotes.herokuapp.com/v1/random") 10 | .then((resp) => resp.json()) 11 | .then((data) => setResponse(data.sentence)); 12 | }, []); 13 | 14 | return ( 15 |
16 |

17 | Game Of Thrones Quotes 18 |

19 |

{response}

20 | 21 | 25 | 29 |
30 | ); 31 | } 32 | -------------------------------------------------------------------------------- /src/cards/starWarsAPI.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function StarWarsAPI(props) { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch( 10 | `https://swapi.dev/api/people/${Math.floor( 11 | Math.random() * 50 12 | )}?format=json` 13 | ) 14 | .then((resp) => resp.json()) 15 | .then((data) => setResponse(data.name)); 16 | }, []); 17 | 18 | return ( 19 |
20 |

The Star Wars API

21 |

22 | Random Star Wars character: {response} 23 |

24 | 25 | 29 | 30 |
31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /src/cards/randomPoemsAPI.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const Poemist = () => { 7 | const [randomPoem, setrandomPoem] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://www.poemist.com/api/v1/randompoems").then((res) => { 10 | setrandomPoem(res.data.title); 11 | }); 12 | }, []); 13 | return ( 14 |
15 |
16 |

Random Poems

17 |

{randomPoem}

18 | 19 | 23 | 27 |
28 |
29 | ); 30 | }; 31 | 32 | export default Poemist; 33 | -------------------------------------------------------------------------------- /src/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Vedang Joshi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/cards/RandomCatimages.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomCatimages(props) { 6 | const [catImage, setcatImage] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://aws.random.cat/meow") 10 | .then((res) => res.json()) 11 | .then((data) => setcatImage(data.file)) 12 | .catch((err) => { 13 | console.log("error:", err); 14 | }); 15 | }, []); 16 | return ( 17 |
18 |
19 |

Random Cat images

20 | catimage 21 | 22 | 26 | 30 |
31 |
32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /src/cards/RandomBriyaniPics.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomBriyaniPics = () => { 7 | const [Pics, setPics] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://biriyani.anoram.com/get").then((res) => { 10 | setPics(res.data.image); 11 | }); 12 | }, []); 13 | 14 | return ( 15 |
16 |
17 |

Random Briyani Pics

18 | Biryani 19 | 23 | 27 |
28 |
29 | ); 30 | }; 31 | 32 | export default RandomBriyaniPics; 33 | -------------------------------------------------------------------------------- /src/cards/randomDadJoke.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomDadJoke(props) { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | fetch("https://icanhazdadjoke.com/", { 10 | headers: { 11 | Accept: "application/json", 12 | }, 13 | }) 14 | .then((resp) => resp.json()) 15 | .then((data) => setResponse(data.joke)) 16 | .catch((err) => { 17 | console.log("error:", err); 18 | }); 19 | }, []); 20 | 21 | return ( 22 |
23 |

Random Dad Joke API

24 |

{response}

25 | 26 | 30 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/cards/randomCarImage.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | import axios from "axios"; 6 | 7 | const BASE_URL = "https://forza-api.tk/"; 8 | 9 | const RandomCarImage = () => { 10 | const [data, setData] = useState({ image: "" }); 11 | const fetchData = async () => { 12 | const response = await axios.get(BASE_URL); 13 | if (response.status !== 200) { 14 | throw new Error("Fetching err"); 15 | } 16 | setData(response?.data); 17 | }; 18 | 19 | useEffect(() => { 20 | fetchData(); 21 | }, []); 22 | 23 | return ( 24 |
25 |

Random Car Image

26 | foximage 27 | 28 | 32 | 33 |
34 | ); 35 | }; 36 | 37 | export default RandomCarImage; 38 | -------------------------------------------------------------------------------- /src/cards/UsaCovidCases.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const CovidUsaCases = () => { 7 | const [Cases, setCases] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://disease.sh/v3/covid-19/countries/usa").then((res) => { 10 | setCases(res.data.cases); 11 | }); 12 | }, []); 13 | 14 | return ( 15 |
16 |
17 |

Covid Usa Cases

18 |

USA Covid Cases: {Cases}

19 | 20 | 24 | 28 |
29 |
30 | ); 31 | }; 32 | 33 | export default CovidUsaCases; 34 | -------------------------------------------------------------------------------- /src/cards/randomFoxImage.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | import axios from "axios"; 6 | 7 | const BASE_URL = "https://randomfox.ca/floof/"; 8 | 9 | const RandomFoxImage = () => { 10 | const [data, setData] = useState({ image: "", link: "" }); 11 | const fetchData = async () => { 12 | const response = await axios.get(BASE_URL); 13 | if (response.status !== 200) { 14 | throw new Error("Fetching err"); 15 | } 16 | setData(response?.data); 17 | }; 18 | 19 | useEffect(() => { 20 | fetchData(); 21 | }, []); 22 | 23 | return ( 24 |
25 |

Random Fox Image

26 | foximage 27 | 28 | 32 | 33 |
34 | ); 35 | }; 36 | 37 | export default RandomFoxImage; 38 | -------------------------------------------------------------------------------- /src/cards/randomCatFacts.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomCatFacts = () => { 7 | const [catFact, setCatFact] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://meowfacts.herokuapp.com/").then((res) => { 10 | // console.log(res.data); 11 | setCatFact(res.data.data[0]); 12 | }); 13 | }, []); 14 | // console.log(catFact); 15 | return ( 16 |
17 |
18 |

19 | Random Cat Facts 20 |

21 |

{catFact}

22 | 23 | 27 | 31 |
32 |
33 | ); 34 | }; 35 | 36 | export default RandomCatFacts; 37 | -------------------------------------------------------------------------------- /src/cards/coffeApi.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const CoffeApi = () => { 6 | const [response, setResponse] = useState(null); 7 | 8 | useEffect(() => { 9 | fetch("https://asli-fun-fact-api.herokuapp.com/") 10 | .then((res) => res.json()) 11 | .then(({ data }) => { 12 | setResponse(data.fact); 13 | console.log(data.fact); 14 | }); 15 | }, []); 16 | return ( 17 |
18 |

Fun Fact API

19 | 20 | {response !== null ? ( 21 |
22 |

{response}

23 |
24 | ) : null} 25 | 26 | 30 | 34 |
35 | ); 36 | }; 37 | 38 | export default CoffeApi; 39 | -------------------------------------------------------------------------------- /src/cards/PageVisits.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const PageVisits = () => { 6 | const [status, setStatus] = useState(""); 7 | 8 | useEffect(() => { 9 | const dk = async () => { 10 | let data = await fetch( 11 | "https://api.countapi.xyz/hit/vedangj044.just-calling-random-api/visits" 12 | ); 13 | const ans = await data.json(); 14 | setStatus(ans.value); 15 | }; 16 | dk(); 17 | }, []); 18 | 19 | return ( 20 |
21 |

Welcome !!

22 | 28 |
29 | 33 | 34 |
35 | ); 36 | }; 37 | 38 | export default PageVisits; 39 | -------------------------------------------------------------------------------- /src/cards/randomDadJokes.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomDadJokes = () => { 7 | const [dadJoke, setdadJoke] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://dadjokes.io/").then((res) => { 10 | // axios.get("https://rapidapi.com/KegenGuyll/api/dad-jokes/details").then((res) => { 11 | // console.log(res.data); 12 | setdadJoke(res.data.joke); 13 | }); 14 | }, []); 15 | // console.log(dadJoke); 16 | return ( 17 |
18 |
19 |

Random Dad Jokes

20 |

{dadJoke}

21 | 22 | 26 | 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default RandomDadJokes; 36 | -------------------------------------------------------------------------------- /src/cards/randomGeekJokes.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomGeekJokes = () => { 7 | const [geekJoke, setgeekJoke] = useState(""); 8 | useEffect(() => { 9 | axios 10 | .get("https://geek-jokes.sameerkumar.website/api?format=json") 11 | .then((res) => { 12 | // console.log(res.data); 13 | setgeekJoke(res.data.joke); 14 | }); 15 | }, []); 16 | // console.log(geekJoke); 17 | return ( 18 |
19 |
20 |

21 | Random Geek Jokes 22 |

23 |

{geekJoke}

24 | 25 | 29 | 33 |
34 |
35 | ); 36 | }; 37 | 38 | export default RandomGeekJokes; 39 | -------------------------------------------------------------------------------- /src/cards/randomDogfacts.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | import axios from "axios"; 5 | export default function RandomAnimfacts(props) { 6 | const [response, setResponse] = useState(""); 7 | 8 | useEffect(() => { 9 | axios 10 | .get( 11 | `https://anime-facts-rest-api.herokuapp.com/api/v1/fma_brotherhood/${ 12 | Math.floor(Math.random() * 10) + 1 13 | }` 14 | ) 15 | .then((response) => { 16 | setResponse(response.data.data.fact); 17 | }) 18 | .catch((err) => console.log(err)); 19 | }, []); 20 | 21 | return ( 22 |
23 |

Random Anime Facts

24 |

{response}

25 | 26 | 30 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/cards/ZipCodeDetailsAPI.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const ZipCodeAPI = (props) => { 6 | const [zipCodeData, setZipCodeData] = useState({}); 7 | 8 | useEffect(() => { 9 | fetch("https://api.zippopotam.us/us/33162") 10 | .then((response) => response.json()) 11 | .then((data) => setZipCodeData(data)); 12 | }, []); 13 | 14 | return ( 15 |
16 |

Zip Code Details

17 |

18 | Zip Code : {zipCodeData["post code"]} 19 |

20 |

21 | Country : {zipCodeData.country} 22 |

23 |

24 | Country Abbreviation : {zipCodeData["country abbreviation"]} 25 |

26 | 27 | 31 | 32 |
33 | ); 34 | }; 35 | 36 | export default ZipCodeAPI; 37 | -------------------------------------------------------------------------------- /src/cards/covidApi.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function Covidapi(props) { 6 | const [covidData, setCovidData] = useState({}); 7 | useEffect(() => { 8 | fetch("https://api.covid19api.com/summary") 9 | .then((res) => res.json()) 10 | .then((data) => setCovidData(data.Global)); 11 | }, []); 12 | 13 | return ( 14 |
15 |

Covid-19 Global Stats

16 |

17 | Total Confirmed : {covidData.TotalConfirmed} 18 |

19 |

20 | Total Deaths : {covidData.TotalDeaths} 21 |

22 |

23 | New Deaths : {covidData.NewDeaths} 24 |

25 | 26 | 30 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/cards/randomJokeApi.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomJokeApi = () => { 7 | const [joke, setjoke] = useState(""); 8 | const [delivery, setDelivery] = useState(""); 9 | 10 | useEffect(() => { 11 | axios 12 | .get("https://v2.jokeapi.dev/joke/Programming,Miscellaneous") 13 | .then((res) => { 14 | setjoke(res.data.setup); 15 | setDelivery(res.data.delivery); 16 | }); 17 | }, []); 18 | 19 | return ( 20 |
21 |
22 |

Random Joke API

23 |

{joke}

24 |

{delivery}

25 | 26 | 30 | 31 |
32 |
33 | ); 34 | }; 35 | 36 | export default RandomJokeApi; 37 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thank you for considering and taking the time to contribute! Product focuses on 100% education as well as upskilling developing countries and rural areas. 4 | 5 | The following are guidelines for contributing to this project. 6 | 7 | ## How to Report Bugs 8 | 9 | Please open [a new issue in the appropriate GitHub repository][new-issue] with steps to reproduce the problem you're experiencing. 10 | 11 | Be sure to include as much information including screenshots, text output, and both your expected and actual results. 12 | 13 | ## How to Request Enhancements 14 | 15 | First, please refer to the applicable [GitHub repository][github-repo] and search [the repository's GitHub issues][issues-list] to make sure your idea has not been (or is not still) considered. 16 | 17 | Then, please [create a new issue in the GitHub repository][new-issue] describing your enhancement. 18 | 19 | Be sure to include as much detail as possible including step-by-step descriptions, specific examples, screenshots or mockups, and reasoning for why the enhancement might be worthwhile. 20 | 21 | [new-issue]: https://github.com/vedangj044/just-calling-random-api/issues/new 22 | [github-repo]: https://github.com/vedangj044/just-calling-random-api 23 | [issues-list]: https://github.com/vedangj044/just-calling-random-api/issues 24 | -------------------------------------------------------------------------------- /src/cards/NasaApi.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const NasaApi = () => { 7 | const [spaceData, setSpaceData] = useState(""); 8 | 9 | useEffect(() => { 10 | axios 11 | .get("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY") 12 | .then((res) => { 13 | setSpaceData(res.data); 14 | }) 15 | .catch((err) => { 16 | setSpaceData("Some error came :("); 17 | }); 18 | }, []); 19 | 20 | return ( 21 |
22 |
23 |

NASA Space API

24 |
25 | {spaceData.title} 26 |
27 | Nasa 28 | 29 | 33 | 34 |
35 |
36 | ); 37 | }; 38 | 39 | export default NasaApi; 40 | -------------------------------------------------------------------------------- /src/cards/MemesApi.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function MemesApi(props) { 6 | const [response, setResponse] = useState(null); 7 | 8 | useEffect(() => { 9 | fetch("https://api.imgflip.com/get_memes") 10 | .then((res) => res.json()) 11 | .then(({ data }) => { 12 | let random = Math.ceil(Math.random() * 100); 13 | setResponse(data.memes[random]); 14 | // console.log(data.memes[random]) 15 | }); 16 | }, []); 17 | 18 | return ( 19 |
20 |

Memes API

21 | {response !== null ? ( 22 |

{response.name}

23 | ) : ( 24 |

Loading

25 | )} 26 | 27 | {response !== null ? ( 28 | meme 29 | ) : null} 30 | 31 | 35 | 36 |
37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/cards/randomAnime.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomAnime = () => { 7 | const [anime, setAnime] = useState({}); 8 | useEffect(() => { 9 | axios.get("https://animechan.vercel.app/api/random/").then((res) => { 10 | // console.log(res.data) 11 | setAnime(res.data); 12 | }); 13 | }, []); 14 | return ( 15 |
16 |
17 |

18 | Random Anime Quotes 19 |

20 |

{anime.quote}

21 |

- {anime.character}

22 |

in {anime.anime}

23 | 24 | 28 | 32 |
33 |
34 | ); 35 | }; 36 | 37 | export default RandomAnime; 38 | -------------------------------------------------------------------------------- /src/cards/randomQuotes.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function RandomQuotes(props) { 6 | // React hooks are used here to call the inbuilt fetch api 7 | // and display the response in a component. 8 | // Contributor's have to use fetch api to call any public api 9 | // and render the response to a component. Contributor's must 10 | // inlcude the ContributorInfo and ApiInfo component, with 11 | // suitable props. Refer to README.md for details. 12 | 13 | const [response, setResponse] = useState(""); 14 | 15 | useEffect(() => { 16 | fetch("https://api.quotable.io/random") 17 | .then((resp) => resp.json()) 18 | .then((data) => setResponse(data.content)); 19 | }, []); 20 | 21 | return ( 22 |
23 |

Random Quotes API

24 |

{response}

25 | 26 | 30 | 34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/cards/SpacexcrewAPI.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const SpacexCrew = () => { 7 | const [Crew, setCrew] = useState(""); 8 | useEffect(() => { 9 | axios.get("https://api.spacexdata.com/v4/crew/").then((res) => { 10 | setCrew(res.data[Math.floor(res.data.length * Math.random())]); 11 | }); 12 | }, []); 13 | 14 | return ( 15 |
16 |
17 |

Spacex Crew Members

18 | Spacex Crew 19 |

Crew Member : {Crew.name}

20 |

21 | Agency name: {Crew.agency} 22 |

23 | 24 | 28 | 32 |
33 |
34 | ); 35 | }; 36 | 37 | export default SpacexCrew; 38 | -------------------------------------------------------------------------------- /src/cards/HistoryOfTheDay.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const HistoryOfTheDay = () => { 6 | const [status, setStatus] = useState({ flag: false, message: "" }); 7 | var today = new Date(); 8 | var dd = String(today.getDate()).padStart(2, "0"); 9 | var mm = String(today.getMonth() + 1).padStart(2, "0"); 10 | 11 | const btnHandler = async () => { 12 | setStatus("Loading..."); 13 | let data = await fetch("http://numbersapi.com/" + mm + "/" + dd + "/date"); 14 | const ans = await data.text(); 15 | setStatus({ flag: true, message: ans }); 16 | }; 17 | 18 | return ( 19 |
20 |

History of the day !!

21 |

{status.message}

22 | 28 |
29 | 33 | 34 |
35 | ); 36 | }; 37 | 38 | export default HistoryOfTheDay; 39 | -------------------------------------------------------------------------------- /src/cards/BeerApi.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function BeerAPI(props) { 6 | const [response, setResponse] = useState(null); 7 | 8 | useEffect(() => { 9 | fetch("https://api.punkapi.com/v2/beers") 10 | .then((res) => res.json()) 11 | .then((data) => { 12 | let random = Math.ceil(Math.random() * 25); 13 | // console.log(data[random]) 14 | setResponse(data[random]); 15 | }); 16 | }, []); 17 | 18 | return ( 19 |
20 |

Beer API

21 | {response !== null ? ( 22 |

{response.name}

23 | ) : ( 24 |

Loading

25 | )} 26 | 27 | {response !== null ? ( 28 | beer 34 | ) : null} 35 | 36 | 40 | 41 |
42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/cards/breadPuns.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function BreadPuns(props) { 6 | // React hooks are used here to call the inbuilt fetch api 7 | // and display the response in a component. 8 | // Contributor's have to use fetch api to call any public api 9 | // and render the response to a component. Contributor's must 10 | // inlcude the ContributorInfo and ApiInfo component, with 11 | // suitable props. Refer to README.md for details. 12 | 13 | const [response, setResponse] = useState(""); 14 | 15 | useEffect(() => { 16 | fetch("https://my-bao-server.herokuapp.com/api/breadpuns") 17 | .then((res) => res.json()) 18 | .then((data) => { 19 | // console.log(data); 20 | setResponse(data); 21 | }); 22 | }, []); 23 | 24 | return ( 25 |
26 |

Bread Puns API

27 |

{response}

28 | 29 | 33 | 37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/cards/PublicApiApi.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | function PublicApi() { 6 | let [response, setResponse] = useState(null); 7 | 8 | useEffect(() => { 9 | fetch("https://api.publicapis.org/entries") 10 | .then((res) => res.json()) 11 | .then(({ entries }) => { 12 | let random = Math.floor(Math.random() * 100); 13 | // console.log(entries[random]) 14 | setResponse(entries[random]); 15 | }); 16 | }, []); 17 | 18 | return ( 19 |
20 |

Random Public API

21 | {response !== null ? ( 22 | <> 23 | 29 | {response.API} 30 | 31 |

{response.Description}

32 | 33 | ) : ( 34 |

Loading

35 | )} 36 | 37 | 41 | 42 |
43 | ); 44 | } 45 | 46 | export default PublicApi; 47 | -------------------------------------------------------------------------------- /src/cards/GenderGuess.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | import ContributorInfo from "./../components/contributorInfo"; 4 | import ApiInfo from "./../components/apiInfo"; 5 | 6 | function GenderGuess() { 7 | let [name, setName] = useState(""); 8 | let [gender, setGender] = useState(""); 9 | 10 | const search = (name) => { 11 | fetch(`https://api.genderize.io/?name=${name}`) 12 | .then((res) => res.json()) 13 | .then((data) => { 14 | setGender(data.gender); 15 | }); 16 | }; 17 | 18 | return ( 19 |
20 |

Gender Guessing API

21 | 22 | setName(e.target.value)} 27 | /> 28 | 29 | 35 | 36 | {gender !== "" ? ( 37 |

{gender}

38 | ) : null} 39 | 40 | 44 | 48 |
49 | ); 50 | } 51 | 52 | export default GenderGuess; 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "just-calling-random-api", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": "https://vedangj044.github.io/just-calling-random-api", 6 | "dependencies": { 7 | "@craco/craco": "^6.3.0", 8 | "@testing-library/jest-dom": "^5.14.1", 9 | "@testing-library/react": "^11.2.7", 10 | "@testing-library/user-event": "^12.8.3", 11 | "axios": "^0.21.4", 12 | "craco": "0.0.3", 13 | "gh-pages": "^3.2.3", 14 | "react": "^17.0.2", 15 | "react-dom": "^17.0.2", 16 | "react-icons": "^4.3.1", 17 | "react-scripts": "4.0.3", 18 | "web-vitals": "^1.1.2" 19 | }, 20 | "scripts": { 21 | "start": "craco start", 22 | "build": "craco build", 23 | "test": "craco test", 24 | "eject": "react-scripts eject", 25 | "predeploy": "npm run build", 26 | "deploy": "gh-pages -d build", 27 | "prepare": "husky install" 28 | }, 29 | "eslintConfig": { 30 | "extends": [ 31 | "react-app", 32 | "react-app/jest" 33 | ] 34 | }, 35 | "browserslist": { 36 | "production": [ 37 | ">0.2%", 38 | "not dead", 39 | "not op_mini all" 40 | ], 41 | "development": [ 42 | "last 1 chrome version", 43 | "last 1 firefox version", 44 | "last 1 safari version" 45 | ] 46 | }, 47 | "devDependencies": { 48 | "autoprefixer": "^9.8.6", 49 | "husky": "^7.0.2", 50 | "lint-staged": "^11.2.3", 51 | "postcss": "^7.0.36", 52 | "prettier": "2.4.1", 53 | "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16" 54 | }, 55 | "lint-staged": { 56 | "**/*": "prettier --write --ignore-unknown" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/content.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Message(props) { 4 | return ( 5 |
6 |
7 |

Why this page exists?

8 |

9 | This page is for anyone around the globe who wants to start their 10 | open-source journey with{" "} 11 | 12 | 17 | {" "} 18 | Hacktoberfest{" "} 19 | 20 | 21 | . All you have to do is choose any publically available API, create a 22 | react component which calls your chosen API and display its response 23 | on the main page. You can find all the details and step-by-step 24 | procedures to make your first PR. Let's get going! 25 |

26 |
27 | 31 | 34 | 35 |
36 |
37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/cards/randomCreditCard.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomCreditCard = () => { 7 | const [creditCard, setCreditCard] = useState(""); 8 | useEffect(() => { 9 | const formData = new FormData(); 10 | formData.append("Type", "visa"); 11 | axios({ 12 | method: "post", 13 | url: "https://randommer.io/Card", 14 | data: formData, 15 | headers: { "Content-Type": "multipart/form-data" }, 16 | }) 17 | .then((response) => { 18 | setCreditCard(response.data); 19 | }) 20 | .catch(function (response) { 21 | console.error(response); 22 | }); 23 | }, []); 24 | 25 | return ( 26 |
27 |
28 |

Random Credit Card

29 | {creditCard && ( 30 |

31 | Card Number : {creditCard.cardNumber}
32 | CVV: {creditCard.cvv}
33 | Name: {creditCard.fullName}
34 | pin: {creditCard.pin}
35 | type: Visa 36 |

37 | )} 38 | 39 | 43 | 47 |
48 |
49 | ); 50 | }; 51 | 52 | export default RandomCreditCard; 53 | -------------------------------------------------------------------------------- /src/cards/robohash.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const RandomRoboFriend = () => { 6 | const [randomId, setRandomId] = useState(1); 7 | 8 | const DEFAULT_NAME = "Hijal"; 9 | 10 | const generateRandomIdHandler = () => { 11 | let randomId = Math.floor(Math.random() * 100); 12 | setRandomId(randomId); 13 | }; 14 | 15 | return ( 16 |
17 |
18 |

Random ROBO Friend

19 |
20 |
21 |
22 | robots 27 |

{DEFAULT_NAME}

28 | 29 | 37 |
38 |
39 | 40 | 44 | 45 |
46 |
47 | ); 48 | }; 49 | 50 | export default RandomRoboFriend; 51 | -------------------------------------------------------------------------------- /src/cards/RandomAnimeSeries.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomAnimeSeries = () => { 7 | const [anime, setAnime] = useState(""); 8 | 9 | useEffect(() => { 10 | axios 11 | .get("https://anime-facts-rest-api.herokuapp.com/api/v1") 12 | .then((res) => { 13 | const randomNumber = Math.floor(res.data.data.length * Math.random()); 14 | setAnime(res.data.data[randomNumber]); 15 | }) 16 | .catch((err) => { 17 | setAnime(false); 18 | }); 19 | }, []); 20 | 21 | return ( 22 |
23 |
24 |

Random Anime Series API

25 | {setAnime ? ( 26 |
27 | {anime.anime_name} 28 |
29 | ) : ( 30 |
31 | No Anime Series found 32 |
33 | )} 34 | 35 | {setAnime && ( 36 | Anime Series 41 | )} 42 | 43 | 47 | 51 |
52 |
53 | ); 54 | }; 55 | 56 | export default RandomAnimeSeries; 57 | -------------------------------------------------------------------------------- /src/cards/RandomValorantWeapon.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomValorantWeapon = () => { 7 | const [weapon, setWeapon] = useState(""); 8 | 9 | useEffect(() => { 10 | axios 11 | .get("https://valorant-api.com/v1/weapons") 12 | .then((res) => { 13 | const randomNumber = Math.floor(res.data.data.length * Math.random()); 14 | setWeapon(res.data.data[randomNumber]); 15 | }) 16 | .catch((err) => { 17 | setWeapon(false); 18 | }); 19 | }, []); 20 | 21 | return ( 22 |
23 |
24 |

25 | Random Valorant Weapon API 26 |

27 | {weapon && weapon.displayName ? ( 28 |
29 | {weapon.displayName} 30 |
31 | ) : ( 32 |
33 | No Weapon Found 34 |
35 | )} 36 | 37 | {weapon && weapon.displayIcon && ( 38 | Anime Series 43 | )} 44 | 45 | 49 | 50 |
51 |
52 | ); 53 | }; 54 | 55 | export default RandomValorantWeapon; 56 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | branches: [main] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-latest 12 | 13 | strategy: 14 | matrix: 15 | node-version: [12.x] 16 | 17 | steps: 18 | - name: Checkout repository 19 | uses: actions/checkout@v2 20 | 21 | - name: Set up Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | 26 | - name: Install dependencies 27 | run: npm install 28 | 29 | - name: Check formatting 30 | run: npx prettier --check . 31 | 32 | - name: Build 33 | run: npm run build 34 | env: 35 | REACT_APP_GIPHY_API_KEY: ${{ secrets.REACT_APP_GIPHY_API_KEY }} 36 | REACT_APP_WEATHER_API_KEY: ${{ secrets.REACT_APP_WEATHER_API_KEY }} 37 | REACT_APP_HOLIDAY_API_KEY: ${{ secrets.REACT_APP_HOLIDAY_API_KEY }} 38 | 39 | - name: Deploy 40 | run: | 41 | git config --global user.name $user_name 42 | git config --global user.email $user_email 43 | git remote set-url origin https://${github_token}@github.com/${repository} 44 | npm run deploy 45 | env: 46 | user_name: "github-actions[bot]" 47 | user_email: "github-actions[bot]@users.noreply.github.com" 48 | github_token: ${{ secrets.DEPLOYMENT }} 49 | repository: ${{ github.repository }} 50 | REACT_APP_GIPHY_API_KEY: ${{ secrets.REACT_APP_GIPHY_API_KEY }} 51 | REACT_APP_WEATHER_API_KEY: ${{ secrets.REACT_APP_WEATHER_API_KEY }} 52 | REACT_APP_HOLIDAY_API_KEY: ${{ secrets.REACT_APP_HOLIDAY_API_KEY }} 53 | REACT_APP_MOVIE_API_KEY: ${{ secrets.REACT_APP_MOVIE_API_KEY }} 54 | -------------------------------------------------------------------------------- /src/cards/foaasapi.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useState } from "react"; 3 | import ContributorInfo from "./../components/contributorInfo"; 4 | import ApiInfo from "./../components/apiInfo"; 5 | 6 | export default function Foaas() { 7 | let [from, setFrom] = useState(""); 8 | let [to, setTo] = useState(""); 9 | let [response, setResponse] = useState(""); 10 | 11 | const search = () => { 12 | fetch("https://foaas.com/shutup/" + to + "/" + from, { 13 | method: "GET", 14 | headers: { 15 | Accept: "application/json", 16 | }, 17 | }) 18 | .then((res) => res.json()) 19 | .then((data) => { 20 | setResponse(data); 21 | }); 22 | }; 23 | 24 | return ( 25 |
26 |

27 | STFU as a service 28 |

29 | { 36 | setFrom(e.target.value); 37 | }} 38 | /> 39 |      40 | { 47 | setTo(e.target.value); 48 | }} 49 | /> 50 |          51 | 57 | {response !== "" ? ( 58 |

59 | {response.message}

{response.subtitle}
60 | 61 | ) : null} 62 |
63 | 64 |     65 | 66 |
67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /src/cards/GetIcon.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState, useRef } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const GetIcon = () => { 7 | const [Icon, setIcon] = useState(false); 8 | const website = useRef(); 9 | const [websiteUrl, setWebsiteUrl] = useState("youtube.com"); 10 | 11 | useEffect(() => { 12 | axios 13 | .get("https://icon.horse/icon/" + websiteUrl) 14 | .then((res) => { 15 | setIcon("https://icon.horse/icon/" + websiteUrl); 16 | }) 17 | .catch((err) => { 18 | setIcon(false); 19 | console.log("Some an error came :("); 20 | }); 21 | }, [websiteUrl]); 22 | 23 | const submitHandler = (event) => { 24 | event.preventDefault(); 25 | setWebsiteUrl(website.current.value); 26 | website.current.value = ""; 27 | }; 28 | 29 | return ( 30 |
31 |
32 |

Website Icon API

33 | {Icon ? ( 34 | Nasa 35 | ) : ( 36 |
37 | Some an error came :( 38 |
39 | )} 40 | 47 | 53 | 54 | 58 | 59 |
60 |
61 | ); 62 | }; 63 | 64 | export default GetIcon; 65 | -------------------------------------------------------------------------------- /src/cards/RandomMovieQuote.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const movieQuoteOriginalValue = { 7 | quote: "", 8 | role: "", 9 | show: "", 10 | }; 11 | 12 | const RandomMovieQuote = () => { 13 | const [isError, setIsError] = useState(false); 14 | const [movieQuote, setMovieQuote] = useState(movieQuoteOriginalValue); 15 | 16 | const resetMovieQuote = () => { 17 | setMovieQuote(movieQuoteOriginalValue); 18 | }; 19 | 20 | useEffect(() => { 21 | axios 22 | .get("https://movie-quote-api.herokuapp.com/v1/quote/") 23 | .then((res) => { 24 | const movieQuoteData = res.data; 25 | setMovieQuote({ 26 | quote: movieQuoteData.quote, 27 | role: movieQuoteData.role, 28 | show: movieQuoteData.show, 29 | }); 30 | setIsError(false); 31 | }) 32 | .catch((e) => { 33 | resetMovieQuote(); 34 | setIsError(true); 35 | }); 36 | }, []); 37 | 38 | return ( 39 |
40 |
41 |

Random Movie Quete

42 | 43 |
44 |

45 | {!isError ? ( 46 |
“ {movieQuote.quote} ”
47 | ) : ( 48 |
“ Something Error! ”
49 | )} 50 |

51 |

52 | {!isError && `${movieQuote.role} - ${movieQuote.show}`} 53 |

54 |
55 | 56 | 60 | 64 |
65 |
66 | ); 67 | }; 68 | 69 | export default RandomMovieQuote; 70 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 19 | 20 | 24 | 33 | Just calling random api 34 | 35 | 36 | 37 |
38 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/cards/ricknmortyApi.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const RicknmortyApi = () => { 6 | const [character, setCharacter] = useState(""); 7 | 8 | let getChar = () => { 9 | let random = Math.floor(Math.random() * 20); 10 | let pg = Math.floor(Math.random() * 34); 11 | 12 | fetch(`https://rickandmortyapi.com/api/character/?page=${pg}`) 13 | .then((res) => res.json()) 14 | .then((data) => { 15 | setCharacter(data.results[random]); 16 | }) 17 | .catch((err) => console.log(err)); 18 | }; 19 | let lc = { ...character.location }; 20 | return ( 21 | <> 22 |
23 |

Rick and Morty API

24 | 30 |
31 | {character.name} 38 |
39 |

{character.name}

40 |
    41 |
  • 42 | {character.status} 43 |
    • 44 |
  • 45 | {character.species} 46 |
    • 47 |
  • 48 | {lc.name} 49 |
    • 50 |
51 |
52 |
53 | 54 | 58 | 62 |
63 | 64 | ); 65 | }; 66 | 67 | export default RicknmortyApi; 68 | -------------------------------------------------------------------------------- /src/cards/randomPlaceholderImage.js: -------------------------------------------------------------------------------- 1 | import { React, useState, useEffect } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const RandomPlaceholderImage = () => { 7 | const [width, setWidth] = useState(""); 8 | const [height, setHeight] = useState(""); 9 | const [url, setUrl] = useState("https://picsum.photos/200/300"); 10 | 11 | useEffect(() => {}, [url]); 12 | 13 | const getImage = (e) => { 14 | e.preventDefault(); 15 | let newUrl = `http://picsum.photos/${width}/${height}`; 16 | axios 17 | .get(newUrl) 18 | .then((response) => { 19 | setUrl(newUrl); 20 | }) 21 | .catch((error) => { 22 | setUrl("https://picsum.photos/200/300"); 23 | }); 24 | }; 25 | 26 | return ( 27 |
28 |

29 | Random placeholder image Api 30 |

31 | Placeholder 32 |
33 | { 38 | setHeight(e.target.value); 39 | }} 40 | value={height} 41 | /> 42 | { 47 | setWidth(e.target.value); 48 | }} 49 | value={width} 50 | /> 51 | 58 |
59 | 63 | 64 |
65 | ); 66 | }; 67 | 68 | export default RandomPlaceholderImage; 69 | -------------------------------------------------------------------------------- /src/cards/bookDetails.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const BookDetails = (props) => { 6 | const [bookData, setBookData] = useState(null); 7 | const [isbn, setIsbn] = useState(""); 8 | 9 | const loadDataHandler = () => { 10 | fetch(`http://openlibrary.org/api/volumes/brief/isbn/${isbn}.json`) 11 | .then((response) => response.json()) 12 | .then((data) => { 13 | if (data !== []) { 14 | const keys = Object.keys(data.records); 15 | setBookData(data.records[keys].data); 16 | } 17 | }) 18 | .catch((error) => console.log(error)); 19 | }; 20 | 21 | return ( 22 |
23 |

Book Details by ISBN

24 |
25 |
26 | setIsbn(e.target.value)} 34 | /> 35 |
36 |
37 | 43 |
44 |
45 |

46 | Title : {bookData && bookData.title} 47 |

48 |

49 | {/* Zip Code : {"ff"} */} 50 | Publish Date : {bookData && bookData.publish_date} 51 |

52 |

53 | Number of Pages : {bookData && bookData.number_of_pages} 54 |

55 | 56 | 60 | 61 |
62 | ); 63 | }; 64 | 65 | export default BookDetails; 66 | -------------------------------------------------------------------------------- /src/cards/PasswordGenerator.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const PasswordGenerator = () => { 6 | const [length, setLength] = useState(""); 7 | const [password, setPassword] = useState(""); 8 | const [status, setStatus] = useState({ 9 | flag: false, 10 | message: "Enter the length of password", 11 | }); 12 | 13 | const btnHandler = async () => { 14 | setStatus("Loading..."); 15 | 16 | if (length >= 3) { 17 | let record = await fetch( 18 | "https://passwordinator.herokuapp.com/generate?num=true&char=true&caps=true&len=" + 19 | length 20 | ); 21 | record = await record.json(); 22 | setPassword(record.data); 23 | setStatus({ flag: true, message: record.data }); 24 | } else { 25 | setStatus({ 26 | flag: false, 27 | message: "Length must be a number & can't be less than 3", 28 | }); 29 | } 30 | }; 31 | 32 | const myFunction = () => { 33 | navigator.clipboard.writeText(password); 34 | }; 35 | 36 | return ( 37 |
38 |

Password Generator

39 | setLength(e.target.value)} 44 | placeholder="Length of Password" 45 | /> 46 | 52 | {status.flag && ( 53 | 59 | )} 60 |

{status.message}

61 |
62 | 66 | 70 |
71 | ); 72 | }; 73 | 74 | export default PasswordGenerator; 75 | -------------------------------------------------------------------------------- /src/cards/dogWithAnimeQuotes.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | import axios from "axios"; 5 | 6 | export const DogAnimeQuotes = (props) => { 7 | const [dogInfo, setDogInfo] = useState(null); 8 | const [animeQuotes, setAnimeQuotes] = useState("Im wise"); 9 | 10 | useEffect(() => { 11 | console.log("mounting dog with anime quotes ...."); 12 | fetchApi(); 13 | // console.log(quote); 14 | }, []); 15 | 16 | const fetchApi = async () => { 17 | console.log("im supposed to fetch APIs"); 18 | 19 | try { 20 | const response = await axios.get( 21 | "https://dog.ceo/api/breeds/image/random" 22 | ); 23 | console.log("dog image data -- ", response.data); 24 | setDogInfo(response.data.message); 25 | } catch (err) { 26 | console.log(err); 27 | } 28 | 29 | try { 30 | const response = await axios.get( 31 | "https://animechan.vercel.app/api/random" 32 | ); 33 | setAnimeQuotes(response.data.quote); 34 | console.log(response.data); 35 | } catch (err) { 36 | setAnimeQuotes("Look at me, so cute..."); 37 | console.log("error fetching anime quotes ", err); 38 | } 39 | }; 40 | 41 | return ( 42 |
43 |

Famous Dog Quotes

44 |
45 | dog 50 |
51 |
52 |

Doggo ~ "{animeQuotes}"

53 |
54 |
55 | 61 |
62 | 63 | 67 | 71 | 75 |
76 | ); 77 | }; 78 | -------------------------------------------------------------------------------- /src/cards/url-shortener.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const UrlShortener = () => { 6 | const [longUrl, setLongUrl] = useState(""); 7 | const [code, setCode] = useState(""); 8 | const [status, setStatus] = useState({ 9 | flag: false, 10 | message: "Enter the URL", 11 | }); 12 | 13 | const btnHandler = async () => { 14 | setStatus({ flag: false, message: "Loading..." }); 15 | let shortenUrl = await fetch("https://gotiny.cc/api", { 16 | method: "POST", 17 | headers: { "Content-Type": "application/json" }, 18 | body: JSON.stringify({ input: longUrl }), 19 | }); 20 | shortenUrl = await shortenUrl.json(); 21 | 22 | try { 23 | setCode(shortenUrl[0].code); 24 | setStatus({ flag: true, message: "gotiny.cc/" + shortenUrl[0].code }); 25 | } catch { 26 | setStatus({ 27 | flag: false, 28 | message: "I'm sure you haven't enetered the proper URL :(", 29 | }); 30 | } 31 | }; 32 | 33 | const myFunction = () => { 34 | let tempUrl = "gotiny.cc/" + code; 35 | navigator.clipboard.writeText(tempUrl); 36 | }; 37 | 38 | return ( 39 |
40 |

URL Shortener

41 | setLongUrl(e.target.value)} 46 | placeholder="Long URL" 47 | /> 48 | 54 | {status.flag && ( 55 | 61 | )} 62 |

{status.message}

63 |
64 | 68 | 72 |
73 | ); 74 | }; 75 | 76 | export default UrlShortener; 77 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/cards/MusicPlayer.js: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const MusicPlayer = () => { 6 | const [songName, setSongName] = useState(""); 7 | const [source, setSource] = useState(""); 8 | const audioElementRef = useRef(); 9 | const [status, setStatus] = useState({ 10 | flag: false, 11 | message: "Let's play your favourite song..", 12 | }); 13 | 14 | const playBtnHandler = async () => { 15 | setStatus({ flag: false, message: "Loading..." }); 16 | let audioUrl = await fetch("https://sudoic.herokuapp.com/sudoic", { 17 | method: "POST", 18 | headers: { 19 | "Content-type": "application/json", 20 | }, 21 | mode: "cors", 22 | body: JSON.stringify({ query: songName + " song lyrics" }), 23 | }); 24 | audioUrl = await audioUrl.json(); 25 | if (audioUrl.data) { 26 | setSource(audioUrl.data); 27 | setStatus({ flag: true, message: "" }); 28 | audioElementRef.current.play(); 29 | } else { 30 | setStatus({ flag: false, message: "Song not found :(" }); 31 | setSource(""); 32 | } 33 | }; 34 | 35 | return ( 36 |
37 |

Music Player (Sudoic API)

38 | setSongName(e.target.value)} 43 | placeholder="Type any song's name here..." 44 | /> 45 | 51 | {/* displaying audio element only when we have a source to play the audio from */} 52 | {status.flag ? ( 53 | 59 | ) : ( 60 |

{status.message}

61 | )} 62 |
63 | 67 | 71 |
72 | ); 73 | }; 74 | 75 | export default MusicPlayer; 76 | -------------------------------------------------------------------------------- /src/cards/githubUser.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import axios from "axios"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | import ApiInfo from "../components/apiInfo"; 5 | 6 | const GithubUser = () => { 7 | const [valid, setValid] = useState(false); 8 | const [user, setUser] = useState({}); 9 | 10 | const search = (username) => { 11 | if (username !== "") 12 | axios 13 | .get("https://api.github.com/users/" + username) 14 | .then((res) => { 15 | setUser(res.data); 16 | setValid(true); 17 | }) 18 | .catch((err) => setValid(false)); 19 | }; 20 | 21 | return ( 22 | <> 23 |
24 |

Search Random GitHub User

25 | search(e.target.value)} 29 | placeholder="Type any random name here..." 30 | /> 31 | 32 | {valid ? ( 33 |
34 |
35 | Profile 41 |
42 |
43 |

{user?.name}'s Details

44 |

{user?.bio}

45 | 52 | View Profile 53 | 54 |
55 |
56 | ) : ( 57 |
58 | )} 59 | 60 |
61 | 65 | 66 |
67 |
68 | 69 | ); 70 | }; 71 | 72 | export default GithubUser; 73 | -------------------------------------------------------------------------------- /src/cards/giphyapi.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | import axios from "axios"; 5 | 6 | const GiphyApi = () => { 7 | const key = process.env.REACT_APP_GIPHY_API_KEY; 8 | 9 | const [searchValue, setSearchValue] = useState(null); 10 | const [data, setData] = useState(null); 11 | const [loading, setLoading] = useState(false); 12 | const fetchGiphyApi = (search) => { 13 | if (!search) { 14 | return; 15 | } 16 | setLoading(true); 17 | axios 18 | .get(`https://api.giphy.com/v1/gifs/search?q=${search}&api_key=${key}`) 19 | .then((res) => { 20 | const { data } = res; 21 | setData(data); 22 | setLoading(false); 23 | }) 24 | .catch((err) => console.error(err)); 25 | }; 26 | 27 | return ( 28 |
29 |
30 |
31 |

Giphy API

32 | setSearchValue(e.target.value)} 39 | /> 40 | 46 |
47 |
48 | {loading && ( 49 |

Loading...

50 | )} 51 | {data && 52 | data.data.slice(0, 5).map((image, index) => { 53 | return ( 54 | 60 | ); 61 | })} 62 |
63 | 67 | 71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | export default GiphyApi; 78 | -------------------------------------------------------------------------------- /src/cards/Sunshinetime.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | export default function Sunshinetime(props) { 6 | const [lat, setLat] = useState(0.0); 7 | const [lng, setLng] = useState(0.0); 8 | const [latlng, setLatlng] = useState("0.0"); 9 | const [sunrise, setSunrise] = useState(""); 10 | const [sunset, setSunset] = useState(""); 11 | 12 | useEffect(() => { 13 | fetch( 14 | `https://api.sunrise-sunset.org/json?lat=${lat}&lng=${lng}&date=today&v=${latlng}` 15 | ) 16 | .then((res) => res.json()) 17 | .then((data) => { 18 | console.log(data); 19 | 20 | if ("results" in data) { 21 | setSunrise(data.results.sunrise); 22 | setSunset(data.results.sunset); 23 | } 24 | }) 25 | .catch((err) => { 26 | console.log("SHibe" + err); 27 | }); 28 | }, [latlng, lat, lng]); 29 | return ( 30 |
31 |
32 |

Sun shines

33 | 34 | 46 |
47 | 48 | 60 |
61 | 62 | 70 | 71 |

The Sun rises at: {sunrise}

72 |

The Sun sets at: {sunset}

73 | 74 | 78 | 82 |
83 |
84 | ); 85 | } 86 | -------------------------------------------------------------------------------- /src/cards/RandomAdage.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ApiInfo from "../components/apiInfo"; 3 | import ContributorInfo from "../components/contributorInfo"; 4 | 5 | const RandomAdage = () => { 6 | const [adage, setAdage] = useState(""); 7 | const [adageQuestion, setAdageQuestion] = useState(""); 8 | const [adageAnswer, setAdageAnswer] = useState(""); 9 | const [adageQuote, setAdageQuote] = useState(""); 10 | 11 | const getRandomAdage = () => { 12 | fetch("https://isvbscriptdead.com/api/fortune/") 13 | .then((response) => response.json()) 14 | .then((result) => { 15 | if (result[0] === "Q") { 16 | setAdage(""); 17 | setAdageQuote(""); 18 | let indexOfA = result.indexOf("A:"); 19 | setAdageQuestion(result.substring(0, indexOfA)); 20 | setAdageAnswer(result.substring(indexOfA)); 21 | } else if (result.includes("-- ")) { 22 | setAdageQuestion(""); 23 | setAdageAnswer(""); 24 | let indexOfDashDash = result.indexOf("-- "); 25 | setAdage(result.substring(0, indexOfDashDash)); 26 | setAdageQuote(result.substring(indexOfDashDash)); 27 | } else { 28 | setAdageQuestion(""); 29 | setAdageAnswer(""); 30 | setAdageQuote(""); 31 | setAdage(result); 32 | } 33 | }); 34 | }; 35 | 36 | useEffect(() => { 37 | getRandomAdage(); 38 | }, []); 39 | 40 | return ( 41 |
42 |

adage

43 | /ˈadɪdʒ/ 44 |

a proverb or short statement expressing a general truth.

45 |
46 |
47 |

{adage}

48 | {adageQuestion && ( 49 |

{adageQuestion}

50 | )} 51 | {adageAnswer && ( 52 |

{adageAnswer}

53 | )} 54 | {adageQuote && ( 55 |

{adageQuote}

56 | )} 57 |
58 | 65 |
66 | 67 | 71 | 72 | 76 |
77 | ); 78 | }; 79 | 80 | export default RandomAdage; 81 | -------------------------------------------------------------------------------- /src/cards/SimpleAdd.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const SimpleAdd = () => { 6 | const [num1, setNum1] = useState(0); 7 | const [num2, setNum2] = useState(0); 8 | 9 | const debouncedNum1 = useDebounce(num1, 500); 10 | const debouncedNum2 = useDebounce(num2, 500); 11 | 12 | const [result, setResult] = useState(0); 13 | 14 | useEffect(() => { 15 | if (debouncedNum1 === "" || debouncedNum2 === "") return; 16 | fetch( 17 | `https://simple-calculator-api.vercel.app/api/add?nums=${debouncedNum1},${debouncedNum2}` 18 | ) 19 | .then((r) => r.json()) 20 | .then((d) => { 21 | setResult(d.sum || 0); 22 | }); 23 | }, [debouncedNum1, debouncedNum2]); 24 | return ( 25 |
26 |

27 | Adding two numners 28 |

29 |
30 | Number 1 31 | { 36 | const num = 37 | e.target.value === "" ? "" : parseInt(e.target.value, 10); 38 | setNum1(num); 39 | }} 40 | /> 41 |
42 |
43 | Number 2 44 | { 49 | const num = 50 | e.target.value === "" ? "" : parseInt(e.target.value, 10); 51 | setNum2(num); 52 | }} 53 | /> 54 |
55 |
Result: {result}
56 | 57 | 61 | 65 |
66 | ); 67 | }; 68 | export default SimpleAdd; 69 | 70 | function useDebounce(value, delay) { 71 | // State and setters for debounced value 72 | const [debouncedValue, setDebouncedValue] = useState(value); 73 | useEffect( 74 | () => { 75 | // Update debounced value after delay 76 | const handler = setTimeout(() => { 77 | setDebouncedValue(value); 78 | }, delay); 79 | // Cancel the timeout if value changes (also on delay change or unmount) 80 | // This is how we prevent debounced value from updating if value is changed ... 81 | // .. within the delay period. Timeout gets cleared and restarted. 82 | return () => { 83 | clearTimeout(handler); 84 | }; 85 | }, 86 | [value, delay] // Only re-call effect if value or delay changes 87 | ); 88 | return debouncedValue; 89 | } 90 | -------------------------------------------------------------------------------- /src/cards/EvaluateMath.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import ContributorInfo from "../components/contributorInfo"; 3 | import ApiInfo from "../components/apiInfo"; 4 | 5 | const EvaluateMath = () => { 6 | const [expr, setExpr] = useState("1+2"); 7 | 8 | const debouncedExpr = useDebounce(expr, 500); 9 | 10 | const [result, setResult] = useState(0); 11 | const [error, setError] = useState(""); 12 | useEffect(() => { 13 | if (debouncedExpr === "") return; 14 | fetch( 15 | `https://simple-calculator-api.vercel.app/api/eval?expr=${encodeURIComponent( 16 | debouncedExpr 17 | )}` 18 | ) 19 | .then((r) => r.json()) 20 | .then((d) => { 21 | if ("result" in d) { 22 | setResult(d.result); 23 | setError(""); 24 | } else { 25 | setResult(null); 26 | setError(d.error); 27 | } 28 | }); 29 | }, [debouncedExpr]); 30 | return ( 31 |
32 |

33 | Adding two numners 34 |

35 |
36 | 37 | Expression (e.g. 1+2){" "} 38 | 44 | See docs here 45 | 46 | 47 | { 51 | setExpr(e.target.value); 52 | }} 53 | /> 54 |
55 | 56 |
Result: {result}
57 | {!!error &&
Error: {error}
} 58 | 59 | 63 | 67 |
68 | ); 69 | }; 70 | export default EvaluateMath; 71 | 72 | function useDebounce(value, delay) { 73 | // State and setters for debounced value 74 | const [debouncedValue, setDebouncedValue] = useState(value); 75 | useEffect( 76 | () => { 77 | // Update debounced value after delay 78 | const handler = setTimeout(() => { 79 | setDebouncedValue(value); 80 | }, delay); 81 | // Cancel the timeout if value changes (also on delay change or unmount) 82 | // This is how we prevent debounced value from updating if value is changed ... 83 | // .. within the delay period. Timeout gets cleared and restarted. 84 | return () => { 85 | clearTimeout(handler); 86 | }; 87 | }, 88 | [value, delay] // Only re-call effect if value or delay changes 89 | ); 90 | return debouncedValue; 91 | } 92 | -------------------------------------------------------------------------------- /src/cards/HaikuSyllableCounter.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import axios from "axios"; 3 | import ApiInfo from "../components/apiInfo"; 4 | import ContributorInfo from "../components/contributorInfo"; 5 | 6 | const HaikuSyllableCounter = () => { 7 | const [input, setInput] = useState(""); 8 | const [wordMeta, setWordMeta] = useState({}); 9 | const [syllables, setSyllables] = useState([0, 0, 0]); 10 | 11 | const recalculateSyllables = async () => { 12 | const inputArr = parseInput(input); 13 | let newWordMeta = { ...wordMeta }; 14 | let newLineSyllables = [0, 0, 0]; 15 | for (let i = 0; i < inputArr.length; i++) { 16 | const line = inputArr[i]; 17 | let lineSyllables = 0; 18 | for (const word of line) { 19 | let wordSyllables = 0; 20 | if (wordMeta[word]) { 21 | wordSyllables = wordMeta[word]; 22 | } else { 23 | wordSyllables = await getSyllables(word); 24 | newWordMeta = { ...newWordMeta, [word]: wordSyllables }; 25 | } 26 | lineSyllables += wordSyllables; 27 | } 28 | newLineSyllables[i] = lineSyllables; 29 | } 30 | setSyllables(newLineSyllables); 31 | setWordMeta(newWordMeta); 32 | }; 33 | 34 | return ( 35 |
36 |

Haiku Syllable Counter

37 |