AnkushSinghGandhi · shrinishant · Oct 20, 2021 · Oct 20, 2021 · Oct 20, 2021
diff --git a/background.js 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);
diff --git 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;
     }
-}
+}
+
+#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;
+  }
diff --git a/index.html b/index.html
@@ -9,6 +9,10 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
+
+    <!-- bootstrap cdn -->
+    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+     integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
 </head>
 <body>
     <audio id="audio">
@@ -25,6 +29,18 @@
         <div id="start-btn">Start</div>
         <div id="reset-btn">Reset</div>
       </div>
+
+      <div id="theme-choose">
+        <button id="Vanilla">Vanilla</button>
+        <button id="Default">Default</button>
+        <button id="BlueBerry">BlueBerry</button>
+        <!-- <select id="theme_toggler" class="form-select" onchange="theme_fun()">
+          <option selected>Change Theme</option>
+          <option value="1">Default</option>
+          <option value="2">Vanilla</option>
+          <option value="3">BlueBerry</option>
+        </select> -->
+      </div>
 
       <div id="current-task-display">
         <div id="message">WORKING ON</div>
@@ -57,5 +73,8 @@
         </li>
       </template>
 </body>
+<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
+integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
 <script src="script.js"></script>
+<!-- <script src="background.js"></script> -->
 </html>
diff --git a/manifest.json b/manifest.json
@@ -7,6 +7,12 @@
         "default_popup": "index.html",
         "default_icon": "logo.png"
     },
+    "content_scripts": [
+        {
+          "matches": ["<all_urls>"],
+          "js": ["background.js"]
+        }
+    ],
     "icons": {
         "16": "logo.png",
         "32": "logo.png",

diff --git a/script.js b/script.js
@@ -24,6 +24,33 @@ let pomodoro = "pomodoro"
 let pomodorosCompleted = 0
 let selectedTaskElement
 
+// theme_work at last
+
+
+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)
+    if(result){
+        for(let x=0; x<result.pomo.length; x++){
+            const newTask = {
+                name: result.pomo[x].newTask.name,
+                completedPomodoros: result.pomo[x].newTask.completedPomodoros,
+                totalPomodoros: result.pomo[x].newTask.totalPomodoros,
+                complete: result.pomo[x].newTask.complete,
+                id: result.pomo[x].newTask.id
+            }
+
+            addTask(newTask ,false);
+        }
+    }
+});
+
 let array = ["minutes","seconds","pause","countdownTimer","pbutton"];
 chrome.storage.sync.get(array,function(value){
     if(!chrome.runtime.error){
@@ -220,10 +247,28 @@ saveBtn.addEventListener('click', e => {
         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 +285,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 +337,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
@@ -364,4 +449,26 @@ function reset() {
     }
 
     // TODO add option to start next round automatically
-}
+}
+
+
+var vanilla_btn = document.getElementById('Vanilla');
+var default_btn = document.getElementById('Default');
+var blueberry_btn = document.getElementById('BlueBerry');
+
+var timer = document.getElementById('timer');
+
+vanilla_btn.addEventListener('click', ()=>{
+    document.body.style.backgroundColor = 'rgb(28, 97, 74)';
+    timer.style.backgroundColor = 'mediumaquamarine';
+})
+
+default_btn.addEventListener('click', ()=>{
+    document.body.style.backgroundColor = 'rgb(51, 11, 116)';
+    timer.style.backgroundColor = 'rgb(77, 25, 161)';
+})
+
+blueberry_btn.addEventListener('click', ()=>{
+    document.body.style.backgroundColor = 'rgb(116, 8, 8)';
+    timer.style.backgroundColor = 'red';
+})