added dropdown options for crypto currencies

OpenTekHub · Sep 30, 2024 · 10b77cc · 10b77cc
1 parent bd541d5
commit 10b77cc
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 93 deletions.
diff --git a/index.html b/index.html
@@ -24,8 +24,9 @@ <h2>About the Repository</h2>
         <h2>Crypto Price Predictor</h2>
         <div id="crypto-form">
             <label for="crypto">Enter Cryptocurrency Symbol (e.g., BITCOIN(BTC), ETHERUM(ETH)):</label>
-            <input type="text" id="crypto" name="crypto">
+            <input type="text" id="crypto" name="crypto" autocomplete="off">
             <button id="predict-btn">Predict Price</button>
+            <div id="crypto-suggestions"></div>
         </div>
         <div id="price-result">
             <h3>Predicted Price:</h3>

diff --git 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
@@ -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;
+}
+