From f89c5fe1f7aa4d3faa8cffc701f68c569b659d35 Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Wed, 7 Feb 2024 14:04:39 +0100 Subject: [PATCH 01/35] bug fix chbx to nb --- index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 62308bf..3e15526 100644 --- a/index.js +++ b/index.js @@ -150,9 +150,8 @@ function adaptCheckboxClass() { //For every chbx testing if it's assigned day matches current day //For month days and week days - - if (checkbox.dataset.assignedDay.includes(checkbox.dataset.weekday) - ||checkbox.dataset.assignedDay === checkbox.dataset.day) { + if (checkbox.dataset.assignedDay.includes(checkbox.dataset.weekday)|| + Number(checkbox.dataset.assignedDay) === Number(checkbox.dataset.day.slice(7, 10))) { //Testing to know if task is past due date if (compareDates(checkbox.dataset.day, now)){ checkbox.classList.add('bold-checkbox', 'future') From 7429c614366547ba55687a0c6033b012c73b4aed Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Wed, 7 Feb 2024 14:13:03 +0100 Subject: [PATCH 02/35] weekdays in local language --- index.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 3e15526..9203c12 100644 --- a/index.js +++ b/index.js @@ -51,16 +51,10 @@ function renderCalendar() { for (let i = 1; i <= daysInMonth; i++) { let currentDate = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i); - let currentDayOfWeek = new Intl.DateTimeFormat("en-US", { + let currentDayOfWeek = new Intl.DateTimeFormat(undefined, { weekday: "short", - }).format(currentDate); + }).format(currentDate)[0].toUpperCase(); - if (currentDayOfWeek === "Sat") { - currentDayOfWeek = "Sa"; - } - else { - currentDayOfWeek = currentDayOfWeek[0]; - } if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) { daysHtml += `
From 94c0405700ea481c7bff306a18b770d93cdd3cf0 Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Wed, 7 Feb 2024 14:18:54 +0100 Subject: [PATCH 03/35] capitalize --- index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 9203c12..768f1bf 100644 --- a/index.js +++ b/index.js @@ -26,8 +26,11 @@ document.addEventListener('click', (e) => { function renderSelectedMonth() { const monthEl = document.getElementById('month') + const month = SelectedMonth.toLocaleString('default', { month: 'long' }) + const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1); + monthEl.textContent = ` - ${SelectedMonth.toLocaleString('default', { month: 'long' })} + ${capitalizedMonth} ${SelectedMonth.getFullYear()}` text = ``; From 2cb9445706f0e0945a51e4727a781be5730df835 Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Wed, 7 Feb 2024 17:22:41 +0100 Subject: [PATCH 04/35] push --- index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/index.js b/index.js index 768f1bf..5d4e39a 100644 --- a/index.js +++ b/index.js @@ -46,7 +46,6 @@ function renderSelectedMonth() { function renderCalendar() { let datesHtml = ""; let daysHtml = ""; - const daysEl = document.getElementById("weekdays"); const datesEl = document.getElementById("month-dates"); const daysInMonth = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth() + 1, 0).getDate(); From 82a80f5462d8182a2f8676d61911ed5f38feb779 Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Wed, 7 Feb 2024 18:31:24 +0100 Subject: [PATCH 05/35] to be finished --- index.html | 39 +++++++++++++++++++++++++-------------- styles.css | 19 +++++++++++++++++++ 2 files changed, 44 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 664b498..c79bb8c 100644 --- a/index.html +++ b/index.html @@ -12,23 +12,34 @@ - - +
From bd4bfe28accf8c91a1d5b63fa89fe6c8c2601b81 Mon Sep 17 00:00:00 2001 From: Cristiano Valente <88455718+cris-valente@users.noreply.github.com> Date: Sun, 11 Feb 2024 23:28:23 +0100 Subject: [PATCH 20/35] Revert "comment test for Florin" --- index.js | 299 ++++++++++++++++++++++++------------------------------- 1 file changed, 129 insertions(+), 170 deletions(-) diff --git a/index.js b/index.js index 90f123f..e5ef0ee 100644 --- a/index.js +++ b/index.js @@ -1,12 +1,9 @@ -// test comment from Florin + //import { calendar } from "./data.js"; -import { - loadCalendarData, - sendChkBxStateToLocalStorage, - saveCalendarData, -} from "./local-storage.js"; +import { loadCalendarData, sendChkBxStateToLocalStorage, saveCalendarData } from "./local-storage.js"; let text = ``; + // load calendar data from local storage // if doesn't exist, load from hardcoded JSON file var calendar = loadCalendarData(); @@ -15,33 +12,28 @@ var calendar = loadCalendarData(); let SelectedMonth = new Date(); let now = new Date(); -//Event listener for 'changing months' and expading tasks -document.addEventListener("click", (e) => { - if (e.target.id === "previous-month") { - SelectedMonth.setMonth(SelectedMonth.getMonth() - 1); - renderSelectedMonth(); - } else if (e.target.id === "next-month") { - SelectedMonth.setMonth(SelectedMonth.getMonth() + 1); - renderSelectedMonth(); - } else if (e.target.dataset.type === "task") { - //Hiding description if task has no description - let hide = ""; - if (!e.target.dataset.desc) { - hide = "hide"; +//Event listener for 'changing months' and expading tasks +document.addEventListener('click', (e) => { + if (e.target.id === 'previous-month') { + SelectedMonth.setMonth(SelectedMonth.getMonth() - 1); + renderSelectedMonth() + } + else if (e.target.id === 'next-month') { + SelectedMonth.setMonth(SelectedMonth.getMonth() + 1); + renderSelectedMonth() } - //Expanding on click - document - .getElementById(`expanded-task-extra-space-${e.target.id}`) - .classList.toggle("hide"); - document.getElementById( - `expanded-task-extra-space-${e.target.id}` - ).innerHTML = ` + else if (e.target.dataset.type === "task") { + //Hiding description if task has no description + let hide = '' + if (!e.target.dataset.desc) { + hide = 'hide' + } + //Expanding on click + document.getElementById(`expanded-task-extra-space-${e.target.id}`).classList.toggle('hide') + document.getElementById(`expanded-task-extra-space-${e.target.id}`).innerHTML = `

Task

${e.target.dataset.name}

@@ -62,107 +54,93 @@ document.addEventListener("click", (e) => {

Description

${e.target.dataset.desc}

-
`; + ` - document.getElementById(e.target.id).classList.toggle("transparent"); - document - .getElementById(`days-${e.target.id}`) - .classList.toggle("transparent"); - } -}); + document.getElementById(e.target.id).classList.toggle('transparent') + document.getElementById(`days-${e.target.id}`).classList.toggle('transparent') + } +}) function renderSelectedMonth() { - const monthEl = document.getElementById("month"); - const month = SelectedMonth.toLocaleString("default", {month: "long"}); - const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1); - - monthEl.textContent = ` + const monthEl = document.getElementById('month') + const month = SelectedMonth.toLocaleString('default', { month: 'long' }) + const capitalizedMonth = month.charAt(0).toUpperCase() + month.slice(1); + + monthEl.textContent = ` ${capitalizedMonth} - ${SelectedMonth.getFullYear()}`; - text = ``; - - renderCalendar(); - renderTasks(); - adaptCheckboxClass(); - //Need to figure out why page is not rendering from local storage when changing months - sendChkBxStateToLocalStorage(); - loadCalendarData(); - saveCalendarData(calendar); + ${SelectedMonth.getFullYear()}` + text = ``; + + renderCalendar() + renderTasks() + adaptCheckboxClass() + //Need to figure out why page is not rendering from local storage when changing months + sendChkBxStateToLocalStorage() + loadCalendarData(); + saveCalendarData(calendar) } function renderCalendar() { - let datesHtml = ""; - let daysHtml = ""; - const daysEl = document.getElementById("weekdays"); - const datesEl = document.getElementById("month-dates"); - const daysInMonth = new Date( - SelectedMonth.getFullYear(), - SelectedMonth.getMonth() + 1, - 0 - ).getDate(); + let datesHtml = ""; + let daysHtml = ""; + const daysEl = document.getElementById("weekdays"); + const datesEl = document.getElementById("month-dates"); + const daysInMonth = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth() + 1, 0).getDate(); - for (let i = 1; i <= daysInMonth; i++) { - let currentDate = new Date( - SelectedMonth.getFullYear(), - SelectedMonth.getMonth(), - i - ); + for (let i = 1; i <= daysInMonth; i++) { + let currentDate = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i); - let currentDayOfWeek = new Intl.DateTimeFormat(undefined, { - weekday: "short", - }) - .format(currentDate)[0] - .toUpperCase(); + let currentDayOfWeek = new Intl.DateTimeFormat(undefined, { + weekday: "short", + }).format(currentDate)[0].toUpperCase(); - if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) { - daysHtml += ` + if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) { + daysHtml += `

