diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/.eslintrc.cjs b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/.eslintrc.cjs new file mode 100644 index 00000000..3e212e1d --- /dev/null +++ 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 new file mode 100644 index 00000000..3b19448e --- /dev/null +++ b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/README.md @@ -0,0 +1,69 @@ +

đŸ’Ĩ CRYPTOCURRENCY FINDER đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![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) +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+ +

This project is a react.js project that displays the different crypto coins.

+
+ + + + +## :zap: How to run it? 🕹ī¸ + + +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 📸 + + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Sai Manjari đŸ‘Ļ

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

\ No newline at end of file diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/index.html b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/index.html new file mode 100644 index 00000000..0c589ecc --- /dev/null +++ b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/package.json b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/package.json new file mode 100644 index 00000000..2277c262 --- /dev/null +++ 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 new file mode 100644 index 00000000..f4a6b4a4 Binary files /dev/null and b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/screenshot.webp differ diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.css b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.css new file mode 100644 index 00000000..f3ea6061 --- /dev/null +++ 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 new file mode 100644 index 00000000..af07c4c6 --- /dev/null +++ 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 ( +
+

Cryptocurrency Finder App

+ setSearch(e.target.value.toLowerCase())} + /> + + + + + + + + + + + + + {crypto + .filter((val) => val.name.toLowerCase().includes(search)) + .map((val, id) => ( + + + + + + + + + ))} + +
RankNameSymbolMarket CapPriceAvailable Supply
{id+1} + logo +

{val.name}

+ 		{val.symbol.toUpperCase()}â‚Ŧ {val.market_cap.toLocaleString()}â‚Ŧ {val.current_price.toLocaleString()}{val.circulating_supply.toLocaleString()}
+
+ ); +} + +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 new file mode 100644 index 00000000..51a8c582 --- /dev/null +++ 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( + + + , +) diff --git a/React-JS-Projects/Intermediate/Cryptocurrency-Finder/vite.config.js b/React-JS-Projects/Intermediate/Cryptocurrency-Finder/vite.config.js new file mode 100644 index 00000000..5a33944a --- /dev/null +++ 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 index 50e785e6..5e185633 100644 --- 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) | diff --git a/database/react.json b/database/react.json index 4cde53d2..f54b8c39 100644 --- 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",