Laboratoria · Etelbina · Jan 4, 2024 · Jan 4, 2024 · Jan 4, 2024 · Jan 5, 2024
diff --git a/README.md b/README.md
diff --git a/src/cleaning/Ccleaning.css b/src/cleaning/Ccleaning.css
diff --git a/src/cleaning/cleaning.html b/src/cleaning/cleaning.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="authors" content="Joseline García & Etelbina Cañedo">
+    <title>Dataverse</title>
+    <meta name="description" content="This is the second proyect of Laboratoria bootcamp, first time working as a team">
+    <link rel="icon" href="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/Logo.png?raw=true">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Marcellus&family=Marcellus+SC&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <!-- Header -->
+    <header>
+      <section class="brand" id="brand">
+        <img class="logo" src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/Logo.png?raw=true" alt="Logo" onclick="refreshPage()">
+        <h1 onclick="refreshPage()">My Beauty Plants</h1>
+      </section>
+    </header>
+    <!-- Menu section -->
+    <!-- Search by name -->
+    <aside class="search-by-name container">
+      <form class="search-container" action="data/dataset.js">
+        <input type="text" id="input-name" placeholder="Buscar..." name="search">
+      </form>
+    </aside>
+    <!-- Category menu -->
+    <aside class="category-menu container">
+      <nav class="category-nav">
+        <div class="item-aside">
+          <input type="image" data-category="ornamental" id="ornamental" name="ornamental" alt="Ornamentales" class="category" src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/Ornamentales.png?raw=true">
+          <label for="ornamental">Ornamentales</label>
+        </div>
+        <div class="item-aside">
+          <input type="image" data-category="medicinal" id="medicinal" name="medicinal" alt="Medicinales" class="category" src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/Medicinales.png?raw=true">
+          <label for="medicinal">Medicinales</label>
+        </div>
+        <div class="item-aside">
+          <input type="image" data-category="desert" id="desert" name="desert" alt="Desérticas" class="category" src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/deserticas.png?raw=true">
+          <label for="desert">Desérticas</label>
+        </div>
+        <div class="item-aside">
+          <input type="image" data-category="trees" id="trees" name="trees" alt="Árboles" class="category" src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/arboles.png?raw=true">
+          <label for="trees">Árboles</label>
+        </div>
+        <div class="item-aside">
+          <input type="image" data-category="aromatic" id="aromatic" name="aromatic" alt="Aromáticas" class="category" src="https://github.com/Etelbina/dataverse/blob/main/src/resources/Icons/aromaticas.png?raw=true">
+          <label for="aromatic">Aromáticas</label>
+        </div>
+      </nav>
+    </aside>
+    <!-- Order by dropdown button -->
+    <aside class="order-by container">
+      <label for="item-order" id="order" class="dropdown-button">Orden</label>
+      <select name="order" id="item-order">
+        <option value="order">Orden</option>
+        <option value="a-z">A - Z</option>
+        <option value="z-a">Z - A</option>
+        <option value="reset">Resetear</option>
+      </select>
+    </aside>
+    <button data-testid="button-clear" type="reset" class="unnecessary">Reset</button>
+    <!-- Mmain -->
+    <main>
+      <h2 class="unnecessary">Plantas</h2>
+      <!-- Container -->
+      <div id="root">
+        <!-- Ul cards -->
+        <ul class="cards" id="ul-cards">
+          <li class="unnecessary" itemscope itemtype="https://schema.org">Plant</li>
+        </ul>
+      </div>
+    </main>
+    <!-- Footer limpio -->
+    <footer>
+      <h3 class="footer">My Beauty Plants</h3>
+      <p class="footer">Etelbina Cañedo &amp; Joseline García</p>
+      <p class="footer">Bootcamp Laboratoria</p>
+    </footer>
+    <script src="main.js" type="module"></script>
+  </body> 
+</html>
diff --git a/src/cleaning/data-functions-Cleaning.js b/src/cleaning/data-functions-Cleaning.js
@@ -0,0 +1,145 @@
+//----------------------
+/**
+ * This function gets the category from the object
+ * and compares it with the value of the atribute in HTML element
+ * is call by categoryButtons function when a button is cliked
+ * 
+ * @param { every plant } data - From dataset
+ * @param { property } filterBy - Category of every element of the array object
+ * @param { atribute } value - Category of plant
+ * 
+ * @returns data filtered
+ */
+export const filterData = (data, filterBy, value) => {
+  return data.filter(objeto => objeto[filterBy] === value);
+};
+
+//----------------------
+/**
+ * This function decides with a condition
+ * wich order needs to me used
+ * a-z / z-a
+ * is call by dropdown function when an option is clicked
+ * 
+ * @param { data } data - currentData
+ * @param { property } sortBy - id of every element of the array object
+ * @param { option } sortOrder - selectedIndex from dropdown
+ * 
+ * 
+ */
+export const sortData = (data, sortBy, sortOrder) => {
+  data.sort(function(a,b){
+    if (sortOrder === 1) {
+      return a[sortBy] > b[sortBy] ? 1 : -1;
+    } else if (sortOrder === 2) {
+      return a[sortBy] < b[sortBy] ? 1 : -1;
+    }
+  });
+};
+
+//----------------------
+/**
+ * This function creates the structure
+ * stores the numbers into an array
+ * calculate the sum of every type of fact
+ * calculates the average of every type of fact
+ * and stores them into the structure
+ * in call by statiscis variable to be use in ststisticsButton
+ * 
+ * @param { every plant } data - From clonedData
+ * 
+ * @returns the new populated object
+ */
+export const createStatistics = (data) => {
+  //1 - Create empty structure to host categories in arrays
+  const statsByCategory = {
+    "ornamental":{
+      sum: {
+        waterSum:0,
+        lightSum:0,
+        careSum:0
+      },
+      average:{
+        waterAverage:0,
+        lightAverage:0,
+        careAverage:0
+      },
+      factsByPlants:[]
+    },
+    "medicinal":{
+      sum: {
+        waterSum:0,
+        lightSum:0,
+        careSum:0
+      },
+      average:{
+        waterAverage:0,
+        lightAverage:0,
+        careAverage:0
+      },
+      factsByPlants:[]
+    },
+    "aromatic":{
+      sum: {
+        waterSum:0,
+        lightSum:0,
+        careSum:0
+      },
+      average:{
+        waterAverage:0,
+        lightAverage:0,
+        careAverage:0
+      },
+      factsByPlants:[]
+    },
+    "desert":{
+      sum: {
+        waterSum:0,
+        lightSum:0,
+        careSum:0
+      },
+      average:{
+        waterAverage:0,
+        lightAverage:0,
+        careAverage:0
+      },
+      factsByPlants:[]
+    },
+    "trees":{
+      sum: {
+        waterSum:0,
+        lightSum:0,
+        careSum:0
+      },
+      average:{
+        waterAverage:0,
+        lightAverage:0,
+        careAverage:0
+      },
+      factsByPlants:[]
+    },
+  };
+  //2 - Iterate in data
+  data.forEach(plant => {
+    //3 - Identify category
+    const category = plant.categoryPlant;
+    //4 - Extracts facts
+    //5 - Store facts in array corresponding category
+    statsByCategory[category].factsByPlants.push(plant.facts);
+
+    //6 - Calculate average by category
+    statsByCategory[category].sum.waterSum+=plant.facts.waterAmount;
+    //6.1 - Save total facts by category in dedicated structure
+    statsByCategory[category].average.waterAverage=Math.round(statsByCategory[category].sum.waterSum/statsByCategory[category].factsByPlants.length);
+
+    //repeat for light
+    statsByCategory[category].sum.lightSum+=plant.facts.sunLight;
+    statsByCategory[category].average.lightAverage=Math.round(statsByCategory[category].sum.lightSum/statsByCategory[category].factsByPlants.length);
+
+    //repeat for care
+    statsByCategory[category].sum.careSum+=plant.facts.careDifficulty;
+    statsByCategory[category].average.careAverage=Math.round(statsByCategory[category].sum.careSum/statsByCategory[category].factsByPlants.length);
+  });
+
+  return statsByCategory;
+}