alert messages

Author: abhijithvijayan

src/options.html

@@ -19,6 +19,7 @@ <h2 class="head__content--title">kuttUrl</h2>
                 <label class="api__key--label">API Key:</label>
                 <input class="api__key--holder" id="api__key--value" type="text" />
                 <br>
+                <label class="saved__alert v-none">Saved!!</label>
                 <button class="button__submit" id="button__submit" type="button">Save</button>
               </form>              
           </div>

src/popup.html

@@ -40,6 +40,7 @@ <h4 id="url__content-inner">Shortening...</h4>
                     <img id="button__qrcode" src="assets/qrcode.svg" alt="copy" title="QR code" />
                   </li>
                 </ul>
+                <p class="copy__alert d-none">Copied!!!</p>
               <div class="qrcode__content--holder d-none">
                   <img id="qr_code" src="#" alt="QRCode" />
               </div>

src/scripts/options.js

@@ -12,6 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
+
 // Store new API Key on save click
 document.getElementById('button__submit').addEventListener('click', () => {
     let API_KEY = document.getElementById('api__key--value').value;
@@ -20,3 +21,12 @@ document.getElementById('button__submit').addEventListener('click', () => {
         console.log('Value is set to ' + API_KEY);
     });
 });
+
+// Saved Alert
+document.getElementById('button__submit').addEventListener('click', () => {
+    let element = document.querySelector('.saved__alert');
+    element.classList.toggle('v-none');
+    setTimeout(() => {
+        element.classList.toggle('v-none');
+    }, 1300);
+});

src/scripts/popup.js

@@ -61,6 +61,10 @@ document.addEventListener('DOMContentLoaded', () => {
             input.select();
             document.execCommand('copy');
             input.remove();    
+            toggleDisplay('.copy__alert');
+            setTimeout(() => {
+                toggleDisplay('.copy__alert');
+            }, 1300);
         } 
         catch (error) {
           console.log('Oops, unable to copy');

src/styles/_variables.scss

@@ -20,6 +20,10 @@ $font-weight-bold:      600;
     display: none !important;
 }
 
+.v-none {
+    visibility: hidden !important;
+}
+
 html, body {
     padding: 0;
     border: 0;

src/styles/options.scss

@@ -10,7 +10,7 @@ body {
     justify-content: center;
     height: 100vh;
     .options__content--holder {
-        padding-top: 5em;
+        padding-top: 8em;
         background-color: $color-white;
         .head__content--holder {
             text-align: center;
@@ -34,6 +34,7 @@ body {
                     margin-bottom: 0.8em;
                 }
                 .api__key--holder {
+                    font-family: $font-montserrat;
                     width: 100%;
                     padding: 10px;
                     border-radius: 4px;
@@ -43,14 +44,19 @@ body {
                         border-radius: 4px;
                     }
                 }
+                .saved__alert {
+                    padding-left: 0.5em;
+                }
                 .button__submit {
+                    font-family: $font-montserrat;
+                    font-size: 18px;
                     display: block;
                     color: $color-white;
                     width: 100%;
                     background-color: $color-blue;
                     border: none;
                     padding: 12px;
-                    margin-top: 1.4em;
+                    margin-top: 1.2em;
                     &:hover {
                         cursor: pointer;
                         background-color: $color-light-blue;

src/styles/popup.scss

@@ -2,14 +2,11 @@
 
 body {
     color: $color-black;
-    // min-width: 14em;
 }
 
 #home {
-    // width: 180px;
     min-width: 210px;
     .container {
-        // width: 88%;
         padding: 10px;
         .navbar {
             .navbar__main {
@@ -70,6 +67,9 @@ body {
                     }
                 }
             }
+            .copy__alert {
+                text-align: center;
+            }
             .qrcode__content--holder {
                 text-align: center;
                 #qr_code {