From a7a8d0fe095879314d85a597e9f4bb1c983e03f1 Mon Sep 17 00:00:00 2001 From: shrinishant Date: Wed, 20 Oct 2021 11:58:16 +0530 Subject: [PATCH 1/3] Added the feature of locally storing the tasks in the browser using chrome storage api --- script.js | 93 +++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 87 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index 4c5d283..60acfc0 100644 --- a/script.js +++ b/script.js @@ -24,6 +24,29 @@ let pomodoro = "pomodoro" let pomodorosCompleted = 0 let selectedTaskElement + +const templateClone = template.content.cloneNode(true) +const listItem = templateClone.querySelector('.list-item') +const checkbox = templateClone.querySelector('input[type=checkbox]') + +const taskName = templateClone.querySelector('.task-name') +const pomodoroCount = templateClone.querySelector('.pomodoro-count') + +chrome.storage.local.get('pomo', function (result) { + console.log(result.pomo) + for(let x=0; x { complete: false, id: new Date().valueOf().toString() } + // add task to array tasks.push(newTask) - // render task - addTask(newTask) + + + // Local Chrome Storage + + chrome.storage.local.get({pomo: []}, function (result) { + + var pomo = result.pomo; + pomo.push({newTask: newTask}); + + chrome.storage.local.set({pomo: pomo}, function () { + + chrome.storage.local.get('pomo', function (result) { + console.log(result.pomo) + }); + }); + }); + + + addTask(newTask, true); // clear inputs taskNameInput.value = "" @@ -240,6 +281,28 @@ document.addEventListener('click', e => { // find the id of the task to remove the task object from the array const taskId = listItem.dataset.taskId + + // console.log(taskId) -> Correct Id + + chrome.storage.local.get('pomo', function (result) { + + var pomo = result.pomo; + + pomo = pomo.filter((item, i) => { + // console.log(i); + // console.log(item.newTask.id); + return item.newTask.id !== taskId + }) + // console.log("pomo" + pomo); + + chrome.storage.local.set({pomo: pomo}, function () { + + chrome.storage.local.get('pomo', function (result) { + console.log(result.pomo) + }); + }); + }); + tasks = tasks.filter(task => task.id !== taskId ) // remove title when selected task is deleted @@ -270,17 +333,35 @@ document.addEventListener('click', e => { }) // add task as list item -function addTask(task) { +function addTask(task, append_pomo) { const templateClone = template.content.cloneNode(true) const listItem = templateClone.querySelector('.list-item') listItem.dataset.taskId = task.id const checkbox = templateClone.querySelector('input[type=checkbox]') checkbox.checked = task.complete + const taskName = templateClone.querySelector('.task-name') - taskName.innerHTML = task.name const pomodoroCount = templateClone.querySelector('.pomodoro-count') - pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros - tasksList.appendChild(templateClone) + + + if(append_pomo){ + chrome.storage.local.get('pomo', function (result) { + console.log(result.pomo.length); + if(result){ + taskName.innerHTML = task.name; + pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros; + tasksList.appendChild(templateClone) + console.log(task.id + "\n"); + } + }); + }else{ + // console.log(task); + taskName.innerHTML = task.name + + pomodoroCount.innerHTML = task.completedPomodoros.toString() + '/' + task.totalPomodoros + tasksList.appendChild(templateClone) + console.log(task.id + "\n"); + } } // countdown function From c93889330acd013fcd630a46ce56506e80669067 Mon Sep 17 00:00:00 2001 From: shrinishant Date: Wed, 20 Oct 2021 15:57:24 +0530 Subject: [PATCH 2/3] Debugged the last commit --- script.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/script.js b/script.js index 60acfc0..2f3363a 100644 --- a/script.js +++ b/script.js @@ -33,17 +33,19 @@ const taskName = templateClone.querySelector('.task-name') const pomodoroCount = templateClone.querySelector('.pomodoro-count') chrome.storage.local.get('pomo', function (result) { - console.log(result.pomo) - for(let x=0; x Date: Wed, 20 Oct 2021 17:25:24 +0530 Subject: [PATCH 3/3] Implemented the Theme Change Option for the users to the chrome extension --- background.js | 14 ++++++++++++++ index.css | 31 ++++++++++++++++++++++++++++++- index.html | 19 +++++++++++++++++++ manifest.json | 6 ++++++ script.js | 26 +++++++++++++++++++++++++- 5 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 background.js diff --git a/background.js b/background.js new file mode 100644 index 0000000..b31d401 --- /dev/null +++ b/background.js @@ -0,0 +1,14 @@ + +var theme_selector = document.getElementById('theme_toggler'); + +var theme_selected = theme_selector[0].value; + +const theme_fun = () => { + console.log('nishant'); + + if(theme_selected === '2'){ + document.body.style.backgroundColor = '#fafafa'; + } +} + +theme_selector.addEventListener('click', theme_fun); \ No newline at end of file diff --git a/index.css b/index.css index 07f7016..6739823 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap'); + + body { background-color: rgb(51, 11, 116); color: white; @@ -17,6 +19,7 @@ body { .buttons { width: fit-content; margin: auto; + /* background-color: rgb(28, 97, 74); */ } .button { @@ -151,4 +154,30 @@ li { #tasks-container { width: 500px; } -} \ No newline at end of file +} + +#theme-choose { + padding: 1rem 1.5rem; +} + +.form-select { + display: block; + width: 100%; + padding: 0.375rem 2.25rem 0.375rem 0.75rem; + -moz-padding-start: calc(0.75rem - 3px); + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #fff; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 16px 12px; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } \ No newline at end of file diff --git a/index.html b/index.html index 85e476d..93a1ad4 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,10 @@ + + +