Search and sort country GDP in a table.

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="app">
  Search: <input type="text" id="search" style="margin-bottom: 20px">
  <button id="order">Sort</button>
  <table id="country-table" border="1" cellpadding="6" cellspacing="0">
    <thead>
      <tr>
        <th>Country</th>
        <th>GDP (USD) $$orderType</th>
      </tr>
    </thead>
    <tbody id="country-row">
      <!-- There will appear country name and country GDP -->
    </tbody>
  </table>
</div>

JavaScript

let countries = [
  { name: 'Argentina', gdp: 14000 },
  { name: 'USA', gdp: 80000 },
  { name: 'Uzbekistan', gdp: 3500 }
]

let countryList = list(countries)

let state = el("#country-table", {
  countries: renderList("#country-row", countryList, country => `
  <tr>
    <td>${country.name}</td>
    <td>${country.gdp}</td>
  </tr>
  `),
  search: '',
  orderType: 'asc'
})

model("#search", state, 'search');
watch(state, 'search', value => {
  let afterSearch = countries.filter(c => c.name.toLowerCase().includes(value.toLowerCase()));
  renderList("#country-row", list(afterSearch), country => `
  <tr>
    <td>${country.name}</td>
    <td>${country.gdp}</td>
  </tr>
  `)
})

click("#order", ()=> {
  if(state.orderType === 'asc'){
    state.orderType = 'desc'
    let asc = [...countries].sort((a, b) => a.gdp - b.gdp)
    renderList("#country-row", list(asc), country => `
      <tr>
        <td>${country.name}</td>
        <td>${country.gdp}</td>
      </tr>
    `)
  }else{
    state.orderType = 'asc'
    let desc = [...countries].sort((a, b) => b.gdp - a.gdp)
    renderList("#country-row", list(desc), country => `
      <tr>
        <td>${country.name}</td>
        <td>${country.gdp}</td>
      </tr>
    `)
  }
})