code format cleanup

content.js

@@ -1,14 +1,13 @@
 /* This runs after a web page loads */
 
-// SETTINGS
+// SETTINGS -------------------------
+// Tweak the following to fit your preferences
 
 var pauseTime = 10; // in seconds
 
-var mainMessage = "Take deep breaths. ";
+var mainMessage = "Take deep breaths.";
 
 const websiteList = [
-    "www.4chan.org",
-    "www.9gag.com",
     "www.facebook.com",
     "www.instagram.com",
     "www.linkedin.com",
@@ -22,18 +21,17 @@ const websiteList = [
     "www.pinterest.com",
 ];
 
-// FUNCTION DEFINITIONS AND HELPERS
+// FUNCTION DEFINITIONS AND HELPERS -------------------------
 
+// Check if the current website is on the list
 function currentWebsiteInList(websiteList) {
-    // get the current website's URL
     var currentUrl = window.location.hostname;
 
-    // if URL doesn't include subdomain "www", add it
+    // If URL doesn't include subdomain "www", add it
     if (currentUrl.indexOf("www.") === -1) {
         currentUrl = "www." + currentUrl
     };
 
-    // loop through the list of websites and check if the current website's URL matches any of them
     for (let i = 0; i < websiteList.length; i++) {
         if (currentUrl === websiteList[i]) {
             return true;
@@ -43,18 +41,19 @@ function currentWebsiteInList(websiteList) {
 };
 
 function enableOverlay() {
-    // create the overlay parent element
     var overlayElement = document.createElement("div");
+
     overlayElement.id = "overlayElement";
+
     document.body.appendChild(overlayElement);
 
+    // Breathing animation
     overlayElement.innerHTML += `
     <div class="breathingContainer">
         <div class="breathingBox"></div>
     </div>
     `;
 
-    // insert mindfulness message
     overlayElement.innerHTML += `
         <p class="paddingHelper"></p>
         <p class="mainMessage">${mainMessage}</p>
@@ -66,7 +65,9 @@ function enableOverlay() {
 
 function startCountdownTimer() {
     overlayElement.innerHTML += `<p id="countdownMessage""></p>`
-    let timeleft = pauseTime * 1000;
+
+    let timeleft = pauseTime * 1000; // * 1000 to convert from milliseconds to seconds
+
     let countdownTimer = setInterval(function(){
         if(timeleft < 0) {
             clearInterval(countdownTimer);
@@ -81,13 +82,15 @@ function startCountdownTimer() {
 function timeOver() {
     document.getElementById("countdownMessage").style.display = "none";
 
+    // Create and set up the "close tab" button
     let closeButton = document.createElement("button");
     closeButton.id = "closeButton";
     closeButton.innerHTML = "Close this tab";
     closeButton.addEventListener("click", function() {
         window.close()
     });
 
+    // Create and set up the "continue" button
     let hostname = window.location.hostname.replace("www.", "");
     let domainName = hostname.split('.')[0];
     domainName = domainName.charAt(0).toUpperCase() + domainName.slice(1);
@@ -99,11 +102,13 @@ function timeOver() {
         document.getElementById("overlayElement").style.display = "none";
     });
 
+    // To add newline between buttons
     let p = document.createElement("p");
+
     overlayElement.append(closeButton, p, continueButton);
 };
 
-// MAIN
+// MAIN -------------------------
 
 if (currentWebsiteInList(websiteList)) {
     enableOverlay();

styles.css

@@ -8,9 +8,9 @@
 }
 
 #overlayElement {
-  position: fixed; /* sit on top of the page content */
+  position: fixed; /* Sit on top of the page content */
   display: block;
-  width: 100%; /* to cover the whole page */
+  width: 100%; /* To cover the whole page */
   height: 100%;
   top: 0;
   left: 0;
@@ -19,7 +19,7 @@
   z-index: 99999;
   background-color: var(
     --arc-palette-background
-  ); /* use current Arc space's theme */
+  ); /* Use current Arc space's theme. See more at https://arc.net/colors.html */
   text-align: center;
 }
 
@@ -51,12 +51,13 @@
   font-family: var(--font-family);
   padding: 0.75rem 3rem;
   border: 0;
-  border-radius: 0.317rem;
+  border-radius: 0.3rem;
   font-weight: bold;
   line-height: 1.5;
   cursor: pointer;
   -webkit-font-smoothing: antialiased;
 }
+
 #closeButton:hover,
 #continueButton:hover {
   opacity: calc(var(--opacity) - 0.1);