diff --git a/class-selector.css b/class-selector.css
new file mode 100644
index 0000000..823c5e1
--- /dev/null
+++ b/class-selector.css
@@ -0,0 +1,82 @@
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f4f4f4;
+}
+
+.input-container {
+ position: relative;
+ display: inline-block;
+}
+
+.dateInput {
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ width: 200px;
+}
+
+.calendar-container {
+ position: absolute;
+ top: 50px;
+ left: 0;
+ width: 350px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ display: none;
+ z-index: 1000;
+}
+
+.calendar-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 20px;
+ background-color: #4CAF50;
+ color: #fff;
+}
+
+.calendar-header button {
+ background: none;
+ border: none;
+ color: #fff;
+ font-size: 18px;
+ cursor: pointer;
+}
+
+.calendar-weekdays,
+.calendar-dates {
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ text-align: center;
+}
+
+.calendar-weekdays div,
+.calendar-dates div {
+ padding: 10px 0;
+}
+
+.calendar-weekdays {
+ background-color: #ddd;
+}
+
+.calendar-dates div {
+ border: 1px solid #eee;
+ cursor: pointer;
+}
+
+.calendar-dates div:hover {
+ background-color: #f0f0f0;
+}
+
+.calendar-dates .selected {
+ background-color: #4CAF50;
+ color: #fff;
+}
\ No newline at end of file
diff --git a/class-selector.html b/class-selector.html
new file mode 100644
index 0000000..73a33df
--- /dev/null
+++ b/class-selector.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Class Selector
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/class-selector.js b/class-selector.js
new file mode 100644
index 0000000..b211afd
--- /dev/null
+++ b/class-selector.js
@@ -0,0 +1,121 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const dateInputs = document.querySelectorAll('.dateInput');
+ // console.log(dateInput);
+ dateInputs.forEach((dateInput) => {
+ // Create input container
+ const inputContainer = document.createElement('div');
+ inputContainer.classList.add('input-container');
+ dateInput.parentNode.insertBefore(inputContainer, dateInput);
+ inputContainer.appendChild(dateInput);
+
+ // Create calendar container
+ const calendarContainer = document.createElement('div');
+ calendarContainer.classList.add('calendar-container');
+ calendarContainer.id = 'calendarContainer';
+ inputContainer.appendChild(calendarContainer);
+
+ // Create calendar header
+ const calendarHeader = document.createElement('div');
+ calendarHeader.classList.add('calendar-header');
+ calendarContainer.appendChild(calendarHeader);
+
+ const prevMonth = document.createElement('button');
+ prevMonth.id = 'prevMonth';
+ prevMonth.innerHTML = '<';
+ calendarHeader.appendChild(prevMonth);
+
+ const monthYear = document.createElement('div');
+ monthYear.id = 'monthYear';
+ calendarHeader.appendChild(monthYear);
+
+ const nextMonth = document.createElement('button');
+ nextMonth.id = 'nextMonth';
+ nextMonth.innerHTML = '>';
+ calendarHeader.appendChild(nextMonth);
+
+ // Create calendar body
+ const calendarBody = document.createElement('div');
+ calendarBody.classList.add('calendar-body');
+ calendarContainer.appendChild(calendarBody);
+
+ // Create calendar weekdays
+ const calendarWeekdays = document.createElement('div');
+ calendarWeekdays.classList.add('calendar-weekdays');
+ calendarBody.appendChild(calendarWeekdays);
+
+ ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach(day => {
+ const dayDiv = document.createElement('div');
+ dayDiv.textContent = day;
+ calendarWeekdays.appendChild(dayDiv);
+ });
+
+ // Create calendar dates
+ const calendarDates = document.createElement('div');
+ calendarDates.classList.add('calendar-dates');
+ calendarDates.id = 'calendarDates';
+ calendarBody.appendChild(calendarDates);
+
+ let currentMonth = new Date().getMonth();
+ let currentYear = new Date().getFullYear();
+
+ const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+ function renderCalendar(month, year) {
+ const firstDay = new Date(year, month, 1).getDay();
+ const lastDate = new Date(year, month + 1, 0).getDate();
+
+ calendarDates.innerHTML = '';
+ monthYear.textContent = `${months[month]} ${year}`;
+
+ // Adjust for starting the week on Monday
+ const adjustedFirstDay = (firstDay === 0 ? 6 : firstDay - 1);
+
+ for (let i = 0; i < adjustedFirstDay; i++) {
+ const emptyDiv = document.createElement('div');
+ calendarDates.appendChild(emptyDiv);
+ }
+
+ for (let date = 1; date <= lastDate; date++) {
+ const dateDiv = document.createElement('div');
+ dateDiv.textContent = date;
+ dateDiv.addEventListener('click', () => {
+ document.querySelectorAll('.calendar-dates div').forEach(d => d.classList.remove('selected'));
+ dateDiv.classList.add('selected');
+ dateInput.value = `${date} ${months[month]} ${year}`;
+ calendarContainer.style.display = 'none';
+ });
+ calendarDates.appendChild(dateDiv);
+ }
+ }
+
+ prevMonth.addEventListener('click', () => {
+ currentMonth--;
+ if (currentMonth < 0) {
+ currentMonth = 11;
+ currentYear--;
+ }
+ renderCalendar(currentMonth, currentYear);
+ });
+
+ nextMonth.addEventListener('click', () => {
+ currentMonth++;
+ if (currentMonth > 11) {
+ currentMonth = 0;
+ currentYear++;
+ }
+ renderCalendar(currentMonth, currentYear);
+ });
+
+ dateInput.addEventListener('focus', () => {
+ calendarContainer.style.display = 'block';
+ });
+
+ document.addEventListener('click', (event) => {
+ if (!calendarContainer.contains(event.target) && event.target !== dateInput) {
+ calendarContainer.style.display = 'none';
+ }
+ });
+
+ renderCalendar(currentMonth, currentYear);
+ })
+});