diff --git a/darkmode.js b/darkmode.js
index bb8f2df..cd73868 100644
--- a/darkmode.js
+++ b/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();
+});
\ No newline at end of file
diff --git a/event-calendar.css b/event-calendar.css
new file mode 100644
index 0000000..9fcb635
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/event-calendar.js b/event-calendar.js
new file mode 100644
index 0000000..9ddad45
--- /dev/null
+++ b/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();
+});
\ No newline at end of file
diff --git a/event-calender.html b/event-calender.html
new file mode 100644
index 0000000..e69de29
diff --git a/footer.css b/footer.css
new file mode 100644
index 0000000..198b4df
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/forum.css b/forum.css
new file mode 100644
index 0000000..35ac02f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/forum.js b/forum.js
new file mode 100644
index 0000000..f5b600a
--- /dev/null
+++ b/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();
+});
\ No newline at end of file
diff --git a/images/dark-mode-toggle-icon.png b/images/dark-mode-toggle-icon.png
new file mode 100644
index 0000000..991f067
Binary files /dev/null and b/images/dark-mode-toggle-icon.png differ
diff --git a/images/light-mode-toggle-icon.png b/images/light-mode-toggle-icon.png
new file mode 100644
index 0000000..5ceefff
Binary files /dev/null and b/images/light-mode-toggle-icon.png differ
diff --git a/index.html b/index.html
index 0662880..6b8c168 100644
--- a/index.html
+++ b/index.html
@@ -5,36 +5,227 @@
Code Social | Home
-
-
-
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
-
-
+
About Community
Code Social Community is a learning-focused community dedicated to providing individuals with resources, opportunities to learn, grow, and develop their skills in various technologies. The community helps individuals to explore their interests, expand their knowledge, and connect with like-minded people.
-
+
+
At Code Social Community, members have access to a wealth of resources and learning opportunities, including free learning sessions, mentorship programs, and peer-to-peer learning sessions. The community also provides opportunities for members to network and connect with others in the tech industry.
-
- In addition to its learning and networking opportunities, Code Social Community also serves as a hub for resources, tools, and other materials that can help members enhance their skills and stay up-to-date with the latest trends and best practices in the tech industry.
-
+
+
Whether you are just starting out in your career or are a seasoned professional looking to expand your knowledge and skills, this community offers something for everyone. With its focus on hands-on learning, mentorship, and networking opportunities, Code Social Community is an excellent place to connect with like-minded individuals, build your skills, and take your career to the next level.
