Changes in index.html, style.css and app.js under real_time_event_upd…

…ates directory for light and dark mode on the website.
Ramsey99 · Nov 10, 2024 · afb12ab · afb12ab
1 parent bc0ce9c
commit afb12ab
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 66 deletions.
diff --git a/real_time_event_updates/app.js b/real_time_event_updates/app.js
@@ -7,14 +7,12 @@ const eventUpdates = document.getElementById('event-updates');
 socket.addEventListener('message', function (event) {
   const data = JSON.parse(event.data);
 
-  // If the data is for event updates
   if (data.type === 'event-update') {
     const update = document.createElement('p');
     update.textContent = data.message;
     eventUpdates.appendChild(update);
   }
 
-  // If the data is a chat message
   if (data.type === 'chat-message') {
     const chatMessages = document.getElementById('chat-messages');
     const message = document.createElement('p');
@@ -31,6 +29,18 @@ sendButton.addEventListener('click', function () {
   const message = chatInput.value;
   if (message) {
     socket.send(JSON.stringify({ type: 'chat-message', message: message }));
-    chatInput.value = ''; // Clear input after sending
+    chatInput.value = '';
   }
 });
+
+// Theme Toggle Functionality
+const themeToggle = document.getElementById('theme-toggle');
+themeToggle.addEventListener('click', () => {
+  document.body.classList.toggle('dark-mode');
+  document.body.classList.toggle('light-mode');
+
+  // Toggle icon between sun and moon
+  const icon = themeToggle.querySelector('i');
+  icon.classList.toggle('fa-sun');
+  icon.classList.toggle('fa-moon');
+});
diff --git a/real_time_event_updates/index.html b/real_time_event_updates/index.html
@@ -4,18 +4,22 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Real-Time Event Updates & Live Chat</title>
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Font Awesome -->
 </head>
 <body>
-  <!-- Real-Time Updates Section -->
+  <!-- Dark/Light Mode Toggle Icon -->
+  <div id="theme-toggle" class="theme-icon">
+    <i class="fas fa-sun"></i> <!-- Default icon as sun for light mode -->
+  </div>
+
   <div class="event-updates-container">
     <h2>Real-Time Event Updates</h2>
     <div id="event-updates" class="updates">
       <p>No new updates yet.</p>
     </div>
   </div>
 
-  <!-- Live Chat Support Section -->
   <div class="live-chat-container">
     <h2>Live Chat Support</h2>
     <div id="chat-window" class="chat-window">
@@ -25,6 +29,6 @@ <h2>Live Chat Support</h2>
     <button id="send-button">Send</button>
   </div>
 
-  <script src="app.js"></script> <!-- link to javascript-->
+  <script src="app.js"></script> <!-- link to JavaScript -->
 </body>
 </html>
diff --git a/real_time_event_updates/style.css b/real_time_event_updates/style.css
@@ -1,63 +1,37 @@
-body {
-    font-family: Arial, sans-serif;
-    background-color: #f4f4f4;
-    margin: 0;
-    padding: 20px;
-  }
-
-  /* Event Updates Section */
-  .event-updates-container {
-    background-color: #ffffff;
-    padding: 20px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .updates {
-    background-color: #f0f0f0;
-    padding: 15px;
-    height: 200px;
-    overflow-y: auto;
-  }
-
-  h2 {
-    color: #333;
-  }
-
-  /* Live Chat Section */
-  .live-chat-container {
-    background-color: #ffffff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .chat-window {
-    background-color: #f0f0f0;
+/* General Styles */
+body.light-mode {
+  background-color: #f4f4f4;
+  color: #333;
+}
+body.dark-mode {
+  background-color: #1a1a1a;
+  color: #f4f4f4;
+}
+
+/* Theme Toggle Icon Styles */
+.theme-icon {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  font-size: 24px;
+  cursor: pointer;
+  color: #333; /* Light mode default */
+}
+body.dark-mode .theme-icon {
+  color: #f4f4f4; /* Dark mode default */
+}
+
+.theme-icon:hover {
+  opacity: 0.8;
+}
+
+/* Responsive Design for Containers */
+@media (max-width: 768px) {
+  .event-updates-container, .live-chat-container {
     padding: 10px;
-    height: 200px;
-    overflow-y: auto;
-    border: 1px solid #ccc;
-    margin-bottom: 10px;
   }
-  
+
   #chat-input {
-    width: 80%;
-    padding: 10px;
-    margin-right: 10px;
-  }
-
-  #send-button {
-    padding: 10px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-
-  #send-button:hover {
-    background-color: #0056b3;
+    width: 70%;
   }
-  
+}