${msg}
5 | `; 6 | }; 7 | static success = (msg) => { 8 | return ` 9 |${msg}
10 | `; 11 | }; 12 | } 13 | 14 | export default Alert; 15 | -------------------------------------------------------------------------------- /src/LocalStorage.js: -------------------------------------------------------------------------------- 1 | class LocalStorage { 2 | static save = (key, value) => { 3 | let data = []; 4 | if (localStorage.getItem(key)) { 5 | data = JSON.parse(localStorage.getItem(key)); 6 | } 7 | data.push(JSON.stringify(value)); 8 | localStorage.setItem(key, JSON.stringify(data)); 9 | }; 10 | } 11 | 12 | export default LocalStorage; 13 | -------------------------------------------------------------------------------- /src/Validation.js: -------------------------------------------------------------------------------- 1 | class Validation { 2 | static number = (number) => { 3 | const pattern = /^[0-9]{1,}$/; 4 | return `${pattern.test(number)}`; 5 | }; 6 | static email = (email) => { 7 | const pattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/; 8 | return `${pattern.test(email)}`; 9 | }; 10 | } 11 | 12 | export default Validation; 13 | -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import Alert from "./Alert.js"; 2 | import LocalStorage from "./LocalStorage.js"; 3 | import Validation from "./Validation.js"; 4 | 5 | const loginForm = document.getElementById("loginForm"); 6 | const alertDid = document.getElementById("alertDid"); 7 | 8 | loginForm.onsubmit = (e) => { 9 | e.preventDefault(); 10 | const formData = new FormData(e.target); 11 | const userData = Object.fromEntries(formData.entries()); 12 | const { name, email, age, skill } = Object.fromEntries(formData.entries()); 13 | if (!name || !email || !age || !skill) { 14 | alertDid.innerHTML = Alert.warning("All field are required!"); 15 | } else if (Validation.email(email) == "false") { 16 | alertDid.innerHTML = Alert.warning("Wrong email address"); 17 | } else if (Validation.number(age) == "false") { 18 | alertDid.innerHTML = Alert.warning("Wrong age value"); 19 | } else { 20 | alertDid.innerHTML = Alert.success("successfully sign up"); 21 | LocalStorage.save("loginUser", userData); 22 | e.target.reset(); 23 | } 24 | }; 25 | --------------------------------------------------------------------------------