Sākums Izpētīt Palīdzība
Pierakstīties
ilya_shyian
/
homework
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Faili Problēmas 1 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

+ change alert system

ilya_shyian 3 gadi atpakaļ
vecāks
10a80c5460
revīzija
5f0e76a9fe
2 mainītis faili ar 55 papildinājumiem un 37 dzēšanām
Apvienotais skats Rādīt salīdzināšanas statistiku
  1. 40 31
      js/01/index.html
  2. 15 6
      js/01/style.css

+ 40 - 31
js/01/index.html
Parādīt failu 

@@ -10,13 +10,16 @@
 
     <body>
 
     <body>
 
         <div class="header"></div>
 
         <div class="header"></div>
 
         <div class="container">
 
         <div class="container">
 
-            <div class="errors"></div>
 
+            <div class="alerts"></div>
 
             <div class="container-form"></div>
 
             <div class="container-form"></div>
 
         </div>
 
         </div>
 
 
 
         <script>
 
         <script>
 
-            let errors = [];
 
+            let alerts = [];
 
             let exchangeRate = {};
 
             let exchangeRate = {};
 
+            const _alert = (el) => `
 
+                <div class="alert ${el.type}">${el.text}</div>
 
+            `;
 
             const exchangeForm = `
 
             const exchangeForm = `
 
             <form action="" class="form" onsubmit="calculate(event)">
 
             <form action="" class="form" onsubmit="calculate(event)">
 
                 <div class="form-body">
 
                 <div class="form-body">
 
@@ -46,14 +49,6 @@
 
             </form>
 
             </form>
 
             `;
 
             `;
 
 
 
-            const error = (text = "") => {
 
-                return `
 
-                    <div class="errors">
 
-                        <div class="error">${text}</div>
 
-                    </div>
 
-                    `;
 
-            };
 
-
 
             const btnLogout = `
 
             const btnLogout = `
 
                 <button class="btn btn-logout" onclick="logout()">Logout</button>
 
                 <button class="btn btn-logout" onclick="logout()">Logout</button>
 
             `;
 
             `;
 
@@ -76,18 +71,18 @@
 
                 if (isAuth === true) {
 
                 if (isAuth === true) {
 
                     document.querySelector("div.header").innerHTML = btnLogout;
 
                     document.querySelector("div.header").innerHTML = btnLogout;
 
                     document.querySelector("div.container-form").innerHTML = exchangeForm;
 
                     document.querySelector("div.container-form").innerHTML = exchangeForm;
 
-                    removeError();
 
+                    removeAlert("", "error");
 
                 } else {
 
                 } else {
 
                     document.querySelector("div.container-form").innerHTML = authForm;
 
                     document.querySelector("div.container-form").innerHTML = authForm;
 
                     document.querySelector("div.header").innerHTML = "";
 
                     document.querySelector("div.header").innerHTML = "";
 
                 }
 
                 }
 
             }
 
             }
 
 
 
-            function updateErrors() {
 
-                let errors_block = document.querySelector("div.errors");
 
-                errors_block.innerHTML = "";
 
-                errors.forEach((err) => {
 
-                    errors_block.insertAdjacentHTML("beforeend", error(err));
 
+            function updateAlerts() {
 
+                let alerts_block = document.querySelector("div.alerts");
 
+                alerts_block.innerHTML = "";
 
+                alerts.forEach((el) => {
 
+                    alerts_block.insertAdjacentHTML("beforeend", _alert(el));
 
                 });
 
                 });
 
             }
 
             }
 
 
 
@@ -96,40 +91,54 @@
 
                 let login = e.target.elements.login.value;
 
                 let login = e.target.elements.login.value;
 
                 let password = e.target.elements.password.value;
 
                 let password = e.target.elements.password.value;
 
 
 
-                login ? removeError("Login is required") : addError("Login is required");
 
-                password ? removeError("Password is required") : addError("Password is required");
 
+                login ? removeAlert("Login is required", "error") : addAlert("Login is required", "error");
 
