distinctioncoding · jwan0190 · Dec 18, 2025 · Dec 22, 2025 · Jan 15, 2026
diff --git a/homework/form.js 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.');
diff --git a/homework/homework.html b/homework/homework.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <script type="module" src="form.js"></script>
+
+    <title>Document</title>
+</head>
+<body>
+    <main class="container" style="width: 100vw; height: 100vh;">
+        <section class="first">
+            <div class="title-group">
+                <h1>Welcometo Paint Quote System</h1>
+                <p>Consequat adispic...........swhua sghy wuatf drcf gvbh cjkauiywtfr dsfwaghjkm wa. dhwyaufda adgtywand syuwaza. gyswa gyswaba y8dwa huswa. swahygtdwa uisywa. atd  at6wa </p>
+            </div>
+
+        </section>
+
+        <section class="second">
+            <div class="card">
+                <form id="sign-up-form" action="/submit" method="post">
+                    <header class="title">
+                        <h1 class="signup">Sign Up</h1>
+                        <p class='center'>Enter details to create your account</p>
+                    </header>
+
+                   <div class="field">
+                        <label for="name">Your name</label>
+                        <input type="text" name="name" id="name" placeholder="Enter your name">
+                    </div>
+                    <div class="field">
+                        <label for="phone">Phone number</label>
+                        <input type="tel" name="name" id="phone" placeholder="Enter your phone number">
+                    </div>
+                    <div class="field">
+                        <label for="dulux">Dulux Account</label>
+                        <input type="text" name="dulux" id="dulux" placeholder="Enter your Dulux account">
+                    </div>
+
+                    <button class="primary">Sign up</button>
+                    <footer>
+                    <p class="center">Already have an account? <a href="https://www.google.com">Sign in</a></p>
+                    </footer>
+                </form>
+            </div>
+        </section>
+
+    </main>
+</body>
+</html>
diff --git a/homework/img.png b/homework/img.png
diff --git a/homework/styles.css 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;
+    }
+}