JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Filter Web App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Data Filter Web App</h1>
    <label for="type">Type:</label>
    <select id="type">
        <option value="">--Select--</option>
    </select>
    <label for="provider">Provider:</label>
    <select id="provider">
        <option value="">--Select--</option>
    </select>
    <div id="results"></div>
    <script src="scripts.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    text-align: center;
}

select {
    margin: 5px;
}

#results {
    margin-top: 20px;
}

JavaScript

const data = getData();

const typeSelect = document.getElementById('type');
const providerSelect = document.getElementById('provider');
const resultsDiv = document.getElementById('results');

// Populate the type dropdown with unique types
const uniqueTypes = [...new Set(data.map(item => item.type))];

uniqueTypes.forEach(type => {
  const option = document.createElement('option');
  option.value = type;
  option.innerText = type;
  typeSelect.appendChild(option);
});


providerSelect.addEventListener("change",function(){
  filterData();
})

typeSelect.addEventListener('change', function() {
  const selectedType = this.value;
  const providers = data.filter(item => item.type === selectedType).map(item => item.provider);
  const uniqueProviders = [...new Set(providers)];

  // Clear the provider dropdown and add new options
  providerSelect.innerHTML = '<option value="">--Select--</option>';
  uniqueProviders.forEach(provider => {
    const option = document.createElement('option');
    option.value = provider;
    option.innerText = provider;
    providerSelect.appendChild(option);
  });
  filterData();
});

function filterData() {
  const selectedType = typeSelect.value;
  const selectedProvider = providerSelect.value;

  if (!selectedType) {
    resultsDiv.innerHTML = 'Please select a type.';
    return;
  }

  let filteredData = data.filter(item => item.type === selectedType);

  if (selectedProvider) {
    filteredData = filteredData.filter(item => item.provider === selectedProvider);
  }

  if (filteredData.length === 0) {
    resultsDiv.innerHTML = 'No results found.';
  } else {
    const list = document.createElement('ul');
    filteredData.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerText = `Type: ${item.type}, Provider: ${item.provider}, URL: ${item.url}`;
      list.appendChild(listItem);
    });
    resultsDiv.innerHTML = '';
    resultsDiv.appendChild(list);
  }
}

function getData() {
  return [{
     ...