added radio deselection and improved date picker

Signed-off-by: Vedansh Saini <[email protected]>

Author: vedansh-5

src/popup.html

@@ -29,28 +29,17 @@ <h3  class="text-3xl font-semibold ">Scrum Helper</h3>
 					<p class="font-semibold">SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.</p>
 				</div>
 
-				<!-- Change from here -->
 			<div class="center mt-2 ">
 					<label class="flex items-center justify-center gap-2">
 						Disable
-						<!-- <input type="checkbox" id="enable"> -->
 						<input type="checkbox" value="" id="enable" class="sr-only peer" checked>
 						<div class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
 						<span class=""></span>
 						Enable
 					</label>
 			</div>
-			<!-- <div class="row">
-				<div class="col s12">
-					<ul class="tabs">
-						<li class="tab col s6" title="I am doing CodeHeat!"><a id="codeheatTab" href="#codeheatBox">CodeHeat</a></li>
-						<li class="tab col s6" title="I am doing GSoC!"><a id="gsocTab" href="#gsocBox">GSoC</a></li>
-					</ul>
-				</div>
-			</div> -->
 		</div>
 
-		<!-- Till here -->
 		<div class="rounded-2xl">
 			<div class=" border-gray-100 border-2 bg-white rounded-3xl pl-4 py-2 mx-2 my-2">
 				<div>
@@ -75,7 +64,7 @@ <h4>Your Github Username</h4>
 						</div>
 					</div>
 
-					<div class="flex justify-between items-center mt-2">
+					<div id="customDateContainer" class="flex justify-between items-center mt-2">
 						<div>
 							<label for="startingDate">Start Date:</label>
 							<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">

src/scripts/popup.js

@@ -64,4 +64,20 @@ function toggleRadio(radio){
         endDateInput.value = getToday();
     }
    startDateInput.disabled = endDateInput.disabled = true;
-}
+}
+document.getElementById('customDateContainer').addEventListener('click', () => {
+    document.querySelectorAll('input[name="timeframe"]').forEach(radio => radio.checked = false);
+    document.getElementById('startingDate').disabled = false;
+    document.getElementById('endingDate').disabled = false;
+});
+// Not working properly
+// document.getElementById('startingDate').addEventListener('focus', () => {
+//     document.querySelectorAll('input[name="timeframe"]').forEach(radio => radio.checked = false);
+//     document.getElementById('startingDate').disabled = false;
+//     document.getElementById('endingDate').disabled = false;
+// });
+// document.getElementById('endingDate').addEventListener('focus', () => {
+//     document.querySelectorAll('input[name="timeframe"]').forEach(radio => radio.checked = false);
+//     document.getElementById('startingDate').disabled = false;
+//     document.getElementById('endingDate').disabled = false;
+// });