diff --git a/index.html b/index.html index 4a45707..ce9620e 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,7 @@

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 d843d90..7176c83 100644 --- a/styles.css +++ b/styles.css @@ -155,4 +155,32 @@ h1, h2, h3{ } #repo-info a{ color:#ffee00; +} + +#crypto-suggestions { + display: none; + position: absolute; + border: 1px solid #ccc; + border-radius: 5px; + background-color: white; + max-height: 150px; + overflow-y: auto; + width: 384px; + z-index: 1000; + color: #000000; + left: 3rem; + top: 7rem; +} + +#crypto-suggestions div { + padding: 10px; + cursor: pointer; +} + +#crypto-suggestions div:hover { + background-color: #f0f0f0; +} + +#crypto-form { + position: relative; } \ No newline at end of file