class selector and multiple selector works

AshadulTopu23 · Jul 28, 2024 · 6b7270e · 6b7270e
1 parent 474946c
commit 6b7270e
Show file tree

Hide file tree

Showing 3 changed files with 221 additions and 0 deletions.
diff --git a/class-selector.css 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;
+}
diff --git a/class-selector.html b/class-selector.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class Selector</title>
+    <link rel="stylesheet" href="class-selector.css">
+</head>
+
+<body>
+    <input type="text" class="dateInput" readonly placeholder="Select a date">
+    <input type="text" class="dateInput" readonly placeholder="Select a date">
+    <input type="text" class="dateInput" readonly placeholder="Select a date">
+    <script src="class-selector.js"></script>
+</body>
+
+</html>
diff --git a/class-selector.js 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 = '&lt;';
+        calendarHeader.appendChild(prevMonth);
+
+        const monthYear = document.createElement('div');
+        monthYear.id = 'monthYear';
+        calendarHeader.appendChild(monthYear);
+
+        const nextMonth = document.createElement('button');
+        nextMonth.id = 'nextMonth';
+        nextMonth.innerHTML = '&gt;';
+        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);
+    })
+});