+                password ? removeAlert("Password is required", "error") : removeAlert("Password is required", "error");
 
 
 
                 if (credentials.login !== login || credentials.password !== password) {
 
                 if (credentials.login !== login || credentials.password !== password) {
 
                     localStorage.setItem("isAuth", false);
 
                     localStorage.setItem("isAuth", false);
 
-                    addError("The username or password is incorrect");
 
+                    addAlert("The username or password is incorrect", "error");
 
                     return;
 
                     return;
 
                 }
 
                 }
 
 
 
                 localStorage.setItem("isAuth", true);
 
                 localStorage.setItem("isAuth", true);
 
                 checkIsAuth();
 
                 checkIsAuth();
 
+                addAlert("Successfull auth", (type = "success"), 5000);
 
 
 
                 return;
 
                 return;
 
             }
 
             }
 
 
 
-            function addError(text = "") {
 
-                !errors.includes(text) ? errors.push(text) : null;
 
-                updateErrors();
 
+            function addAlert(text, type, timeout) {
 
+                !alerts.some((el) => el.text === text && el.type === type)
 
+                    ? alerts.push({ text: text, type: type })
 
+                    : null;
 
+                updateAlerts();
 
+                if (timeout) {
 
+                    setTimeout(() => removeAlert(text, type), timeout);
 
+                }
 
             }
 
             }
 
 
 
-            function removeError(text = "") {
 
-                if (text === "") {
 
-                    errors = [];
 
-                } else {
 
-                    errors = errors.filter((el) => el !== text);
 
+            function removeAlert(text = "", type = "") {
 
+                if (text === "" && type === "") {
 
+                    alerts = [];
 
+                }
 
+                if (text === "" && type !== "") {
 
+                    alerts = alerts.filter((el) => el.type !== type);
 
+                }
 
+
 
+                if (text !== "" && type === "") {
 
+                    alerts = alerts.filter((el) => el.text !== text);
 
+                }
 
+                if (text !== "" && type !== "") {
 
+                    alerts = alerts.filter((el) => el.text !== text || el.type !== type);
 
                 }
 
                 }
 
 
 
-                updateErrors();
 
+                updateAlerts();
 
             }
 
             }
 
 
 
             function logout() {
 
             function logout() {
 
                 localStorage.setItem("isAuth", false);
 
                 localStorage.setItem("isAuth", false);
 
                 isAuth = false;
 
                 isAuth = false;
 
-                removeError();
 
+                removeAlert();
 
                 checkIsAuth();
 
                 checkIsAuth();
 
             }
 
             }
 
 
 
@@ -139,11 +148,11 @@
 
                 let amount = +e.target.elements.amount?.value ?? 0;
 
                 let amount = +e.target.elements.amount?.value ?? 0;
 
 
 
                 if (amount < 0) {
 
                 if (amount < 0) {
 
-                    addError("Amount field value should be greater than 0!");
 
+                    addAlert("Amount field value should be greater than 0!", "error");
 
                     return;
 
                     return;
 
                 }
 
                 }
 
 
 
-                removeError("Amount field value should be greater than 0!");
 
+                removeAlert("Amount field value should be greater than 0!", "error");
 
 
 
                 document.querySelector('input[name="USD"]').value = (amount / +exchangeRates[currency]).toFixed(3);
 
                 document.querySelector('input[name="USD"]').value = (amount / +exchangeRates[currency]).toFixed(3);
 
             }
 
             }

+ 15 - 6
js/01/style.css
Parādīt failu 

@@ -6,19 +6,28 @@ html{
 
     font-size: 14px;
 
     font-size: 14px;
 
 }
 
 }
 
 
 
-
 
-.error:first-child{
 
+.alert{
 
+    font-size: 1.3rem;
 
+    padding: 9px 15px;
 
+    color:white;
 
+    border-radius: 5px;
 
     margin-top: 10px;
 
     margin-top: 10px;
 
 }
 
 }
 
 
 
+.alert:first-child{
 
+    margin-top: 0px;
 
+}
 
+
 
+
 
 .error {
 
 .error {
 
-    font-size: 1.3rem;
 
     background: rgb(223, 9, 9);
 
     background: rgb(223, 9, 9);
 
-    padding: 9px 15px;
 
-    color:white;
 
-    border-radius: 5px;
 
 }
 
 }
 
 
 
+.success {
 
+    background: rgb(12, 187, 12);
 
+}
 
+
 
+
 
 .header{
 
 .header{
 
     margin-top: 10px;
 
     margin-top: 10px;
 
     height: 40px;
 
     height: 40px;