ans key whitespace removed and added toast

Author: sauravhathi

content.js

@@ -4,6 +4,11 @@ let inter = null;
 
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     if (request.message === "start") {
+        if (Object.keys(request.answer_key).length === 0) {
+            toast("Please enter the answer key", "error");
+            return;
+        }
+
         attempt(request.answer_key, request.time);
     } else if (request.message === "stop") {
         stopAttempt();
@@ -15,12 +20,14 @@ const attempt = (ans_key, time) => {
     const len = ans.length;
     let i = 0;
 
+    toast("Started attempting the test");
     function attemptQuestion() {
         document.querySelector(`#${ans[i]}_${i + 1}`).click();
         document.querySelector("#main_div > div.tableWidthPercent > div.onlineTestLeftDiv > div.qnav > span.saveNextButton > a").click();
         i++;
 
         if (i === len) {
+            toast("Finished attempting the test");
             clearInterval(inter);
             document.querySelector('#activator').click();
             document.querySelector('input[name="rd"][value="Y"]').click();
@@ -36,6 +43,30 @@ const attempt = (ans_key, time) => {
 function stopAttempt() {
     if (inter) {
         clearInterval(inter);
-        console.log("Stopped the attempt");
+        toast("Stopped attempting the test");
     }
+}
+
+function toast(message, type = "success") {
+    const div = document.createElement("div");
+    div.id = "toast";
+    const text = document.createTextNode(message);
+    div.appendChild(text);
+    const styleList = [
+        'background-color: ' + (type === 'success' ? '#350054' : '#ff0000'),
+        'color: ' + (type === 'success' ? '#fff' : '#fff'),
+    ];
+    div.style.cssText = styleList.join(";");
+    document.body.appendChild(div);
+    setTimeout(() => {
+        div.style.opacity = "1";
+        div.style.transform = "translateY(0)";
+    }, 1);
+    setTimeout(() => {
+        div.style.opacity = "0";
+        div.style.transform = "translateY(-100%)";
+        setTimeout(() => {
+            document.body.removeChild(div);
+        }, 500);
+    }, 2000);
 }

popup/popup.css

@@ -130,4 +130,18 @@ footer span {
 
 footer span a {
     font-size: 0.8rem;
+}
+
+#toast {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    position: fixed;
+    bottom: 1%;
+    left: 1%;
+    transform: translateY(100%);
+    padding: 1rem;
+    border-radius: 0.25rem;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    transition: all 0.5s ease-in-out;
+    z-index: 9999;
 }

popup/popup.js

@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const start = document.getElementById("start");
     const stop = document.getElementById("stop");
     const time = document.getElementById("time");
+    let ans_key = document.getElementById("test_answer_key");
     const time_value = document.getElementById("time_value");
     time_value.innerText = time.value + "s";
 
@@ -10,16 +11,17 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 
     start.addEventListener("click", function () {
-        const ans_key = document.getElementById("test_answer_key").value.replace(/\s/g, "");
-
-        if (ans_key == "") {
-            alert("Please enter the answer key");
-            return;
-        }
+        let ans_key = document.getElementById("test_answer_key").value;
 
         chTab("start", ans_key, time.value);
         start.disabled = true;
     });
+
+    ans_key.addEventListener("input", function () {
+        ans_key.value = ans_key.value.toUpperCase().replace(/\s/g, "");
+        start.disabled = false;
+    });
+
     stop.addEventListener("click", function () {
         chTab("stop", "", 0);
         start.disabled = true;