MilenPG · DaisyCorrea · Feb 15, 2024 · Feb 15, 2024 · Feb 16, 2024 · Feb 27, 2024
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,24 +1,52 @@
 // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
 
-export const example = () => {
-  return 'example';
-};
 
-export const anotherExample = () => {
-  return [];
-};
+export const filterData = (data, filterBy, value) => {
+  //console.log(filterBy);
+  if (value === "preocupacion-menor") {
+    const filterDataConservation = data.filter(bird => bird.facts.conservationStatus === "Preocupación menor")
+    return filterDataConservation
+  } else if (value === "casi-amenazado") {
+    const filterDataConservation = data.filter(bird => bird.facts.conservationStatus === "Vulnerable")
+    return filterDataConservation
+  } else if (value === "vulnerable") {
+    const filterDataConservation = data.filter(bird => bird.facts.conservationStatus === "En peligro")
+    return filterDataConservation
+  }
+}
 
+export const sortData = (data, orderBy, value) => {
+  const copyData = [...data];
+  const sortedData = copyData.sort((a, b) => {
+    if (value === 'asc') {
+      return a[orderBy].localeCompare(b[orderBy])
+    } else {
+      return b[orderBy].localeCompare(a[orderBy])
+    }
+  })
+  //console.log(sortedData)
+  return sortedData;
+}
 
-/*
-- Crear constante de función "sortBy" que tiene 3 parámetros (data, sortBy, sortOrder) 
-- Declarar sortBy qué significa orden ascendente y/o descendente con operadores lógicos.
-- Recorrer arreglo con forEach
-- Por cada objeto, coger el Id.
-- Comparar por lo que definimos como sortBy, según la primera letra (índice 0) del nombre.
-- Pushear objetos a un nuevo array que:
-  - Ordene ascendentemente según el primer índice del nombre
-  - Ordene descendentemente según lo anterior
-- Devuelve función con el arreglo ordenado.
-*/
-
+export const computeStats = (data) => {
+  const staticItems = data.reduce((acc, item) => {
+    if (!acc[item.facts.conservationStatus]){
+      acc[item.facts.conservationStatus] = 1;
+    } else {
+      acc[item.facts.conservationStatus]++;
+    }
+    // console.log(acc);
+    return acc;
+  }, {});
+  const staticConservationOne = staticItems["Preocupación menor"];
+  const staticConservationTwo = staticItems["En peligro"];
+  const staticConservationThree = staticItems["Vulnerable"];
+  const resultOne = ((100*staticConservationOne)/data.length).toFixed(2);
+  const resultTwo = ((100*staticConservationTwo)/data.length).toFixed(2);
+  const resultThree = ((100*staticConservationThree)/data.length).toFixed(2);
+  //console.log(resultOne);
+  //console.log ({resultOne, resultTwo, resultThree});
+  return {resultOne, resultTwo, resultThree};
 
+  //return staticItems;
+}
diff --git a/src/index.html b/src/index.html
@@ -7,31 +7,42 @@
     <link rel="icon" href="https://uxwing.com/wp-content/themes/uxwing/download/animals-and-birds/bird-icon.png">
     <link rel="stylesheet" href="style.css" />
     <link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
+    <!--<script src="Chart.js"></script>-->
   </head>
   <body>
 
     <header>
-      <h1>Aves de latinoamérica</h1>
+      <h1>AVES DE LATINOAMÉRICA</h1>
     </header>
 
     <main>
       <h2 class="control-bar">
         <label for="order">Ordenar por:</label>
         <select id="order" data-testid="select-sort" name="alphabetic">
-          <option value="">---</option>      
+          <option value="" disabled>---</option>      
           <option value="asc">A - Z</option>
           <option value="desc">Z - A</option>
         </select>
 
         <label for="filter">Filtrar por:</label>
         <select id="filter" data-testid="select-filter" name="conservation-status">      
-          <option value="">---</option>
+          <option value="" disabled>---</option>
           <option value="preocupacion-menor">Preocupación menor</option>
-          <option value="vulnerable">Vulnerable</option>
           <option value="casi-amenazado">Casi amenazado</option>
+          <option value="vulnerable">Vulnerable</option>
         </select>
-
-        <!--AQUÍ VA BOTON DE LIMPIAR-->
+        <!-- <input type="text" name="Search" id="search" placeholder="Buscar Ave..."> -->
+        <button id="buttonStatistics">Estadísticas</button>
+        <!--<dialog open id="statisticsWindos"> la ventana modal se abre desde el inicio--> 
+          <dialog id="statisticsWindowOpen">
+            <h3 id="titleStatistics"> Estadísticas 
+              <button id="statisticsWindowClose"> X </button>
+            </h3>
+             <section class="contentStatistics">
+                <!--<canvas id="myChart"></canvas>-->
+             </section>
+          </dialog>
+        <button id="reset-button" title="Limpiar">Limpiar</button>
       </h2>
 
       <div id="root">
