diff --git a/Existing_API_Collection/CoinGecko_API/README.md b/Existing_API_Collection/CoinGecko_API/README.md new file mode 100644 index 0000000..a4417d5 --- /dev/null +++ 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) \ No newline at end of file diff --git a/Existing_API_Collection/CoinGecko_API/assets/images/CoinGecko_API.png b/Existing_API_Collection/CoinGecko_API/assets/images/CoinGecko_API.png new file mode 100644 index 0000000..9889ae8 Binary files /dev/null and b/Existing_API_Collection/CoinGecko_API/assets/images/CoinGecko_API.png differ diff --git a/Existing_API_Collection/CoinGecko_API/index.html b/Existing_API_Collection/CoinGecko_API/index.html new file mode 100644 index 0000000..f9bb3d0 --- /dev/null +++ b/Existing_API_Collection/CoinGecko_API/index.html @@ -0,0 +1,40 @@ + + + + + + Cryptocurrency Coins + + + +
+
+ + +
+ + + + + + + + + + + + + +
IconCoinCurrent PriceMarket Cap% Change (24h)
+ +
+
+ Made with ❤️ by ThisIsSahaj +
+ + + + diff --git a/Existing_API_Collection/CoinGecko_API/script.js b/Existing_API_Collection/CoinGecko_API/script.js new file mode 100644 index 0000000..eebeba0 --- /dev/null +++ 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(); \ No newline at end of file diff --git a/Existing_API_Collection/CoinGecko_API/style.css b/Existing_API_Collection/CoinGecko_API/style.css new file mode 100644 index 0000000..c8f93e5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md index 58c19cd..99e707d 100644 --- 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.|