Skip to content

Commit

Permalink
added event calendar and dark mode on the top right corner
Browse files Browse the repository at this point in the history
  • Loading branch information
@GauriSachan
GauriSachan committed Oct 5, 2024
1 parent aa5ac75 commit 8eeb0af
Show file tree
Hide file tree
Showing 4 changed files with 318 additions and 72 deletions.
15 changes: 15 additions & 0 deletions darkmode.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let darkmode= localStorage.getItem('darkmode')
const themeSwitch = document.getElementById('theme-switch')
const enableDarkmode = () => {
document.body.classList.add('darkmode')
localStorage.setItem('darkmode','active')
}
const disableDarkmode = () => {
document.body.classList.remove('darkmode')
localStorage.setItem('darkmode',null)
}
if(darkmode==="active") enableDarkmode()
themeSwitch.addEventListener("click", () =>{
darkmode=localStorage.getItem('darkmode')
darkmode!=="active" ? enableDarkmode() : disableDarkmode()
})
Empty file added images/light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
351 changes: 280 additions & 71 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,286 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Social | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js" defer></script>
</head>
<body>

<nav class="navbar">
<a href="index.html"><img src="/images/logo.png" class="logo"></a>
<span class="website-name">Code Social</span>
<ul>
<li>
<a href="#">Live Events</a>
<ul class="dropdown">
<li><a href="#"> Why don't you react?</a></li>
</ul>
</li>

<!-- Dropdown -->
<li>
<a href="#">Join our Community</a>
<ul class="dropdown">
<li><a href="#"> Whatsapp</a></li>
<li><a href="#">Discord</a></li>
</ul>
<li class="hamburger-menu">
<a href="javascript:void(0);" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="dropdown">
<li><a href="#"> Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>
</li>
</ul>
</nav>

<section class="about-community">
<h2>About Community</h2>
<p>
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.
</p>
<!-- Social Media Icons -->
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="/images/whatsapp-icon.png" alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="/images/discord-icon.png" alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="/images/linkedin-icon.png" alt="LinkedIn">
<head>
<title>Code Social | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="script.js" defer></script>
<script type="text/javascript" src="darkmode.js" defer></script>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5; /* Light mode background */
color: #000; /* Light mode text color */
}

/* Dark Mode Styles */
body.dark-mode {
background-color: #121212; /* Dark mode background */
color: #ffffff; /* Dark mode text color */
}

/* Calendar styles */
.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;
}
.calendar-day {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
position: relative;
background-color: #ffffff; /* Light mode day background */
}

body.dark-mode .calendar-day {
background-color: #1e1e1e; /* Dark mode day background */
border-color: #444; /* Dark mode border color */
}

.event {
background-color: #4CAF50;
color: white;
padding: 2px 5px;
border-radius: 3px;
font-size: 12px;
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
text-align: center;
cursor: pointer; /* Makes the event clickable */
}

/* Form styles */
.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;
}

/* Button styles */
.edit-btn, .delete-btn {
margin-top: 5px;
padding: 2px 5px;
font-size: 12px;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.edit-btn {
background-color: #2196F3; /* Blue */
}
.delete-btn {
background-color: #F44336; /* Red */
}
</style>
</head>
<body>
<header>
<button id="theme-switch">
<img src="file:///C:/Users/Dell/Downloads/dark_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg" alt="">
<img src="file:///C:/Users/Dell/Downloads/light_mode_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg" alt="">
</button>
</header>

<nav class="navbar">
<a href="index.html"><img src="/images/logo.png" class="logo"></a>
<span class="website-name">Code Social</span>
<ul>
<li>
<a href="#">Live Events</a>
<ul class="dropdown">
<li><a href="#"> Why don't you react?</a></li>
</ul>
</li>
<li>
<a href="#">Join our Community</a>
<ul class="dropdown">
<li><a href="#"> Whatsapp</a></li>
<li><a href="#">Discord</a></li>
</ul>
<li class="hamburger-menu">
<a href="javascript:void(0);" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
</div>
</section>
<ul class="dropdown">
<li><a href="#"> Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>
</li>
</ul>
</nav>

<section class="about-community">
<h2>About Community</h2>
<p>
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.
</p>
<!-- Social Media Icons -->
<div class="social-icons">
<a href="https://wa.me/your-whatsapp-number" target="_blank">
<img src="/images/whatsapp-icon.png" alt="WhatsApp">
</a>
<a href="https://discord.gg/MSTNyRSPYW" target="_blank">
<img src="/images/discord-icon.png" alt="Discord">
</a>
<a href="https://www.linkedin.com/company/code-social/" target="_blank">
<img src="/images/linkedin-icon.png" alt="LinkedIn">
</a>
</div>
</section>

<!-- Event Calendar Section -->
<section class="calendar">
<div class="calendar-header">Event Calendar</div>
<div class="calendar-grid" id="calendar-grid"></div>

<!-- Event Customization Form -->
<div class="event-form">
<h3>Add Event</h3>
<input type="date" id="event-date" required>
<input type="text" id="event-title" placeholder="Event Title" required>
<button id="add-event">Add Event</button>
</div>
</section>

<footer>
<p>&copy; 2024 Code Social. All rights reserved.</p>
</footer>

<script>
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 = '';

<footer>

</footer>
for (let day = 1; day <= daysInMonth; day++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.innerText = day;

</body>
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;

// Click to edit the event
eventElement.onclick = () => editEvent(day, event);

dayElement.appendChild(eventElement);
}

calendarGrid.appendChild(dayElement);
}
}

function addEvent() {
const dateInput = document.getElementById('event-date');
const titleInput = document.getElementById('event-title');

const dateValue = dateInput.value;
const titleValue = titleInput.value;

if (dateValue && titleValue) {
events.push({ date: dateValue, title: titleValue });
generateCalendar();

// Clear input fields
dateInput.value = '';
titleInput.value = '';
} else {
alert('Please fill in both fields.');
}
}

function editEvent(day, event) {
const dateInput = document.getElementById('event-date');
const titleInput = document.getElementById('event-title');

// Set the inputs with the current event details
dateInput.value = event.date;
titleInput.value = event.title;

// Change button to update event
document.getElementById('add-event').innerText = 'Update Event';
document.getElementById('add-event').onclick = () => updateEvent(event.date, day);
}

function updateEvent(oldDate, day) {
const dateInput = document.getElementById('event-date');
const titleInput = document.getElementById('event-title');

const newDate = dateInput.value;
const newTitle = titleInput.value;

const eventIndex = events.findIndex(e => e.date === oldDate);

if (eventIndex !== -1) {
events[eventIndex] = { date: newDate, title: newTitle };
generateCalendar();

// Reset the form
dateInput.value = '';
titleInput.value = '';
document.getElementById('add-event').innerText = 'Add Event';
document.getElementById('add-event').onclick = addEvent; // Reset to original function
} else {
alert('Event not found.');
}
}

document.getElementById('add-event').addEventListener('click', addEvent);
generateCalendar();

// Theme switcher functionality
const themeSwitchButton = document.getElementById('theme-switch');
themeSwitchButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
</script>
</body>
</html>

Loading

0 comments on commit 8eeb0af

Please sign in to comment.