${currentDayOfWeek}

`; - datesHtml += ` + datesHtml += `

${i}

`; - } else { - daysHtml += ` + } + else { + daysHtml += `

${currentDayOfWeek}

`; - datesHtml += ` + datesHtml += `

${i}

-
`; + ` + } } - } - daysEl.innerHTML = daysHtml; - datesEl.innerHTML = datesHtml; + daysEl.innerHTML = daysHtml; + datesEl.innerHTML = datesHtml; } // Rendering Local Storage data and checkboxes function renderTasks() { - const daysInMonth = new Date( - SelectedMonth.getFullYear(), - SelectedMonth.getMonth() + 1, - 0 - ).getDate(); - calendar.forEach((category) => { - text += ` + const daysInMonth = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth() + 1, 0).getDate(); + + calendar.forEach((category) => { + text += `

${category.categoryName}

`; - category.activityTypes.forEach((activity) => { - text += ` + category.activityTypes.forEach((activity) => { + text += `

${activity.activityName}

`; - activity.Tasks.forEach((task) => { - text += ` + activity.Tasks.forEach((task) => { + text += `

${task.days}

`; - text += ` + text += `

${task.taskName}

`; - for (let i = 1; i <= daysInMonth; i++) { - // testing i to determine if i is today - let todayClass = ""; - - if ( - i === now.getDate() && - now.getTime() === SelectedMonth.getTime() - ) { - todayClass = "todays-checkbox-container"; - } - //Checkboxes initial state changed to 'checked' - //when data from Local Storage determines so - let isChecked = ""; - let day = new Date( - SelectedMonth.getFullYear(), - SelectedMonth.getMonth(), - i - ); - for (let date of task.checkedCb) { - if (date == day) { - isChecked = "checked"; - } - } - - //Rendering chkbx with all needed data: - //(date, assigned task and day and if it's initially checked) - text += ` + for (let i = 1; i <= daysInMonth; i++) { + // testing i to determine if i is today + let todayClass = ''; + + if (i === now.getDate() && now.getTime() === SelectedMonth.getTime()) { + todayClass = "todays-checkbox-container" + } + //Checkboxes initial state changed to 'checked' + //when data from Local Storage determines so + let isChecked = '' + let day = new Date(SelectedMonth.getFullYear(), SelectedMonth.getMonth(), i) + for (let date of task.checkedCb){ + if (date == day) { + isChecked = "checked" + } + } + + //Rendering chkbx with all needed data: + //(date, assigned task and day and if it's initially checked) + text += `
- `; - } - //hidden div for expanding tasks - text += ` + ` + } + //hidden div for expanding tasks + text += `
-
`; - }); + id="expanded-task-extra-space-${task.taskName.split(" ").join('-').toLowerCase()}"> + ` + }); + }); }); - }); - document.getElementById("main-grid").innerHTML = text; + document.getElementById("main-grid").innerHTML = text; } // Making checkboxes bold function adaptCheckboxClass() { - for (let checkbox of document.getElementsByClassName("checkbox")) { - //For every chbx testing if it's assigned day matches current day - //For month days and week days - if ( - checkbox.dataset.assignedDay.includes(checkbox.dataset.weekday) || - Number(checkbox.dataset.assignedDay) === - Number(checkbox.dataset.day.slice(7, 10)) - ) { - //Testing to know if task is past due date - if (compareDates(checkbox.dataset.day, now)) { - checkbox.classList.add("bold-checkbox", "future"); - } else { - checkbox.classList.add("bold-checkbox", "past"); - } + + for (let checkbox of document.getElementsByClassName('checkbox')) { + + //For every chbx testing if it's assigned day matches current day + //For month days and week days + if (checkbox.dataset.assignedDay.includes(checkbox.dataset.weekday)|| + Number(checkbox.dataset.assignedDay) === Number(checkbox.dataset.day.slice(7, 10))) { + //Testing to know if task is past due date + if (compareDates(checkbox.dataset.day, now)){ + checkbox.classList.add('bold-checkbox', 'future') + } + else { + checkbox.classList.add('bold-checkbox', 'past') + } + } } - } } // calling functions @@ -264,11 +223,11 @@ sendChkBxStateToLocalStorage(); loadCalendarData(); renderSelectedMonth(); -function compareDates(chbx, today) { - let currentChbx = new Date(chbx).getTime(); - let todaysDate = new Date(today).getTime(); - - if (currentChbx >= todaysDate) { - return true; - } -} +function compareDates (chbx, today) { + let currentChbx = new Date(chbx).getTime(); + let todaysDate = new Date(today).getTime(); + + if (currentChbx >= todaysDate) { + return true + } + }; From caa3cb82bc3a3a2fb426925a5b43a195955118bb Mon Sep 17 00:00:00 2001 From: Morais-C Date: Sun, 11 Feb 2024 22:42:24 +0000 Subject: [PATCH 21/35] Bug Fix --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2d52c85..f9e41fb 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
- +
From 72c701560e8143dcda666e3d916ab142e2fe29fa Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Mon, 12 Feb 2024 00:09:05 +0100 Subject: [PATCH 22/35] bug-fix/arrows controls, nav bar width --- index.html | 18 ++++++++++-------- styles.css | 4 ++-- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index f9e41fb..98db030 100644 --- a/index.html +++ b/index.html @@ -36,14 +36,16 @@
-
+

