From 232d74865b9241f2f4d139bdd69add4823826352 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 23 Feb 2026 11:44:24 +0100 Subject: [PATCH 01/32] create script.js and style.css / fix generate-ical.mjs / uptate index.html create script.js - just test getDay(), new Date() ... methods style.css : - display: grid - basic structure fix generate-ical.mjs update index.html to merch with dynamic structure in the future --- Project-Days-Calendar/generate-ical.mjs | 2 +- Project-Days-Calendar/index.html | 48 ++++++++++++++++++++----- Project-Days-Calendar/script.js | 12 +++++++ Project-Days-Calendar/style.css | 33 +++++++++++++++++ 4 files changed, 86 insertions(+), 9 deletions(-) create mode 100644 Project-Days-Calendar/script.js create mode 100644 Project-Days-Calendar/style.css diff --git a/Project-Days-Calendar/generate-ical.mjs b/Project-Days-Calendar/generate-ical.mjs index 1a09ee4..c3779bd 100644 --- a/Project-Days-Calendar/generate-ical.mjs +++ b/Project-Days-Calendar/generate-ical.mjs @@ -4,4 +4,4 @@ import { getGreeting } from "./common.mjs"; import daysData from "./days.json" with { type: "json" }; -console.log(`{getGreeting()} - there are ${daysData.length} known days`); +console.log(`${getGreeting()} - there are ${daysData.length} known days`); diff --git a/Project-Days-Calendar/index.html b/Project-Days-Calendar/index.html index adb969c..8cf846e 100644 --- a/Project-Days-Calendar/index.html +++ b/Project-Days-Calendar/index.html @@ -1,9 +1,41 @@ - - - - - - - - + + + + + + + + + + Calendar + + + + +
+
+ +

February

+ +
+
+
+
+ + + diff --git a/Project-Days-Calendar/script.js b/Project-Days-Calendar/script.js new file mode 100644 index 0000000..b0306cb --- /dev/null +++ b/Project-Days-Calendar/script.js @@ -0,0 +1,12 @@ +const currentDate = new Date(); +let day = currentDate.getDay(); +const currentMonth = currentDate.getMonth(); +const currentYear = currentDate.getFullYear(); +console.log(currentDate) +console.log(currentMonth) +console.log(currentYear) +console.log(day) + + +const d = new Date("April 23, 2015 01:15:00"); +console.log(d.getDay()) diff --git a/Project-Days-Calendar/style.css b/Project-Days-Calendar/style.css new file mode 100644 index 0000000..5d34b8b --- /dev/null +++ b/Project-Days-Calendar/style.css @@ -0,0 +1,33 @@ +main { + display: grid; +} +.week-section { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1rem; +} +h1 { + margin: 0.2rem; +} +h3 { + margin: 0.5rem; +} +.month-carousel{ + display: flex; + flex-direction: row; +} +#header{ + display: flex; + flex-direction: row; + justify-content: right; +} +.days { + margin: 5px; +} +.previous-month .next-month { + margin: 5px; +} + +.footer p { + text-align: center; +} \ No newline at end of file From 218f036d245bdad8d76fa2a684bd8f147bcb420e Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 23 Feb 2026 18:35:46 +0100 Subject: [PATCH 02/32] feat (function renderCalendar (month, year) and function renderDay(dayNumber) - made months array - for having the name of the month not it's index - made days of the week array - for having the name of the day of the week not it's index renderCalendar function : Takes the year and month as parameters - clean everything inside the section - create div and h5 with names of the week and rendering them - create variable to check what day of the week the first day of the month is. - create variable for length of the month - for now create emply div for days before the first day of the month - rendering days of the month renderDay function: - for now create buttons for each day of the month - add class days - add text with the number and rendering them --- Project-Days-Calendar/script.js | 46 ++++++++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/Project-Days-Calendar/script.js b/Project-Days-Calendar/script.js index b0306cb..a9fc98f 100644 --- a/Project-Days-Calendar/script.js +++ b/Project-Days-Calendar/script.js @@ -1,12 +1,44 @@ +const months = [ + "January", "February", "March", "April", + "May", "June", "July", "August", + "September", "October", "November", "December" +]; +const daysOfTheWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; + +const root = document.querySelector(".week-section"); + const currentDate = new Date(); -let day = currentDate.getDay(); +const currentDay = currentDate.getDay(); const currentMonth = currentDate.getMonth(); const currentYear = currentDate.getFullYear(); -console.log(currentDate) -console.log(currentMonth) -console.log(currentYear) -console.log(day) -const d = new Date("April 23, 2015 01:15:00"); -console.log(d.getDay()) + +renderCalendar(currentMonth, currentYear); + +function renderCalendar(month, year) { + root.innerHTML = ""; + for (let i = 0; i < daysOfTheWeek.length; i++) { + const dayOfTheWeek = document.createElement("div"); + const header = document.createElement("h5"); + header.textContent = daysOfTheWeek[i]; + root.appendChild(dayOfTheWeek); + dayOfTheWeek.appendChild(header); + } + const firstDayIndex = new Date(year, month, 1).getDay(); + const daysInMonth = new Date(year, month + 1, 0).getDate(); + for (let i = 0; i < firstDayIndex; i++) { + const emptyCell = document.createElement("div"); + root.appendChild(emptyCell) + } + for (let day = 1; day <= daysInMonth; day++) { + renderDay(day); + } +} + +function renderDay(dayNumber) { + const dayCard = document.createElement("button"); + dayCard.classList.add("days"); + dayCard.textContent = dayNumber; + root.appendChild(dayCard); +} \ No newline at end of file From 60d8085b5b3dcae88390fa4d5d60da1081726236 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 23 Feb 2026 22:50:28 +0100 Subject: [PATCH 03/32] feat (renderMonth / today is selected / next and previous month renderMonth is show current month - if today is matching with some day of selected month it will be showed - button next now change the current month and show next month - button previous now change the current month and show previous month CSS - for today some different style - class for days of the week HTML - the month-value now dynamic and buttons previous/next month --- Project-Days-Calendar/index.html | 11 ++++--- Project-Days-Calendar/script.js | 49 ++++++++++++++++++++++++++++---- Project-Days-Calendar/style.css | 18 +++++++++++- 3 files changed, 66 insertions(+), 12 deletions(-) diff --git a/Project-Days-Calendar/index.html b/Project-Days-Calendar/index.html index 8cf846e..e9df6d3 100644 --- a/Project-Days-Calendar/index.html +++ b/Project-Days-Calendar/index.html @@ -26,16 +26,15 @@
- -

