JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supplier Directory Example</title>
</head>
<body>
    <h1>Supplier Registration</h1>
    <form id="supplierForm">
        <label for="companyName">Company Name:</label>
        <input type="text" id="companyName" required><br><br>
        
        <label for="category">Category:</label>
        <select id="category" required>
            <option value="General">General</option>
            <option value="Technical">Technical</option>
            <option value="Support">Support</option>
        </select><br><br>
        
        <label for="contact">Contact Email:</label>
        <input type="email" id="contact" required><br><br>
        
        <button type="submit">Register Supplier</button>
    </form>

    <h2>Supplier Directory</h2>
    <label for="filterCategory">Filter by Category:</label>
    <select id="filterCategory">
        <option value="All">All</option>
        <option value="General">General</option>
        <option value="Technical">Technical</option>
        <option value="Support">Support</option>
    </select>
    <div id="directory"></div>

    <h2>Edit Your Profile (for demonstration)</h2>
    <form id="editForm" style="display: none;">
        <input type="hidden" id="editIndex">
        <label for="editCompanyName">Company Name:</label>
        <input type="text" id="editCompanyName"><br><br>
        
        <label for="editCategory">Category:</label>
        <select id="editCategory">
            <option value="General">General</option>
            <option value="Technical">Technical</option>
            <option value="Support">Support</option>
        </select><br><br>
        
        <label for="editContact">Contact Email:</label>
        <input type="email" id="editContact"><br><br>
        
        <button type="submit">Update Profile</button>
    </form>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
form {
    margin-bottom: 20px;
}
.directory-item {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

JavaScript

const supplierForm = document.getElementById('supplierForm');
const directoryDiv = document.getElementById('directory');
const filterCategory = document.getElementById('filterCategory');
const editForm = document.getElementById('editForm');
let suppliers = JSON.parse(localStorage.getItem('suppliers')) || [];

function renderDirectory() {
    const selectedCategory = filterCategory.value;
    directoryDiv.innerHTML = '';

    const filteredSuppliers = suppliers.filter(supplier => 
        selectedCategory === 'All' || supplier.category === selectedCategory
    );

    filteredSuppliers.forEach((supplier, index) => {
        const supplierDiv = document.createElement('div');
        supplierDiv.className = 'directory-item';
        supplierDiv.innerHTML = `
            <strong>Company Name:</strong> ${supplier.companyName}<br>
            <strong>Category:</strong> ${supplier.category}<br>
            <strong>Contact:</strong> ${supplier.contact}<br>
            <button onclick="editSupplier(${index})">Edit</button>
        `;
        directoryDiv.appendChild(supplierDiv);
    });
}

supplierForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const companyName = document.getElementById('companyName').value;
    const category = document.getElementById('category').value;
    const contact = document.getElementById('contact').value;

    const newSupplier = { companyName, category, contact };
    suppliers.push(newSupplier);
    localStorage.setItem('suppliers', JSON.stringify(suppliers));

    supplierForm.reset();
    renderDirectory();
});

filterCategory.addEventListener('change', renderDirectory);

function editSupplier(index) {
    const supplier = suppliers[index];
    document.getElementById('editIndex').value = index;
    document.getElementById('editCompanyName').value = supplier.companyName;
    document.getElementById('editCategory').value = supplier.category;
    document.getElementById('editContact').value = supplier.contact;
   ...