New Task

@@ -145,7 +145,9 @@ id="save-btn-add-modal">Save
- +
+ New task saved! +
diff --git a/index.js b/index.js index 33eec3c..f506991 100644 --- a/index.js +++ b/index.js @@ -63,7 +63,8 @@ document.addEventListener('click', (e) => { document.getElementById(`days-${e.target.id}`).classList.toggle('transparent') } else if (e.target.id === "add-btn") { - document.getElementById('add-btn-modal').classList.toggle('hide') + modalCircleAnimation() + } else if (e.target.id === "weekly-btn-add-modal") { weeklyBtnInAddModal.classList.add('add-modal-btn-primary') @@ -83,10 +84,16 @@ document.addEventListener('click', (e) => { document.getElementById('weekly-option').classList.add('hide') } else if (e.target.id === "cancel-btn-add-modal") { - document.getElementById('add-btn-modal').classList.add('hide') + confirmCancelInModal() + + } else if (e.target.id === "save-btn-add-modal") { - document.getElementById('add-btn-modal').classList.add('hide') + modalCircleAnimation() + document.getElementById('new-task-saved').classList.remove('fade') + setTimeout(() => { + document.getElementById('new-task-saved').classList.add('fade') + }, 2000); } }) @@ -260,3 +267,22 @@ function compareDates (chbx, today) { return true } }; + +function modalCircleAnimation() { + const modal = document.getElementById('add-btn-modal') + const modalStyles = window.getComputedStyle(modal); + if (modalStyles.getPropertyValue('clip-path') === 'circle(0% at 0% 0%)') { + modal.style.clipPath = 'circle(200% at 10% 10%)' + } + + else { + modal.style.clipPath = 'circle(0% at 0% 0%)' + } +} + +function confirmCancelInModal() { + let text = "Are you sure you want to cancel?"; + if (confirm(text) == true) { + modalCircleAnimation() + } + } \ No newline at end of file diff --git a/styles.css b/styles.css index bf1adba..a895b2f 100644 --- a/styles.css +++ b/styles.css @@ -23,6 +23,31 @@ body { color: var(--white, white); } +#new-task-saved { + position: fixed; + background-color: var(--main-bg-color); + color: var(--white, white); + position: fixed; + width: 500px; + height: 50px; + bottom: 5%; + left: 50%; + margin-top: -100px; /* Negative half of height. */ + margin-left: -250px; /* Negative half of width. */ + z-index: 4; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + opacity: 90%; + transition: opacity .3s ease-out; +} + +.fade { + opacity: 0%!important; +} + + /* Outer frame user controls grid */ .frame{ @@ -122,8 +147,11 @@ body { padding: 24px; display: flex; flex-direction: column; - row-gap: 10px; - box-shadow: 0 0 10px #454545 ; + row-gap: 10px; + box-shadow: 11px 18px 54px rgba(0,0,0, .50); + /* box-shadow: 5px 5px 5px #080808; */ + clip-path: circle(0% at 0% 0%); + transition: clip-path .5s ease-in-out; } .add-btn-modal input[type='text'], From ed89e8efa232f1458683397833456daa4b43f790 Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Mon, 12 Feb 2024 16:50:12 +0100 Subject: [PATCH 28/35] spacing --- index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index f506991..337cff5 100644 --- a/index.js +++ b/index.js @@ -67,28 +67,33 @@ document.addEventListener('click', (e) => { } else if (e.target.id === "weekly-btn-add-modal") { + weeklyBtnInAddModal.classList.add('add-modal-btn-primary') weeklyBtnInAddModal.classList.remove('add-modal-btn-secondary') monthlyBtnInAddModal.classList.remove('add-modal-btn-primary') monthlyBtnInAddModal.classList.add('add-modal-btn-secondary') + document.getElementById('weekly-option').classList.remove('hide') document.getElementById('monthly-option').classList.add('hide') } else if (e.target.id === "monthly-btn-add-modal") { + monthlyBtnInAddModal.classList.add('add-modal-btn-primary') monthlyBtnInAddModal.classList.remove('add-modal-btn-secondary') weeklyBtnInAddModal.classList.remove('add-modal-btn-primary') weeklyBtnInAddModal.classList.add('add-modal-btn-secondary') + document.getElementById('monthly-option').classList.remove('hide') document.getElementById('weekly-option').classList.add('hide') } else if (e.target.id === "cancel-btn-add-modal") { + confirmCancelInModal() - } else if (e.target.id === "save-btn-add-modal") { + modalCircleAnimation() document.getElementById('new-task-saved').classList.remove('fade') setTimeout(() => { From 522598dc71afe066cce0396b3c905be36ced64d2 Mon Sep 17 00:00:00 2001 From: cris-valente <88455718+cris-valente@users.noreply.github.com> Date: Mon, 12 Feb 2024 16:55:57 +0100 Subject: [PATCH 29/35] erh --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 337cff5..2bcc505 100644 --- a/index.js +++ b/index.js @@ -63,6 +63,7 @@ document.addEventListener('click', (e) => { document.getElementById(`days-${e.target.id}`).classList.toggle('transparent') } else if (e.target.id === "add-btn") { + modalCircleAnimation() } From cd3dcb9c70b67e9f50cc57bf922ea67b367497fe Mon Sep 17 00:00:00 2001 From: Diaaana03 <88292313+Diaaana03@users.noreply.github.com> Date: Mon, 12 Feb 2024 22:08:37 +0000 Subject: [PATCH 30/35] logo added --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 97bbe62..c147f6a 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@
- +
From a20cccd2c5cde0a547aafa721632e9970be43462 Mon Sep 17 00:00:00 2001 From: Morais-C Date: Wed, 14 Feb 2024 16:42:44 +0000 Subject: [PATCH 31/35] Adding Undo Feature (for Checkboxes only) --- index.html | 194 +++++++++++++++++++++-------------------------- index.js | 8 +- local-storage.js | 6 +- undo-redo.js | 49 ++++++++++++ 4 files changed, 147 insertions(+), 110 deletions(-) create mode 100644 undo-redo.js diff --git a/index.html b/index.html index c147f6a..7cffab2 100644 --- a/index.html +++ b/index.html @@ -22,133 +22,111 @@
- + - - - - + + + +
- -
-