February

- + +

+
-
-
+

Presented by our team with love

- + diff --git a/Project-Days-Calendar/script.js b/Project-Days-Calendar/script.js index a9fc98f..8658564 100644 --- a/Project-Days-Calendar/script.js +++ b/Project-Days-Calendar/script.js @@ -9,30 +9,38 @@ const root = document.querySelector(".week-section"); const currentDate = new Date(); const currentDay = currentDate.getDay(); -const currentMonth = currentDate.getMonth(); -const currentYear = currentDate.getFullYear(); - +let currentMonth = new Date().getMonth(); +let currentYear = new Date().getFullYear(); +renderMonth(currentMonth) renderCalendar(currentMonth, currentYear); function renderCalendar(month, year) { root.innerHTML = ""; + document.querySelector("h1").textContent = months[month]; + for (let i = 0; i < daysOfTheWeek.length; i++) { const dayOfTheWeek = document.createElement("div"); const header = document.createElement("h5"); + header.classList.add("dayOfTheWeek") header.textContent = daysOfTheWeek[i]; root.appendChild(dayOfTheWeek); dayOfTheWeek.appendChild(header); } const firstDayIndex = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); + for (let i = 0; i < firstDayIndex; i++) { const emptyCell = document.createElement("div"); root.appendChild(emptyCell) } for (let day = 1; day <= daysInMonth; day++) { - renderDay(day); + const dayCard = renderDay(day); + if (day === currentDate.getDate() && year === currentDate.getFullYear() && month === currentDate.getMonth()) { + dayCard.classList.add("today"); + } + root.appendChild(dayCard); } } @@ -41,4 +49,35 @@ function renderDay(dayNumber) { dayCard.classList.add("days"); dayCard.textContent = dayNumber; root.appendChild(dayCard); -} \ No newline at end of file + return dayCard; +} +function renderMonth(month) { + const shownMonth = document.querySelector("h1"); + shownMonth.textContent = months[month]; +} + + + +const nextBtn = document.querySelector(".next-month"); +nextBtn.addEventListener("click", () => { + currentMonth++; + + if (currentMonth > 11) { + currentMonth = 0; + currentYear++; + } + + renderCalendar(currentMonth, currentYear); +}); + +const previousMonth = document.querySelector(".previous-month"); +previousMonth.addEventListener("click", () => { + currentMonth--; + + if (currentMonth < 0) { + currentMonth = 11; + currentYear--; + } + + renderCalendar(currentMonth, currentYear); +}); diff --git a/Project-Days-Calendar/style.css b/Project-Days-Calendar/style.css index 5d34b8b..ebe5582 100644 --- a/Project-Days-Calendar/style.css +++ b/Project-Days-Calendar/style.css @@ -6,11 +6,19 @@ main { grid-template-columns: repeat(7, 1fr); gap: 1rem; } +#month { + width: 160px; +} h1 { margin: 0.2rem; + padding: 0; + margin-block-start: 0; + margin-block-end: 0; + text-align: center; } -h3 { +.dayOfTheWeek { margin: 0.5rem; + text-align: center; } .month-carousel{ display: flex; @@ -24,6 +32,14 @@ h3 { .days { margin: 5px; } +.today { + background-color: green; + color: white; + font-weight: bold ; + border-radius: 0.2rem; + border: 0px; +} + .previous-month .next-month { margin: 5px; } From 8bdc1dea36e30ff566ef911851110d0f174b608b Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 24 Feb 2026 12:25:17 +0100 Subject: [PATCH 04/32] renderYear(selectedYear) and onchange event listener rendering year between 1950 and 2050, current year selected. The even listener renderCalendar of the selectedYear and displayed Month --- Project-Days-Calendar/index.html | 18 ++++++++---------- Project-Days-Calendar/script.js | 21 +++++++++++++++++++++ Project-Days-Calendar/style.css | 2 +- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/Project-Days-Calendar/index.html b/Project-Days-Calendar/index.html index e9df6d3..9bf5821 100644 --- a/Project-Days-Calendar/index.html +++ b/Project-Days-Calendar/index.html @@ -15,21 +15,19 @@ -

+
+ + +
+ +