OpenTekHub · STDYGIT · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5503
+}
diff --git a/Assets/moon.png b/Assets/moon.png
diff --git a/Assets/sun.png b/Assets/sun.png
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenTekHub Blockchain Repo</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&family=Gowun+Batang:wght@400;700&family=Mate+SC&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <header class="header">
+        <nav>
+            <h1>OpenTekHub Blockchain Repository</h1>
+            <div class="theme-switch" id="theme-switch"></div>
+        </nav>
+    </header>
+
+    <div class="central">
+        <p class="tagline">Explore the Blockchain implementation and predict the latest cryptocurrency prices.</p>
+
+        <section id="crypto-price-predictor">
+            <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">
+                <div id="crypto-suggestions"></div>
+                <button id="predict-btn">Predict Price</button>
+
+            </div>
+            <div id="price-result">
+                <h3>Predicted Price:</h3>
+                <p id="price"></p>
+            </div>
+            <div id="telegram-bot">
+
+                <p class="bot-text"> Track prices with our Telegram bot</p>
+                <h3><a href="https://t.me/trackingcryptopricerbot" class="bot-link"><img src="public/Telegram.png" alt="Telegram logo" id="Telegram">@TrackCryptoPriceBot</a></h3>
+            </div>
+        </section>
+    </div>
+
+    <section id="repo-info">
+
+        <h2>About the Repository</h2>
+        <p>This repository demonstrates blockchain prices using api and javascript.</p>
+        <a href="https://github.com/OpenTekHub/blockchain" target="_blank"><img src="public/github.png" alt=""  id="git">BlockChain Repository</a>
+    </section>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/public/Telegram.png b/public/Telegram.png
diff --git a/public/github.png b/public/github.png
diff --git a/script.js b/script.js
@@ -0,0 +1,200 @@
+// Dark Mode Toggle Functionality
+const themeSwitch = document.getElementById('theme-switch'); // Ensure this matches your HTML button's ID
+const body = document.body;
+const header = document.querySelector('header');
+const footer = document.querySelector('footer');
+
+// Function to enable dark mode
+function enableDarkMode() {
+    body.classList.add('dark-mode');
+    header.classList.add('dark-mode');
+    themeSwitch.classList.add('dark-theme'); // Update the switch appearance
+    footer.classList.add('dark-mode');
+}
+
+// Function to disable dark mode
+function disableDarkMode() {
+    body.classList.remove('dark-mode');
+    header.classList.remove('dark-mode');
+    themeSwitch.classList.remove('dark-theme'); // Update the switch appearance
+    footer.classList.remove('dark-mode');
+}
+
+// Event listener for dark mode toggle button
+themeSwitch.addEventListener('click', () => {
+    if (body.classList.contains('dark-mode')) {
+        disableDarkMode(); // Switch to light mode
+        localStorage.removeItem('dark-mode'); // Remove from local storage
+    } else {
+        enableDarkMode(); // Switch to dark mode
+        localStorage.setItem('dark-mode', 'enabled'); // Save in local storage
+    }
+});
+
+// Optional: Check the initial mode on page load and apply the correct theme based on local storage
+if (localStorage.getItem('dark-mode') === 'enabled') {
+    enableDarkMode();
+} else {
+    disableDarkMode(); // Default to light mode on load if localStorage is empty
+}
+// 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',
+    'TON': 'toncoin',
+    'SUI':'sui',
+    'OP': 'optimism',
+    'INJ': 'injective',
+    'ARB': 'arbitrum',
+
+    // 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',
+
+    // 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',
+    'PEPE': 'memetic',
+    'WIF': 'dogwithat',
+    'BONK': 'bonk',
+    'FLOKI': 'floki',
+
+    // Add more symbols and tokens as needed
+    'WETH': 'wrapped-ethereum',
+    'MKR': 'maker',
+    'BAL': 'balancer',
+    'WLD': 'worldcoin',
+    'OM': 'mantra-dao',
+    'PHB': 'phoenix',
+    'LISTA': 'lista',
+    'RENDER': 'render',
+};
+
+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';
+    }
+});
+
+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`)
+        .then(response => response.json())
+        .then(data => {
+            if (data[crypto]) {
+                document.getElementById("price").innerText = "$" + data[crypto].usd;
+            } else {
+                document.getElementById("price").innerText = "Cryptocurrency not found!";
+            }
+        })
+        .catch(error => {
+            document.getElementById("price").innerText = "Error fetching price data.";
+            console.error("Error:", error);
+        });
+    } else {
+        document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol.";
+    }
+});
+