Merge pull request #31

Feat/new user hints

docs/base.css

@@ -31,6 +31,7 @@
   --lb-list-item-bg-color: var(--lb-header-color);
   --lb-list-item-color: var(--lb-header-bg-color);
   --correct-word: rgb(206, 158, 1);
+  --infoPopup-border-color: rgb(206, 158, 1);
 }
 
 .dark {
@@ -45,6 +46,7 @@
   --lb-list-item-color: var(--lb-header-bg-color);
   background-color: var(--background-color);
   color: var(--font-color);
+  --infoPopup-border-color: rgb(206, 158, 1);
 }
 
 @media only screen and (max-width: 500px) {

docs/index.html

@@ -142,6 +142,7 @@ <h5>THEME</h5>
         </div>
       </div>
     </div>
+    <div class="infoPopup hide"></div>
     <div class="mainBody">
       <div class="nav">
         <header>type-master</header>

docs/style.css

@@ -99,7 +99,25 @@ span {
 }
 
 .footer > .links {
-  color:var(--github-color)
+  color: var(--github-color);
+}
+
+/* floating info */
+
+.infoPopup {
+  position: absolute;
+  display: block;
+  padding: 0.5rem;
+  font-size: var(--font-size-normal);
+  color: var(--correct-word);
+  background-color: var(--background-color);
+  border: 2px solid;
+  border-color: var(--infoPopup-border-color);
+  border-radius: 5px;
+  z-index: 1;
+  top: 20vh;
+  animation: blink 0.7s steps(2) infinite;
+  transition: opacity 200ms ease-in-out;
 }
 
 .container {
@@ -425,6 +443,7 @@ footer {
   place-items: center;
   gap: 1rem;
   transition: all 200ms ease-in-out;
+  z-index: 3;
 }
 
 .content {

src/functions/getText.js

@@ -1,13 +1,21 @@
 import setWords, { spanWrap } from "../ui/uiListeners";
 import start from "./start";
 import { textContainer } from "../ui/uiElements";
-import { getLocalData } from "../storage/localstorage";
+import { getLocalData, getUserData } from "../storage/localstorage";
+import handlePopup from "./handlePopup";
 
 var text;
+let callsCount = 0;
 
-// this function is responsible for fetching the text from api
 const getText = async () => {
-  //call the api here
+  const user = await getUserData();
+  if (!user) {
+    callsCount++;
+    if (callsCount == 5 || callsCount == 15) {
+      handlePopup("Login to save data 🙂", 10000);
+    }
+  }
+
   const url = "https://api.quotable.io/random";
   let data = await fetch(url)
     .then((response) => response.json())
@@ -18,7 +26,6 @@ const getText = async () => {
       console.error(error.message);
       textContainer.innerText = "check your network connection";
     });
-  // console.log(data,'before');
 
   //for no punctuation mode
   let userPreferences = getLocalData();
@@ -29,7 +36,7 @@ const getText = async () => {
   if (userPreferences.smallCaseMode) {
     data = data.toLowerCase();
   }
-  // console.log(data,'after');
+
   text = textContainer.innerText = data;
   setWords();
   spanWrap(textContainer);

src/functions/handlePopup.js

@@ -0,0 +1,23 @@
+import { infoPopup } from "../ui/uiElements";
+
+export default function handlePopup(msg, time) {
+  infoPopup.classList.toggle("hide");
+  infoPopup.classList.remove("fadeOut");
+  infoPopup.innerHTML = msg;
+
+  setTimeout(() => {
+    infoPopup.classList.add("fadeOut");
+    setTimeout(() => {
+      infoPopup.classList.add("hide");
+    }, 200);
+  }, time);
+
+  document.addEventListener("click", () => {
+    if (!infoPopup.classList.contains("hide")) {
+      infoPopup.classList.add("fadeOut");
+      setTimeout(() => {
+        infoPopup.classList.add("hide");
+      }, 200);
+    }
+  });
+}

src/ui/uiElements.js

@@ -73,3 +73,6 @@ export const textOptions = document.querySelector(".textOptions");
 
 //next btn
 export const nextBtn = document.querySelector(".nextBtn");
+
+//alert popup
+export const infoPopup = document.querySelector(".infoPopup");

src/ui/uiListeners.js

@@ -35,6 +35,7 @@ import {
 import saveStats from "../functions/saveStats";
 import { logout, signIn, signUp, updateUser } from "../firebase/auth";
 import { punctuationMode, smallCaseMode } from "../functions/userDefault";
+import handlePopup from "../functions/handlePopup";
 
 var totalWords;
 
@@ -302,5 +303,14 @@ nextBtn.addEventListener("click", () => {
   getText();
 });
 
+let firstTime = true;
+// for caps lock
+document.addEventListener("keypress", (e) => {
+  if (e.getModifierState("CapsLock")) {
+    firstTime && handlePopup("CapsLock", 2000);
+  }
+  firstTime = false;
+});
+
 export default setWords;
 export { spanWrap, totalWords, handleStats };