Avdhesh-Varshney · Avdhesh-Varshney · May 31, 2024 · May 29, 2024 · May 30, 2024 · May 30, 2024
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/.eslintrc.cjs b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/README.md b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/README.md
@@ -0,0 +1,69 @@
+<h1 align='center'><b>💥 CRYPTOCURRENCY FINDER  💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+  ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>This project is a react.js project that displays the different crypto coins.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+To run this project locally, follow these steps:
+
+1. Fork the repository.
+
+2. Clone the repository to your local computer:
+    git clone https://github.com/your-username/Cryptocurrency-Finder-Clone.git
+
+3. Open the project folder in your preferred code editor, now you can view website in live.
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+<img src='./screenshot.webp'>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Sai Manjari</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/saimanjari777/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Saimanjari777'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/index.html b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/package.json b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "cryptocurrency-finder",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/screenshot.webp b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/screenshot.webp
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.css b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.css
@@ -0,0 +1,44 @@
+@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');
+body{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 5px;
+  font-family: 'open-sans', serif;
+  color: #F5F7F8;
+  background-color: #45474B;
+  text-align: center;
+}
+.title{
+  color: #F4CE14;
+  font-style: italic;
+}
+table{
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  width: 1000px;
+  border-collapse: collapse;
+}
+input[type="text"]{
+  width: 500px;
+  padding: 10px 10px;
+  font-size: 15px;
+  color: #45474B;
+  border-radius: 15px;
+  outline: none;
+  box-sizing: border-box;
+}
+::placeholder{
+  font-size: 15px;
+}
+.id,td{
+  padding: 8px;
+  border-bottom: 1px solid #F5F7F8;
+}
+th{
+  font-size: 1.3rem;
+  background-color: #F4CE14;
+  padding: 5px;
+}
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.jsx b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.jsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import './App.css';
+import Axios from 'axios';
+
+function App() {
+  const [search, setSearch] = useState('');
+  const [crypto, setCrypto] = useState([]);
+
+  useEffect(() => {
+    Axios.get('https://api.coingecko.com/api/v3/coins/markets', {
+      params: {
+        vs_currency: 'eur',
+        order: 'market_cap_desc',
+        per_page: 200,
+        page: 1,
+        sparkLine: false,
+      },
+    })
+      .then((res) => {
+        setCrypto(res.data);
+      })
+  }, []);
+  return (
+    <div className="app">
+      <h1 className="title">Cryptocurrency Finder App</h1>
+      <input
+        type="text"
+        placeholder="Enter Small Letters..."
+        onChange={(e) => setSearch(e.target.value.toLowerCase())} 
+      />
+      <table>
+        <thead>
+          <tr>
+            <th className='th'>Rank</th>
+            <th className='th'>Name</th>
+            <th className='th'>Symbol</th>
+            <th className='th'>Market Cap</th>
+            <th className='th'>Price</th>
+            <th className='th'>Available Supply</th>
+          </tr>
+        </thead>
+        <tbody>
+          {crypto
+            .filter((val) => val.name.toLowerCase().includes(search))
+            .map((val, id) => (
+              <tr key={id} className="id">
+                <td className="rank">{id+1}</td>
+                <td className="logo">
+                  <img src={val.image} alt="logo" width="30px" />
+                  <p>{val.name}</p>
+                </td>
+                <td className="Symbol">{val.symbol.toUpperCase()}</td>
+                <td>€ {val.market_cap.toLocaleString()}</td>
+                <td>€ {val.current_price.toLocaleString()}</td>
+                <td>{val.circulating_supply.toLocaleString()}</td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default App;
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/main.jsx b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/vite.config.js b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/React-JS-Projects/README.md b/React-JS-Projects/README.md
@@ -28,7 +28,7 @@
 |   1   | [Password Generator](./Basic/Password-Generator) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |   2   | [To Do List](./Basic/ToDo-List) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
 |   3   | [Weather App](./Basic/Weather-App) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
-
+|   4   | [Cryptocurrency Finder](./Intermediate/Cryptocurrency-Finder/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
 
 
 </div>

diff --git a/database/react.json b/database/react.json
@@ -1,4 +1,9 @@
 [
+	{
+		"tag": "Intermediate",
+		"title": "Cryptocurrency Finder",
+		"description": "Cryptocurrency Finder is a React-JS project which displays different crypto coins using API."
+	},
 	{
 		"tag": "Basic",
 		"title": "To Do List",