Add files via upload

Kushal997-das · May 13, 2024 · 20f0b9e · 20f0b9e
1 parent 1949581
commit 20f0b9e
Show file tree

Hide file tree

Showing 22 changed files with 29,303 additions and 0 deletions.
diff --git a/Web Development/Intermediate/Random-GIF/package-lock.json b/Web Development/Intermediate/Random-GIF/package-lock.json
diff --git a/Web Development/Intermediate/Random-GIF/package.json b/Web Development/Intermediate/Random-GIF/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "axios": "^1.4.0",
+    "it": "^1.1.1"
+  }
+}
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/README.md b/Web Development/Intermediate/Random-GIF/random-gif-starter/README.md
@@ -0,0 +1 @@
+# random-gifs
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/package-lock.json b/Web Development/Intermediate/Random-GIF/random-gif-starter/package-lock.json
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/package.json b/Web Development/Intermediate/Random-GIF/random-gif-starter/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "random-gif",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^1.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.2.7"
+  }
+}
diff --git a/...nt/Intermediate/Random-GIF/random-gif-starter/public/android-chrome-192x192.png b/...nt/Intermediate/Random-GIF/random-gif-starter/public/android-chrome-192x192.png
diff --git a/...nt/Intermediate/Random-GIF/random-gif-starter/public/android-chrome-512x512.png b/...nt/Intermediate/Random-GIF/random-gif-starter/public/android-chrome-512x512.png
diff --git a/...elopment/Intermediate/Random-GIF/random-gif-starter/public/apple-touch-icon.png b/...elopment/Intermediate/Random-GIF/random-gif-starter/public/apple-touch-icon.png
diff --git a/...Development/Intermediate/Random-GIF/random-gif-starter/public/favicon-16x16.png b/...Development/Intermediate/Random-GIF/random-gif-starter/public/favicon-16x16.png
diff --git a/...Development/Intermediate/Random-GIF/random-gif-starter/public/favicon-32x32.png b/...Development/Intermediate/Random-GIF/random-gif-starter/public/favicon-32x32.png
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/public/favicon.ico b/Web Development/Intermediate/Random-GIF/random-gif-starter/public/favicon.ico
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/public/index.html b/Web Development/Intermediate/Random-GIF/random-gif-starter/public/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Random GIF</title>
+
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/public/robots.txt b/Web Development/Intermediate/Random-GIF/random-gif-starter/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/public/site.webmanifest b/Web Development/Intermediate/Random-GIF/random-gif-starter/public/site.webmanifest
@@ -0,0 +1,11 @@
+{
+  "name": "Random GIF",
+  "short_name": "Random GIF",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/App.jsx b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/App.jsx
@@ -0,0 +1,18 @@
+import Random from "./components/Random"
+import Tag from "./components/Tag";
+
+export default function App() {
+  return (
+
+    <div className="w-full h-screen flex flex-col background relative overflow-x-hidden items-center">
+      <h1 className=" bg-white rounded-lg w-11/12 text-center mt-[40px]
+       px-10 py-2 text-4xl font-bold ">
+      RANDOM GIFS</h1>
+      <div className="flex flex-col w-full items-center gap-y-10 mt-[30px]">
+        <Random />
+        <Tag />
+      </div>
+    </div>
+
+  );
+}
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/components/Random.js b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/components/Random.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import axios from 'axios';
+import { useEffect } from 'react';
+import Spinner from './Spinner';
+import useGif from '../hooks/useGif';
+
+
+const API_KEY = process.env.REACT_APP_GIPHY_API_KEY;
+
+const Random = () => {
+
+
+  const {gif, loading, fetchData} = useGif();
+
+
+  return (
+    <div className='w-1/2  bg-green-500 rounded-lg border border-black
+    flex flex-col items-center gap-y-5 mt-[15px]'>
+
+      <h1 className='mt-[15px] text-2xl underline uppercase font-bold'> A Random Gif</h1>
+
+    {
+        loading ? (<Spinner/>) : (<img src= {gif} width="450" />)
+    }
+
+
+
+      <button onClick={() => fetchData()}
+      className="w-10/12 bg-yellow-500 text-lg py-2 rounded-lg mb-[20px]">
+
+       Generate
+
+      </button>
+
+    </div>
+  )
+}
+
+export default Random
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/components/Spinner.js b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/components/Spinner.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Spinner = () => {
+  return (
+    <div>
+      <div className='spinner'></div>
+    </div>
+  )
+}
+
+export default Spinner
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/components/Tag.js b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/components/Tag.js
@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import axios from 'axios';
+import { useEffect } from 'react';
+import Spinner from './Spinner';
+import useGif from '../hooks/useGif';
+
+
+const API_KEY = process.env.REACT_APP_GIPHY_API_KEY;
+
+const Tag = () => {
+  const [tag, setTag] = useState('car');
+
+  const {gif, loading, fetchData} = useGif(tag);
+
+
+  return (
+    <div className='w-1/2  bg-blue-500 rounded-lg border border-black
+    flex flex-col items-center gap-y-5 mt-[15px]'>
+
+      <h1 className='mt-[15px] text-2xl underline uppercase font-bold'> Random {tag} Gif</h1>
+
+    {
+        loading ? (<Spinner/>) : (<img src= {gif} width="450" />)
+    }
+
+      <input 
+        className='w-10/12 text-lg py-2 rounded-lg mb-[3px] text-center'
+        onChange={(event) =>  setTag(event.target.value)}
+        value={tag}
+      />
+
+
+      <button onClick={() => fetchData(tag)}
+      className="w-10/12 bg-yellow-500 text-lg py-2 rounded-lg mb-[20px]">
+
+       Generate
+
+      </button>
+
+    </div>
+  )
+}
+
+export default Tag
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/hooks/useGif.js b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/hooks/useGif.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import axios from 'axios';
+import { useEffect } from 'react';
+import { useState } from 'react';
+
+
+const API_KEY = process.env.REACT_APP_GIPHY_API_KEY;
+const url = `https://api.giphy.com/v1/gifs/random?api_key=${API_KEY}`;
+
+
+const useGif = (tag) => {
+    const [gif, setGif] = useState('');
+    const [loading, setLoading] = useState('false');
+
+
+    async function fetchData(tag) {
+      setLoading(true);
+
+      const {data} = await axios.get(tag ? `${url}&tag=${tag}`  : url);
+      const imageSource = data.data.images.downsized_large.url;
+      setGif(imageSource);
+      setLoading(false);
+    }
+
+    useEffect( () => {
+      fetchData('car');
+    },[] )
+
+    return {gif,loading, fetchData};
+}
+
+export default useGif
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/index.css b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/index.css
@@ -0,0 +1,28 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* css background-image generated using https://10015.io/tools/css-background-pattern-generator */
+.background {
+  background-image: radial-gradient(#ffffff 2.5px, transparent 2.5px), radial-gradient(#ffffff 2.5px, transparent 2.5px);
+  background-size: 36px 36px;
+  background-position: 0 0, 18px 18px;
+  background-color: #b1d2ff;
+}
+
+
+.spinner {
+   width: 56px;
+   height: 56px;
+   border-radius: 50%;
+   background: radial-gradient(farthest-side,#474bff 94%,#0000) top/9px 9px no-repeat,
+          conic-gradient(#0000 30%,#474bff);
+   -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 9px),#000 0);
+   animation: spinner-c7wet2 1s infinite linear;
+}
+
+@keyframes spinner-c7wet2 {
+   100% {
+      transform: rotate(1turn);
+   }
+}
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/src/index.js b/Web Development/Intermediate/Random-GIF/random-gif-starter/src/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/Web Development/Intermediate/Random-GIF/random-gif-starter/tailwind.config.js b/Web Development/Intermediate/Random-GIF/random-gif-starter/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};