diff --git a/homework/form.js b/homework/form.js new file mode 100644 index 0000000..da77c38 --- /dev/null +++ b/homework/form.js @@ -0,0 +1,55 @@ +//define elements of html +const form = document.getElementById('sign-up-form'); +const nameField = document.getElementById('name'); +const phoneField = document.getElementById('phone'); +const duluxField = document.getElementById('dulux'); +const submitBtn = document.getElementById('form-submit-btn'); + +//validate form fields +const isName = (str) => { + const nameValue = nameField.value.trim(); + if (nameValue === '') { + throw('Name cannot be empty'); + } + return true; +} + +//validate phone number +const isPhone = (str) => { + const phoneValue = phoneField.value.trim(); + const phoneRegex = /^[0-9]{10}$/; // Example: 10 digit number + if (!phoneRegex.test(phoneValue)) { + throw('Phone number must be a 10 digit number'); + } + return true; +} + +//validate dulux account +const isDulux = (str) => { + const duluxValue = duluxField.value.trim(); + if (duluxValue === '') { + throw('Dulux account cannot be empty'); + } + return true; +} + +//handle form submission +form.addEventListener('submit', function(event) { + event.preventDefault(); //prevent default form submission + + try { + //validate each field + isName(nameField.value); + isPhone(phoneField.value); + isDulux(duluxField.value); + + //if all validations pass, submit the form (here we just log a message) + console.log('Form submitted successfully!'); + form.submit(); + } catch (error) { + //display error message + alert(error); + } +}); + +console.log('Form validation script loaded.'); \ No newline at end of file diff --git a/homework/homework.html b/homework/homework.html new file mode 100644 index 0000000..c6b0a45 --- /dev/null +++ b/homework/homework.html @@ -0,0 +1,52 @@ + + + + + + + + + Document + + +
+
+
+

Welcometo Paint Quote System

+

Consequat adispic...........swhua sghy wuatf drcf gvbh cjkauiywtfr dsfwaghjkm wa. dhwyaufda adgtywand syuwaza. gyswa gyswaba y8dwa huswa. swahygtdwa uisywa. atd at6wa

+
+ +
+ +
+
+
+
+

Sign Up

+

Enter details to create your account

+
+ +
+ + +
+
+ + +
+
+ + +
+ + + +
+
+
+ +
+ + \ No newline at end of file diff --git a/homework/img.png b/homework/img.png new file mode 100644 index 0000000..606f3be Binary files /dev/null and b/homework/img.png differ diff --git a/homework/styles.css b/homework/styles.css new file mode 100644 index 0000000..ceabdfd --- /dev/null +++ b/homework/styles.css @@ -0,0 +1,138 @@ +body{ + margin:0px; +} + +.container{ + width:100vw; + height:100vh; + background-image:url("./img.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display:flex; + justify-content:space-between; +} + + +.container > section.first{ + width:45%; + max-width:700px; + height:100%; + display:flex; + justify-content:center; + align-items:center; +} + +.container > section.second{ + width:45%; + height:100%; + display:flex; + justify-content:center; + align-items:center; +} + +section.first > .title-group{ + width:80%; +} + +.title-group > h1{ + text-align:center; + color:rgb(43,82,107); +} + +.title-group > p{ + margin:8px; + color:rgb(43,82,107); +} + +.title-group > h1::after { + content: ""; + display: block; + width: 100%; + height: 3px; + background:rgb(43,82,107); + margin-top: 8px; +} + +form > div { + width:100%; + height:fit-content; + display:flex; + flex-direction:column; + justify-content:center; + align-items:center; +} + +form > .title > h1 + p { + margin:0px; +} + +button.primary{ + background-color:rgb(51,117,170); + width:80%; + height:40px; + border-radius:5px; + border:none; + color:white; +} + +form label{ + display:block; + width:80%; + color:rgb(141,141,141); +} + + +form input{ + display:block; + width:80%; + height:40px; + color:rgb(141,141,141); +} + +p.center{ + text-align:center; + color:rgb(141,141,141); +} + +form h1{ + text-align:center; +} + +div.card{ + background-color:white; + border-radius:10px; + width:80%; + height:fit-content; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); + overflow:hidden; +} + +form{ + display:flex; + flex-direction:column; + gap: 10px; + align-items:center; + height:100%; +} + + +@media (max-width: 768px) { + .container{ + flex-direction:column; + align-items:center; + justify-content:center; + } + + .container > section.first,.container>section.second{ + width:95vw; + } + + .container > section.first{ + height:30vh; + } + + .container>section.second{ + height:70vh; + } +} \ No newline at end of file