Added toast and copy to clipboard functionality

src/main.ts

@@ -1,6 +1,8 @@
 import "./style.css";
 
 import { tokenList } from "./tokenList";
-document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
+import rootDiv from "./utils/root";
+
+rootDiv!.innerHTML = `
   ${tokenList()}
 `;

src/style.css

@@ -41,6 +41,10 @@ h1 {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column-reverse;
 }
 
 .card {
@@ -81,14 +85,16 @@ button:focus-visible {
 .fieldset-wrapper, form {
   display: flex;
   flex: 1;
+
 }
 form {
   flex-direction: column;
 }
 .fieldset-wrapper {
-  border: 1px solid;
+  border: 1px solid gainsboro;
   padding: 5px;
-  border-bottom: 1px solid;
+  border-radius: 4px;
+  box-shadow: 1px 0px 6px 2px gainsboro;
 }
 
 fieldset {
@@ -111,4 +117,15 @@ label {
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 1px solid;
+}
+
+.toast {
+  background-color: lightseagreen;
+  padding: 10px;
+  position: relative;
+  top: 10px;
+  right: 10px;
+  color: white;
+  font-weight: bold;
 }

src/toast.ts

@@ -0,0 +1,14 @@
+export function toast(element: HTMLDivElement, message: string) {
+    // Target our predefined DIV that will hold toast messages.
+    const toastDiv = element.getElementsByClassName('toast')
+ 
+    // If we currently have a toast displayed, let's remove it from the DOM.
+    if (toastDiv && toastDiv.length != 0) {
+        for (const el of toastDiv){
+            el.remove()
+        }
+    }
+    
+    // Finally add our toast message.
+    element.innerHTML += `<div class='toast'>${message}</div>`
+}

src/tokenList.ts

@@ -2,9 +2,7 @@ import { displayTokenListItem } from "./TokenListItem";
 import { tokens } from "./tokens";
 
 export function tokenList() {
-  const element = document.createElement("div");
-  element.classList.add("test");
   return `<form id="tokens">${tokens.map((token) =>
-    displayTokenListItem(token.account, token.secret, element)
+    displayTokenListItem(token.account, token.secret)
   )}</form>`;
 }

src/tokenListItem.test.ts

@@ -5,7 +5,7 @@ import { displayTokenListItem } from "./tokenListItem";
 
 test("displays correct account name", () => {
   const div: HTMLDivElement = document.createElement("div");
-  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
+  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP");
   expect(div.innerHTML).toContain("Github");
 });
 

src/tokenListItem.ts

@@ -1,16 +1,15 @@
+import { toast } from "./toast";
 import { displayToken } from "./token";
-var secondsSinceEpoch: number;
+import rootDiv from "./utils/root"
-var secondsSinceStart: number;
+let secondsSinceEpoch: number;
-var secondsRemaining: number;
+let secondsSinceStart: number = 0;
-secondsSinceStart = 0;
+let secondsRemaining: number = 30;
-secondsRemaining = 30;
+const period: 30 | 60 = 30;
-const period = 30;
+let token: string;
-var token;
 
 export function displayTokenListItem(
   account: string,
   secret: string,
-  element: HTMLDivElement
 ) {
   function countdown() {
     secondsSinceEpoch = Math.ceil(Date.now() / 1000) - 1;
@@ -18,19 +17,24 @@ export function displayTokenListItem(
     secondsRemaining = period - (secondsSinceEpoch % period);
     const timerDiv = document.getElementById(`timer-${account}`);
     const tokenDiv = document.getElementById(`secret-${account}`);
-    if (timerDiv && tokenDiv) {
+
+    if (timerDiv && tokenDiv && rootDiv) {
       timerDiv.innerHTML = secondsRemaining.toString();
       timerDiv.style.background = `conic-gradient(transparent ${
         (100 / 30) * secondsSinceStart
-      }%, ${secondsRemaining < 10 ? "salmon" : "gainsboro"} 0)`;
+      }%, ${secondsRemaining < 10 ? "salmon" : "lightgreen"} 0)`;
       token = displayToken(secret);
       tokenDiv.innerHTML = token;
+      tokenDiv.addEventListener("click", () => {
+        navigator.clipboard.writeText(tokenDiv.innerHTML);
+        toast(rootDiv!, `${tokenDiv.innerHTML} Copied successfully`)
+      });
     }
   }
   setInterval(() => {
     countdown();
   }, 1000);
-  return (element.innerHTML = `<div class="fieldset-wrapper">
+  return (`<div class="fieldset-wrapper">
     <fieldset>
       <label>Account</label>
         <p data-test-id="account">${account}</p>

src/utils/root.ts

@@ -0,0 +1,6 @@
+const rootDiv = document.querySelector<HTMLDivElement>("#app")
+if (!rootDiv) {
+    const rootDiv = document.createElement('div')
+    rootDiv.id = 'app'
+}
+export default rootDiv