From 6b7270ed122767e48af1313d029f6d9b63f71a28 Mon Sep 17 00:00:00 2001 From: Ashadul Islam Date: Sun, 28 Jul 2024 14:10:01 +0600 Subject: [PATCH] class selector and multiple selector works --- class-selector.css | 82 ++++++++++++++++++++++++++++++ class-selector.html | 18 +++++++ class-selector.js | 121 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 221 insertions(+) create mode 100644 class-selector.css create mode 100644 class-selector.html create mode 100644 class-selector.js 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); + }) +});