-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #208 from Saimanjari777/crypto
Cryptocurrency Finder added
- Loading branch information
Showing
11 changed files
with
260 additions
and
1 deletion.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
React-JS-Projects/Intermediate/Cryptocurrency-Finder/.eslintrc.cjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }, | ||
| ], | ||
| }, | ||
| } |
69 changes: 69 additions & 0 deletions
69
React-JS-Projects/Intermediate/Cryptocurrency-Finder/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'> | ||
|
|
||
|  | ||
|  | ||
|  | ||
|  | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :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'> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <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 ❤️ by 🌟 this repository!</h3> |
13 changes: 13 additions & 0 deletions
13
React-JS-Projects/Intermediate/Cryptocurrency-Finder/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
27 changes: 27 additions & 0 deletions
27
React-JS-Projects/Intermediate/Cryptocurrency-Finder/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
Binary file not shown.
44 changes: 44 additions & 0 deletions
44
React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
64 changes: 64 additions & 0 deletions
64
React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/App.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
9 changes: 9 additions & 0 deletions
9
React-JS-Projects/Intermediate/Cryptocurrency-Finder/src/main.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>, | ||
| ) |
7 changes: 7 additions & 0 deletions
7
React-JS-Projects/Intermediate/Cryptocurrency-Finder/vite.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { defineConfig } from 'vite' | ||
| import react from '@vitejs/plugin-react' | ||
|
|
||
| // https://vitejs.dev/config/ | ||
| export default defineConfig({ | ||
| plugins: [react()], | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters