Merge pull request #275 from ThisIsSahaj/CoinGecko-Api

Added CRYPTO COINS API - CoinGecko
dishamodi0910 · Jun 23, 2024 · 4484884 · 4484884
2 parents 8033e19 + e3f9848
commit 4484884
Show file tree

Hide file tree

Showing 6 changed files with 242 additions and 0 deletions.
diff --git a/Existing_API_Collection/CoinGecko_API/README.md b/Existing_API_Collection/CoinGecko_API/README.md
@@ -0,0 +1,28 @@
+# CoinGecko API
+Welcome to the Coin Gecko API! This API is built to provide you with comprehensive information about top 100 Cryptocurrencies.
+
+## Features
+- **Fetch Detailed Information about a Crypto Coin:** Retrieve comprehensive data about any of the top 100 coins, including their icon, symbol, price, market capital and 24 hour change in %
+- **Simple and Easy-to-Use Interface:** Designed with utmost simplicity, it has an easy-to-use interface.
+- **Search Functionality:** Easily search for Crypto Coins by name to retrieve information quickly.
+- **Currency Selector:** Easily switch between USD or INR
+
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+- API ( for fetching data )
+
+# API Integration
+This application uses `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd` to fetch the data.
+
+## Installation
+To set up the Country API locally, follow these steps:
+
+- Clone the repository
+- Switch to Existing_API_Collection folder `cd Existing_API_Collection`
+- Now switch to CoinGecko_API folder `cd CoinGecko_API`
+- Run command `.\/index.html`
+
+## Screenshots
+![Screenshot](/Existing_API_Collection/CoinGecko_API/assets/images/CoinGecko_API.png)
diff --git a/Existing_API_Collection/CoinGecko_API/assets/images/CoinGecko_API.png b/Existing_API_Collection/CoinGecko_API/assets/images/CoinGecko_API.png
diff --git a/Existing_API_Collection/CoinGecko_API/index.html b/Existing_API_Collection/CoinGecko_API/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cryptocurrency Coins</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <input type="text" id="searchBar" onkeyup="searchCoins()" placeholder="Search for coins..">
+            <select id="currencySelector" onchange="changeCurrency()">
+                <option value="usd">USD</option>
+                <option value="inr">INR</option>
+            </select>
+        </div>
+        <table id="cryptoTable">
+            <thead>
+                <tr>
+                    <th>Icon</th>
+                    <th>Coin</th>
+                    <th>Current Price</th>
+                    <th>Market Cap</th>
+                    <th>% Change (24h)</th>
+                </tr>
+            </thead>
+            <tbody>
+
+            </tbody>
+        </table>
+        <div id="pagination"></div>
+    </div>
+    <div class="footer">
+        Made with ❤️ by <a href="https://github.com/ThisIsSahaj">ThisIsSahaj</a>
+    </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/CoinGecko_API/script.js b/Existing_API_Collection/CoinGecko_API/script.js
@@ -0,0 +1,86 @@
+let allCoins = [];
+let displayedCoins = [];
+const rowsPerPage = 10;
+let currentPage = 1;
+let currency = 'usd';
+const currencySymbols = {
+    usd: '$',
+    inr: '₹'
+};
+
+async function fetchCoins() {
+    const response = await fetch(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=${currency}`);
+    allCoins = await response.json();
+    displayedCoins = [...allCoins];
+    displayCoins();
+}
+
+function displayCoins() {
+    const tableBody = document.getElementById('cryptoTable').getElementsByTagName('tbody')[0];
+    tableBody.innerHTML = '';
+    const start = (currentPage - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+    const paginatedCoins = displayedCoins.slice(start, end);
+
+    paginatedCoins.forEach(coin => {
+        const row = tableBody.insertRow();
+        const cellIcon = row.insertCell(0);
+        const img = document.createElement('img');
+        img.src = coin.image;
+        img.alt = coin.name;
+        img.width = 20;
+        img.height = 20;
+        cellIcon.appendChild(img);
+
+        const coinNameSymbol = `${coin.name} ⁌ ${coin.symbol.toUpperCase()}`;
+        row.insertCell(1).innerText = coinNameSymbol;
+        row.insertCell(2).innerText = `${currencySymbols[currency]}${coin.current_price.toLocaleString()}`;
+        row.insertCell(3).innerText = `${currencySymbols[currency]}${coin.market_cap.toLocaleString()}`;
+
+        const change24h = coin.price_change_percentage_24h.toFixed(2);
+        const cellChange = row.insertCell(4);
+        cellChange.innerText = `${change24h}%`;
+        cellChange.style.color = change24h >= 0 ? '#07df07' : '#df2707';
+    });
+
+    setupPagination();
+}
+
+function setupPagination() {
+    const pagination = document.getElementById('pagination');
+    pagination.innerHTML = '';
+    const pageCount = Math.ceil(displayedCoins.length / rowsPerPage);
+
+    for (let i = 1; i <= pageCount; i++) {
+        const pageLink = document.createElement('span');
+        pageLink.innerText = i;
+        pageLink.className = 'page-link';
+        if (i === currentPage) {
+            pageLink.style.fontWeight = 'bold';
+        }
+        pageLink.addEventListener('click', () => {
+            currentPage = i;
+            displayCoins();
+        });
+        pagination.appendChild(pageLink);
+    }
+}
+
+function searchCoins() {
+    const input = document.getElementById('searchBar').value.toUpperCase();
+    if (input === '') {
+        displayedCoins = [...allCoins];
+    } else {
+        displayedCoins = allCoins.filter(coin => coin.name.toUpperCase().includes(input));
+    }
+    currentPage = 1;
+    displayCoins();
+}
+
+function changeCurrency() {
+    currency = document.getElementById('currencySelector').value;
+    fetchCoins();
+}
+
+// Fetch coins on page load
+fetchCoins();
diff --git a/Existing_API_Collection/CoinGecko_API/style.css b/Existing_API_Collection/CoinGecko_API/style.css
@@ -0,0 +1,87 @@
+body {
+    background-color: #121212;
+    color: #ffffff;
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    flex-direction: column;
+}
+.container {
+    width: 60%;
+    border-radius: 6px;
+    padding: 10px;
+    background-color: #1e1e1e;
+    position: relative;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+th, td {
+    padding: 8px;
+}
+th {
+    text-align: left;
+}
+td {
+    background-color: transparent;
+    border-bottom: 2px solid #2b2b2b;
+    height: 40px;
+}
+#searchBar {
+    width: 70%;
+    height: 30px;
+    font-size: medium;
+    border: none;
+    border-radius: 6px;
+    padding: 10px;
+    color: #ffffff;
+    background-color: #2b2b2b;
+    margin: 0 auto;
+    display: block;
+}
+#currencySelector {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    padding: 10px;
+    background-color: #2b2b2b;
+    color: #ffffff;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+}
+#pagination {
+    margin-top: 20px;
+    text-align: center;
+}
+.page-link {
+    cursor: pointer;
+    padding: 10px;
+    margin: 5px;
+    display: inline-block;
+    background-color: #2b2b2b;
+    border-radius: 6px;
+}
+.page-link:hover {
+    background-color: #333;
+}
+.footer {
+    margin-top: 20px;
+    text-align: center;
+    color: #ffffff;
+}
+.footer a {
+    color: orange;
+    font-style: italic;
+    text-decoration: none;
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -24,5 +24,6 @@
 |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|
 |[Books API](./Books_API/)| The Google Books API allows developers to access a wealth of information about books, including their titles, authors, publishers, publication dates, and descriptions. |
 |[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency|
+|[CoinGecko API](./CoinGecko_API/)| This API is use to fetch Top 100 Crypto Currencies and display comprehensive data about them with market capital, price etc.|
 |[Gemini API](./Gemini_API/)| The Google Gemini API is a powerful tool that leverages cutting-edge generative AI models to assist developers and businesses in various tasks. It provides functionalities such as text generation, content creation, and creative assistance.|
 |[Brewery_API](./Brewery_API/)| Brewery Finder API is designed to help you explore the world of breweries by providing detailed information about various breweries across different states.|