Merge pull request #23 from bikingbadger/2-make-it-more-obvious-how-t…

…o-select-a-task-for-current-pomodoro Make it more obvious how to select a task for current pomodoro
bikingbadger · Mar 4, 2020 · 53b0184 · 53b0184
2 parents fbf01df + 554aa17
commit 53b0184
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/app.js b/app.js
@@ -69,12 +69,13 @@ const templateTodoTasks = () => {
   // Map each task to a list item
   const taskList = todoTasks
     .map((task, index) => {
-      return `<li data-item id="task-item-${index}" class="list-inside list-disc">${task}</li>`;
+      return `<input id="task-item-${index}" data-item type="radio" class="form-radio" name="task-item" value="${task}"><label for="task-item-${index}"> ${task}</label><br>`;
+      // <li data-item id="task-item-${index}" class="list-inside list-disc">${task}</li>
     })
     .join("");
 
   // Return an ordered list with all the tasks
-  return `<ol>${taskList}</ol>`;
+  return taskList;
 };
 
 /**
@@ -262,6 +263,7 @@ const markTaskComplete = currentTask => {
  * @param {Event} event
  */
 const clickDelegator = event => {
+
   if (event.target.hasAttribute("data-reset")) {
     clearInterval();
     timerData.timer = 1500;
@@ -281,12 +283,11 @@ const clickDelegator = event => {
   }
 
   if (event.target.hasAttribute("data-task")) {
-    console.log("Adding Task");
     addTask();
   }
 
   if (event.target.hasAttribute("data-item")) {
-    setCurrentTask(event.target.innerText);
+    setCurrentTask(event.target.value);
   }
 
   if (event.target.hasAttribute("data-current-task")) {

diff --git a/index.html b/index.html
@@ -34,16 +34,18 @@ <h1 class="text-5xl font-bold text-center">Pompom</h1>
             <section class="grid col-span-2 justify-center">
                 <input type="text" name="newTask" id="newTask" class="col-span-2 shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                 <button class="col-span-1 bg-transparent hover:bg-green-500 text-green-700 font-semibold uppercase hover:text-white py-2 md:px-4 border border-green-500 hover:border-transparent rounded text-xs md:text-sm" data-task>Add</button>
-                <div class="col-span-3 italic text-sm">Add tasks to todo and then click on the item below to use as current item</div>
+                <div class="col-span-3 italic text-sm">Add tasks to todo</div>
 
             </section>
-            <section class="grid col-span-2 md:col-span-1">
-                <h2 class="text-xl font-bold text-center uppercase col-span-3 ">Todo List</h2>
-                <div data-task-list class="col-span-3"></div>
+            <section class="grid col-span-2 md:col-span-1 content-start">
+                <h2 class="text-xl font-bold text-center uppercase">Todo List</h2>
+                <div class="italic text-sm text-center">Select a task below to use as current item</div>
+                <div data-task-list class="pt-4 px-4"></div>
             </section>
-            <section class="complete grid col-span-2 md:col-span-1">
+            <section class="grid col-span-2 md:col-span-1 content-start">
                 <h2 class="text-xl font-bold text-center uppercase">Completed Tasks</h2>
-                <div data-complete-tasks></div>
+                <div class="italic text-sm text-center">Tasks completed will be listed below</div>
+                <div data-complete-tasks class="pt-4 px-4"></div>
             </section>
         </main>