Event Calendar Section, Forum/Discussion Boards, Footer Structure #234

darkmode.js

@@ -1,38 +1,32 @@
-
 let darkmode = localStorage.getItem('darkmode');
-const themeSwitch = document.getElementById('theme-switch');
-
+const themeSwitch = document.getElementById('theme-switch-fixed'); // Use the correct ID
 
 const enableDarkMode = () => {
-    document.body.classList.add('darkmode');
+    document.body.classList.add('dark-mode'); // Ensure class name matches CSS
     localStorage.setItem('darkmode', 'active');
     updateThemeSwitchText(); 
 };
 
-
 const disableDarkMode = () => {
-    document.body.classList.remove('darkmode');
+    document.body.classList.remove('dark-mode'); // Ensure class name matches CSS
     localStorage.setItem('darkmode', 'inactive');
     updateThemeSwitchText(); 
 };
 
-
 const updateThemeSwitchText = () => {
     themeSwitch.textContent = darkmode === "active" ? "Switch to Light Mode ☀️" : "Switch to Dark Mode 🌙";
 };
 
-
 if (darkmode === "active") {
     enableDarkMode();
 } else {
     disableDarkMode();
 }
 
+// Update button text on initial load
+updateThemeSwitchText();
 
 themeSwitch.addEventListener("click", () => {
     darkmode = localStorage.getItem('darkmode');
     darkmode === "active" ? disableDarkMode() : enableDarkMode();
-});
-
-// Update button text on initial load
-updateThemeSwitchText();
+});

event-calendar.css

@@ -0,0 +1,77 @@
+.calendar {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 20px;
+}
+
+.calendar-header {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 10px;
+    margin-bottom: 20px;
+    width: 100%;
+    max-width: 800px;
+}
+
+.calendar-day {
+    border: 1px solid #ccc;
+    padding: 20px;
+    text-align: center;
+    position: relative;
+    background-color: #ffffff;
+    height: 100px;
+    border-radius: 8px;
+    transition: background-color 0.3s ease;
+}
+
+body.dark-mode .calendar-day {
+    background-color: #1e1e1e;
+    border-color: #444;
+}
+
+.calendar-day:hover {
+    background-color: #e0e0e0;
+}
+
+body.dark-mode .calendar-day:hover {
+    background-color: #333;
+}
+
+.event {
+    background-color: #4CAF50;
+    color: white;
+    padding: 5px;
+    border-radius: 3px;
+    font-size: 14px;
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    right: 5px;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.event-form {
+    margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.event-form input,
+.event-form button {
+    margin: 5px;
+    padding: 10px;
+    font-size: 16px;
+    width: 100%;
+    max-width: 300px;
+}

event-calendar.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const events = [
+        { date: '2024-10-06', title: 'React Workshop' },
+        { date: '2024-10-14', title: 'Node.js Webinar' },
+        { date: '2024-10-21', title: 'CSS Masterclass' },
+    ];
+
+    function generateCalendar() {
+        const calendarGrid = document.getElementById('calendar-grid');
+        const daysInMonth = new Date(2024, 9, 0).getDate(); // October 2024
+
+        // Clear existing calendar
+        calendarGrid.innerHTML = '';
+
+        for (let day = 1; day <= daysInMonth; day++) {
+            const dayElement = document.createElement('div');
+            dayElement.className = 'calendar-day';
+            dayElement.innerText = day;
+
+            const event = events.find(e => new Date(e.date).getDate() === day);
+            if (event) {
+                const eventElement = document.createElement('div');
+                eventElement.className = 'event';
+                eventElement.innerText = event.title;
+                dayElement.appendChild(eventElement);
+            }
+
+            calendarGrid.appendChild(dayElement);
+        }
+    }
+
+    document.getElementById('add-event').addEventListener('click', () => {
+        const date = document.getElementById('event-date').value;
+        const title = document.getElementById('event-title').value;
+
+        if (date && title) {
+            events.push({ date, title });
+            generateCalendar();
+            document.getElementById('event-title').value = '';
+        }
+    });
+
+    generateCalendar();
+});

footer.css

@@ -0,0 +1,47 @@
+footer {
+    background-color: #333;
+    color: #fff;
+    padding: 20px 0;
+    margin-top: 40px;
+}
+
+body.dark-mode footer {
+    background-color: #1a1a1a;
+}
+
+footer p {
+    text-align: center;
+    margin: 0;
+    padding: 10px 0;
+}
+
+footer .forum-section {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+footer .forum-section h2 {
+    color: #fff;
+    border-bottom: 1px solid #555;
+    padding-bottom: 10px;
+}
+
+footer .forum-section ul {
+    padding-left: 20px;
+}
+
+footer .forum-section ul li {
+    margin-bottom: 5px;
+}
+
+footer .forum-section ul li a {
+    color: #ddd;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+footer .forum-section ul li a:hover {
+    color: #fff;
+    text-decoration: underline;
+}

forum.css

@@ -0,0 +1,53 @@
+.forum-section {
+    background-color: #f0f0f0;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+}
+
+body.dark-mode .forum-section {
+    background-color: #2a2a2a;
+    color: #ffffff;
+}
+
+.forum-section h2 {
+    color: #333;
+    margin-bottom: 15px;
+}
+
+body.dark-mode .forum-section h2 {
+    color: #e0e0e0;
+}
+
+.forum-section p {
+    margin-bottom: 15px;
+    line-height: 1.6;
+}
+
+.forum-section ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.forum-section ul li {
+    margin-bottom: 10px;
+}
+
+.forum-section ul li a {
+    color: #0066cc;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.forum-section ul li a:hover {
+    color: #004080;
+    text-decoration: underline;
+}
+
+body.dark-mode .forum-section ul li a {
+    color: #66b3ff;
+}
+
+body.dark-mode .forum-section ul li a:hover {
+    color: #99ccff;
+}

forum.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // This is a placeholder for forum functionality
+    // You can add more interactive features here as needed
+
+    const forumLinks = document.querySelectorAll('.forum-section a');
+
+    forumLinks.forEach(link => {
+        link.addEventListener('click', (event) => {
+            // You can add analytics tracking here
+            console.log(`Clicked on forum link: ${link.href}`);
+        });
+    });
+
+    // Example of a function to load recent forum topics (simulated)
+    function loadRecentTopics() {
+        const topicList = document.createElement('ul');
+        const topics = [
+            'Getting started with React',
+            'Best practices for Node.js',
+            'CSS Grid vs Flexbox',
+            'JavaScript ES6+ features'
+        ];
+
+        topics.forEach(topic => {
+            const li = document.createElement('li');
+            li.textContent = topic;
+            topicList.appendChild(li);
+        });
+
+        const forumSection = document.querySelector('.forum-section');
+        forumSection.appendChild(topicList);
+    }
+
+    // Uncomment the line below to load recent topics
+    // loadRecentTopics();
+});