Explore the Blockchain implementation and predict the latest cryptocurrency prices.
Crypto Price Predictor
diff --git a/script.js b/script.js
index edd74c9..6cf345e 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,42 @@
+// 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
@@ -158,3 +197,4 @@ document.getElementById('predict-btn').addEventListener('click', function() {
document.getElementById("price").innerText = "Please enter a valid cryptocurrency symbol.";
}
});
+
diff --git a/styles.css b/styles.css
index bb4eaf3..1a0af87 100644
--- a/styles.css
+++ b/styles.css
@@ -32,7 +32,7 @@ h1, h2, h3 {
.header {
text-align: center;
- background-color: #2E073F;
+ background: linear-gradient(135deg, rgb(36, 11, 54), rgb(195, 20, 50));
color: #EBD3F8;
padding: 1.2rem;
font-family: "Mate SC", serif;
@@ -251,4 +251,55 @@ h1, h2, h3 {
.bot-text{
font-size: 1rem;
margin-block: 0px;
+}
+
+
+/* Here are the styles for the theme toggel */
+/* Theme switcher */
+.theme-switch {
+ display: inline-block;
+ width: 60px;
+ height: 30px;
+ border-radius: 30px;
+ background: linear-gradient(116deg, #ffffff, #a00101);
+ position: relative;
+ cursor: pointer;
+ transition: background 0.3s ease-in-out;
+ vertical-align: middle;
+}
+
+.theme-switch::before {
+ content: '';
+ position: absolute;
+ top: 3px;
+ left: 3px; /* Initial position for light mode */
+ width: 24px;
+ height: 24px;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out;
+ background-image: url('Assets/moon.png'); /* Icon for light mode */
+}
+
+.theme-switch.dark-theme {
+ background: linear-gradient(92deg, #ff0000, #ffffff); /* Background for dark mode */
+}
+
+.theme-switch.dark-theme::before {
+ left: 33px; /* Move the toggle to the right for dark mode */
+ background-image: url('Assets/sun.png'); /* Icon for dark mode */
+}
+
+/* Other dark mode styles */
+.header.dark-mode {
+ background: linear-gradient(303deg, #000000, #500210);
+}
+
+body.dark-mode{
+ background: linear-gradient(303deg, #000000, #500210);
+ color: #ffecec;
+}
+p.tagline.dark-mode{
+ color: #ffffff;
}
\ No newline at end of file