Asadhimself · Asadhimself · Feb 26, 2024 · Feb 26, 2024 · Feb 28, 2024 · Feb 28, 2024
diff --git a/.gitignore b/.gitignore
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# supply-invento
+frontend develop for project
diff --git a/Supply Request Portal/add_order.html b/Supply Request Portal/add_order.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Add Order</title>
+  <link rel="stylesheet" href="/css/main.css">
+  <link rel="stylesheet" href="/css/add_order.css">
+  <script defer src="add_order_validation.js"></script>
+</head>
+<body>
+
+  <header>
+    <nav>
+      <div class="nav-item">
+          <img src="/assets/supplier.png" alt="role logo">
+      </div>
+      <div class="nav-item">
+        <a href="#" class="nav-link">
+          <img src="/assets/icons8-home-96.png" alt="home">
+          <p>Home</p>
+        </a>
+      </div>
+      <div class="nav-item">
+        <a href="#" class="nav-link">
+          <img src="/assets/icons8-account-96.png" alt="profile">
+          <p>Profile</p>
+        </a>
+      </div>
+      <div class="nav-item">
+        <a href="#" class="nav-link">
+          <img src="/assets/icons8-logout-96.png" alt="logout">
+          <p>Logout</p>
+        </a>
+      </div>
+    </nav>
+  </header>
+
+  <form id="form" class="add-order-container">
+    <div class="add-order-subcontainer">
+      <div class="headline">
+        <img src="/assets/invento_logo.png" alt="school logo" class="headline-logo">
+        <h1 class="title">Add an item</h1>
+      </div>
+      <div class="input-control">
+          <input id="item" name="item" type="text" placeholder="Item">
+          <div class="error"></div>
+      </div>
+      <div class="input-control">
+          <input id="image_link" name="image_link" type="text" placeholder="Image link">
+          <div class="error"></div>
+      </div>
+      <div class="input-control">
+          <input id="quantity"name="quantity" type="number" placeholder="Quantity">
+          <div class="error"></div>
+      </div>
+      <div class="input-control">
+          <input id="measurement"name="measurement" type="text" placeholder="Measurement">
+          <div class="error"></div>
+      </div>
+      <div class="input-control">
+        <input id="comments" name="comments" type="text" placeholder="Comments">
+        <div class="error"></div>
+      </div>
+      <button type="submit" class="submit_btn">Add Order</button>
+    </div>
+  </form>
+
+</body>
+</html>
diff --git a/Supply Request Portal/add_order_validation.js b/Supply Request Portal/add_order_validation.js
@@ -0,0 +1,61 @@
+const form = document.getElementById('form');
+const item = document.getElementById('item');
+const image_link = document.getElementById('image_link');
+const quantity = document.getElementById('quantity');
+const measurement = document.getElementById('measurement');
+
+form.addEventListener('submit', e => {
+    e.preventDefault();
+
+    validateInputs();
+});
+
+const setError = (element, message) => {
+    const inputControl = element.parentElement;
+    const errorDisplay = inputControl.querySelector('.error');
+
+    errorDisplay.innerText = message;
+    inputControl.classList.add('error');
+    inputControl.classList.remove('success')
+}
+
+const setSuccess = element => {
+    const inputControl = element.parentElement;
+    const errorDisplay = inputControl.querySelector('.error');
+
+    errorDisplay.innerText = '';
+    inputControl.classList.add('success');
+    inputControl.classList.remove('error');
+};
+
+const validateInputs = () => {
+    const itemValue = item.value.trim();
+    const imageLinkValue = image_link.value.trim();
+    const quantityValue = quantity.value.trim();
+    const measurementValue = measurement.value.trim();
+
+    if(itemValue === '') {
+        setError(item, 'Item is required');
+    } else {
+        setSuccess(item);
+    }
+
+    if(imageLinkValue === '') {
+        setError(image_link, 'Image link is required');
+    } else {
+        setSuccess(image_link);
+    }
+
+    if(quantityValue === '') {
+        setError(quantity, 'Quantity is required');
+    } else {
+        setSuccess(quantity);
+    }
+
+    if(measurementValue === '') {
+        setError(measurement, 'Measurement is required');
+    } else {
+        setSuccess(measurement);
+    }
+
+};