@@ -46,6 +57,7 @@ <h2 class="control-bar">
     <footer>
       <p>Developed by Daisy C. H.,  Milen P. G.</p>
     </footer>
+    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.min.js" integrity="sha512-L0Shl7nXXzIlBSUUPpxrokqq4ojqgZFQczTYlGjzONGTDAcLremjwaWv5A+EDLnxhQzY5xUZPWLOLqYRkY0Cbw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,104 @@
 //import { example } from './dataFunctions.js';
 import { renderItems } from './view.js';
 import data from './data/dataset.js';
+import { filterData, sortData, computeStats} from './dataFunctions.js';
+
+const selectOrder = document.getElementById('order');
+const selectFilter = document.getElementById('filter');
 
 const root = document.querySelector('#root');
 root.appendChild(renderItems(data));
 
-//console.log(example, renderItems(data), data);
+//console.log(example, renderItems(data), data);
+const filter = document.querySelector('#filter');
+selectFilter.selectedIndex = "";
+filter.addEventListener('change', () => {
+  root.innerHTML= "";
+  const datafilter = filterData (data, 'conservationStatus', filter.value)
+  root.appendChild(renderItems(datafilter));
+})
+
+const order = document.querySelector('#order');
+selectOrder.selectedIndex = "";
+order.addEventListener('change', () => {
+  root.innerHTML= "";
+  const datasort = sortData (data, 'name', order.value)
+  root.appendChild(renderItems(datasort));
+})
+
+const clean = document.querySelector('#reset-button');
+clean.addEventListener('click', () => {
+  selectOrder.selectedIndex = "";
+  selectFilter.selectedIndex = "";
+  root.innerHTML= "";
+  root.appendChild(renderItems(data));
+
+})
+
+/*const search = document.querySelector('#search');
+search.addEventListener('keyup', e => {
+  if (e.target.matches("birdData.name")){
+    document.querySelectorAll ()
+  }
+  //console.log(e.target.value);
+})*/
+
+const openStatistics = document.querySelector('#buttonStatistics');
+const windowStatistics = document.querySelector('#statisticsWindowOpen');
+const cerrarStatistics = document.querySelector('#statisticsWindowClose');
+openStatistics.addEventListener("click",()=>{
+  windowStatistics.showModal();
+  const statisticsContent = document.querySelector('.contentStatistics');
+  const staticBird = computeStats(data);
+  //console.log (staticBird.resultOne);
+
+  statisticsContent.innerHTML = ("<p class='statisticTitle'> De las 24 especies de aves elegidas que habitan en América Latina su estado de conservación son: </p>");
+  statisticsContent.innerHTML += ("<p class='statisticOne'>  </p>");
+  statisticsContent.innerHTML += ("Preocupación Menor son:   "+ (staticBird.resultOne) + "%"); 
+  statisticsContent.innerHTML += ("<p class='statisticOne'>  </p>");
+  statisticsContent.innerHTML += ("En peligro de extinción son:   "+ (staticBird.resultTwo) + "%"); 
+  statisticsContent.innerHTML += ("<p class='statisticOne'>  </p>");
+  statisticsContent.innerHTML += ("En estado vulnerable:   "+ (staticBird.resultThree) + "%"); 
+
+
+  /*console.log(staticBird, "VER ESTADISTICAS");
+  staticBird.innerHTML;*/
+})
+
+
+/*
+const std = document.getElementById('myChart')
+const names = ['Ronn', 'Daisy', 'Madelein']
+const ages = [17, 42, 13]
+const myChart = new CharacterData(std, {
+  type: 'pie',
+  data: {
+    labels: names,
+    datasets: [{
+      label: 'Edad',
+      data: ages,
+      backgroundColor: [
+        'rgba (255, 99, 132, 0.2)',
+        'rgba (54, 162, 235, 0.2)',
+        'rgba (255, 206, 86, 0.2)',
+        'rgba (75, 192, 192, 0.2)',
+        'rgba (153, 102, 255, 0.2)',
+        'rgba (255, 159, 64, 0.2)'
+      ],
+      borderWidth: 1.5
+    }]
+  }
+})*/
+cerrarStatistics.addEventListener("click",()=>{
+  windowStatistics.close();
+})
+/*
+const openInfo = document.querySelectorAll('#buttonInfo');
+const windowInfo = document.querySelector('#infoBird');
+const cerrarInfo = document.querySelector('#closeInfo');
+openInfo.addEventListener("click",()=>{
+  windowInfo.showModal();
+})
+cerrarInfo.addEventListener("click",()=>{
+  windowInfo.close();
+})*/