diff --git a/index.html b/index.html
index 273532c..0d02825 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,9 @@
About the Repository
Crypto Price Predictor
Predicted Price:
diff --git a/script.js b/script.js
index 6965cfc..8367ef1 100644
--- a/script.js
+++ b/script.js
@@ -1,99 +1,127 @@
-document.getElementById("predict-btn").addEventListener("click", function() {
- let cryptoInput = document.getElementById("crypto").value.toUpperCase();
-
- // A map of symbols to their corresponding API names
- const cryptoMap = {
- // Major cryptocurrencies
- 'BTC': 'bitcoin',
- 'ETH': 'ethereum',
- 'USDT': 'tether',
- 'BNB': 'binancecoin',
- 'USDC': 'usd-coin',
- 'XRP': 'ripple',
- 'DOGE': 'dogecoin',
- 'ADA': 'cardano',
- 'SOL': 'solana',
- 'DOT': 'polkadot',
- 'MATIC': 'matic-network',
- 'SHIB': 'shiba-inu',
- 'LTC': 'litecoin',
- 'TRX': 'tron',
- 'AVAX': 'avalanche-2',
- 'ATOM': 'cosmos',
- 'LINK': 'chainlink',
- 'XMR': 'monero',
- 'BCH': 'bitcoin-cash',
- 'ALGO': 'algorand',
- 'ICP': 'internet-computer',
- 'VET': 'vechain',
- 'FIL': 'filecoin',
- 'NEAR': 'near',
- 'HBAR': 'hedera-hashgraph',
-
- // Stablecoins
- 'DAI': 'dai',
- 'BUSD': 'binance-usd',
- 'PAX': 'paxos-standard',
-
- // DeFi tokens
- 'UNI': 'uniswap',
- 'AAVE': 'aave',
- 'SUSHI': 'sushi',
- 'COMP': 'compound-governance-token',
- 'YFI': 'yearn-finance',
-
- // Layer 2 solutions and scaling
- 'LRC': 'loopring',
- 'ZRX': '0x',
- 'OMG': 'omisego',
-
- // NFT and metaverse tokens
- 'MANA': 'decentraland',
- 'SAND': 'the-sandbox',
- 'ENJ': 'enjincoin',
- 'AXS': 'axie-infinity',
- 'GALA': 'gala',
-
- // Privacy coins
- 'ZEC': 'zcash',
- 'DASH': 'dash',
+// A map of symbols to their corresponding API names
+const cryptoMap = {
+ // Major cryptocurrencies
+ 'BTC': 'bitcoin',
+ 'ETH': 'ethereum',
+ 'USDT': 'tether',
+ 'BNB': 'binancecoin',
+ 'USDC': 'usd-coin',
+ 'XRP': 'ripple',
+ 'DOGE': 'dogecoin',
+ 'ADA': 'cardano',
+ 'SOL': 'solana',
+ 'DOT': 'polkadot',
+ 'MATIC': 'matic-network',
+ 'SHIB': 'shiba-inu',
+ 'LTC': 'litecoin',
+ 'TRX': 'tron',
+ 'AVAX': 'avalanche-2',
+ 'ATOM': 'cosmos',
+ 'LINK': 'chainlink',
+ 'XMR': 'monero',
+ 'BCH': 'bitcoin-cash',
+ 'ALGO': 'algorand',
+ 'ICP': 'internet-computer',
+ 'VET': 'vechain',
+ 'FIL': 'filecoin',
+ 'NEAR': 'near',
+ 'HBAR': 'hedera-hashgraph',
+
+ // Stablecoins
+ 'DAI': 'dai',
+ 'BUSD': 'binance-usd',
+ 'PAX': 'paxos-standard',
- // Other popular tokens
- 'FTM': 'fantom',
- 'GRT': 'the-graph',
- '1INCH': '1inch',
- 'CHZ': 'chiliz',
- 'BAT': 'basic-attention-token',
- 'CRV': 'curve-dao-token',
- 'KSM': 'kusama',
- 'QTUM': 'qtum',
- 'ZIL': 'zilliqa',
- 'EGLD': 'elrond-erd-2',
- 'HOT': 'holotoken',
- 'THETA': 'theta-token',
- 'HNT': 'helium',
- 'SNX': 'synthetix-network-token',
- 'RUNE': 'thorchain',
- 'XLM': 'stellar',
- 'REN': 'ren',
- 'FTT': 'ftx-token',
- 'RVN': 'ravencoin',
- 'KAVA': 'kava',
- 'CRO': 'crypto-com-chain',
- 'MIOTA': 'iota',
- 'ETC': 'ethereum-classic',
+ // DeFi tokens
+ 'UNI': 'uniswap',
+ 'AAVE': 'aave',
+ 'SUSHI': 'sushi',
+ 'COMP': 'compound-governance-token',
+ 'YFI': 'yearn-finance',
- // Meme coins
- 'BABYDOGE': 'baby-doge-coin',
- 'SAFEMOON': 'safemoon',
- 'ELON': 'dogelon-mars',
-
- // Add more symbols and tokens as needed
- };
+ // Layer 2 solutions and scaling
+ 'LRC': 'loopring',
+ 'ZRX': '0x',
+ 'OMG': 'omisego',
+
+ // NFT and metaverse tokens
+ 'MANA': 'decentraland',
+ 'SAND': 'the-sandbox',
+ 'ENJ': 'enjincoin',
+ 'AXS': 'axie-infinity',
+ 'GALA': 'gala',
+
+ // Privacy coins
+ 'ZEC': 'zcash',
+ 'DASH': 'dash',
+
+ // Other popular tokens
+ 'FTM': 'fantom',
+ 'GRT': 'the-graph',
+ '1INCH': '1inch',
+ 'CHZ': 'chiliz',
+ 'BAT': 'basic-attention-token',
+ 'CRV': 'curve-dao-token',
+ 'KSM': 'kusama',
+ 'QTUM': 'qtum',
+ 'ZIL': 'zilliqa',
+ 'EGLD': 'elrond-erd-2',
+ 'HOT': 'holotoken',
+ 'THETA': 'theta-token',
+ 'HNT': 'helium',
+ 'SNX': 'synthetix-network-token',
+ 'RUNE': 'thorchain',
+ 'XLM': 'stellar',
+ 'REN': 'ren',
+ 'FTT': 'ftx-token',
+ 'RVN': 'ravencoin',
+ 'KAVA': 'kava',
+ 'CRO': 'crypto-com-chain',
+ 'MIOTA': 'iota',
+ 'ETC': 'ethereum-classic',
+
+ // Meme coins
+ 'BABYDOGE': 'baby-doge-coin',
+ 'SAFEMOON': 'safemoon',
+ 'ELON': 'dogelon-mars',
+ // Add more symbols and tokens as needed
+};
+
+const cryptoInput = document.getElementById('crypto');
+const suggestionsBox = document.getElementById('crypto-suggestions');
+
+cryptoInput.addEventListener('input', function() {
+ const inputValue = cryptoInput.value.toUpperCase();
+ suggestionsBox.innerHTML = '';
+
+ const filteredCryptos = Object.keys(cryptoMap).filter(crypto => crypto.includes(inputValue));
+
+ if (inputValue && filteredCryptos.length > 0) {
+ suggestionsBox.style.display = 'block';
+ filteredCryptos.forEach(crypto => {
+ const suggestionItem = document.createElement('div');
+ suggestionItem.textContent = crypto;
+ suggestionItem.addEventListener('click', function() {
+ cryptoInput.value = crypto;
+ suggestionsBox.style.display = 'none';
+ });
+ suggestionsBox.appendChild(suggestionItem);
+ });
+ } else {
+ suggestionsBox.style.display = 'none';
+ }
+});
+
+document.addEventListener('click', function(event) {
+ if (!event.target.closest('#crypto-form')) {
+ suggestionsBox.style.display = 'none';
+ }
+});
- // Convert the input to either the API-friendly name or keep it as it is
- let crypto = cryptoMap[cryptoInput] || cryptoInput.toLowerCase();
+document.getElementById('predict-btn').addEventListener('click', function() {
+ const cryptoInputValue = cryptoInput.value.toUpperCase();
+ const crypto = cryptoMap[cryptoInputValue];
if (crypto) {
fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${crypto}&vs_currencies=usd`)
diff --git a/styles.css b/styles.css
index 3be2eda..d44cd30 100644
--- a/styles.css
+++ b/styles.css
@@ -23,6 +23,7 @@ section {
#crypto-form {
margin-top: 20px;
+ position: relative;
}
input {
@@ -51,3 +52,31 @@ button:hover {
font-size: 24px;
color: #007BFF;
}
+#crypto-suggestions {
+ display: none;
+ position: absolute;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background-color: white;
+ max-height: 150px;
+ overflow-y: auto;
+ width: 243px;
+ left: 31.5rem;
+ z-index: 1000;
+}
+
+#crypto-suggestions div {
+ padding: 10px;
+ cursor: pointer;
+}
+
+#crypto-suggestions div:hover {
+ background-color: #f0f0f0;
+}
+
+#crypto-form input, #crypto-form button {
+ padding: 10px;
+ margin: 5px;
+ font-size: 16px;
+}
+