+
+ Usos ${element.applicationsPlant}
+ Datos climáticos ${element.climaticData}
+ Mantenimiento ${element.maintenanceNeeds}
+
+
+
+
+
+
+
+
+
+
+ `
+
+ //---------------------------------------------------------------------------------------------------------
+
+ const descriptionModal = document.createElement('div');
+ //console.log(descriptionModal);
+
+ descriptionModal.innerHTML+= `
+
+
${element.name}
+
${element.description}
+
+
`
+
+ //--------------------------------------------------------------------------------------------------------
+
+ const statsModal= document.createElement('div');
+ //console.log(statsModal);
+
+ statsModal.innerHTML+= `
+
+ ${element.categoryPlant}
+
+ Qué cuidados necesita este tipo de plantas?
+
+
`
+
+ //-------------------------------------------------------------------------------------------------------
+
+ //cardItem is created as a child of cardList
+ cardList.appendChild(cardItem);
+ cardList.appendChild(descriptionModal);
+ cardList.appendChild(statsModal);
+
+ //----------------------------------------------------------------------------------------------------------
+
+ const btnOpenModal = document.querySelectorAll('.openModalBtn');
+ //console.log(btnOpenModal);
+ const btnOpenStatsModal = document.querySelectorAll('.stats1');
+ //console.log(btnOpenStatsModal);
+ const myModals = document.querySelectorAll('.modal');
+ //console.log(myModals);
+ const myStatsModals = document.querySelectorAll('.statsModal');
+ //console.log(myStatsModals);
+
+ btnOpenModal.forEach((btn, index) => {
+ btn.addEventListener("click", () => {
+ myModals[index].style.display = "block";
+ });
+
+ document.addEventListener("click", (event) => {
+ if (event.target === myModals[index]) {
+ myModals[index].style.display = "none";
+ }
+ });
+ });
+
+ btnOpenStatsModal.forEach((btn, index) => {
+ btn.addEventListener("click", () => {
+ myStatsModals[index].style.display = "block";
+ });
+
+ document.addEventListener("click", (event) => {
+ if (event.target === myStatsModals[index]) {
+ myStatsModals[index].style.display = "none";
+ }
+ });
+ });
+
+ //------------------------------------------------------------------------------------------------------------
+ //llamar a funcion computeStats para hacer el calculo y wordSelection
+ //seleccionar donde se va a mostrar la estadistica
+ //insertar el calculo usando innerHTML o textContent
+
+ myStatsModals.forEach((modal) =>{
+
+ const averageWater= computeStats(data, "waterAmount");
+ const wordWater= wordSelection(averageWater);
+ //console.log(averageWater);
+ //console.log(wordWater);
+
+ const averageLight= computeStats(data, "sunLight");
+ const wordLight = wordSelection(averageLight);
+ //console.log(averageLight);
+ //console.log(wordLight);
+
+ const averageCare= computeStats(data, "careDifficulty");
+ const wordCare= wordSelection(averageCare);
+ //console.log(averageCare);
+ //console.log(wordCare);
+
+ const agua=modal.querySelector("#waterFact");
+ agua.textContent=`${wordWater}`;
+ //console.log(agua);
+ const luz= modal.querySelector("#lightFact");
+ luz.textContent=`${wordLight}`;
+ //console.log(luz);
+ const cuidado= modal.querySelector("#careFact");
+ cuidado.textContent=`${wordCare}`;
+ //console.log(cuidado);
+ })
+
+ //-----------------------------------------------------------------------------------------------------
+ const water = element.facts.waterAmount;
+ //console.log(water);
+ const light = element.facts.sunLight;
+ //console.log(light);
+ const care = element.facts.careDifficulty;
+ //console.log(care);
+
+ function actualizarImagenes(fact, firstImage, secondImage, thirdImage, id) {
+ const { activo, inactivo } = determinarImagen(id);
+
+ if (fact === 1) {
+ firstImage.src = activo;
+ secondImage.src = inactivo;
+ thirdImage.src = inactivo;
+ } else if (fact === 2) {
+ firstImage.src = activo;
+ secondImage.src = activo;
+ thirdImage.src = inactivo;
+ } else if (fact === 3) {
+ firstImage.src = activo;
+ secondImage.src = activo;
+ thirdImage.src = activo;
+ }
+ //console.log(actualizarImagenes);
+
+ }
+
+ // Imagenes.agua
+ const firstImageWater = cardItem.querySelector("#minimo-agua");
+ //console.log(firstImageWater);
+ const secondImageWater = cardItem.querySelector("#medio-agua");
+ //console.log(secondImageWater);
+ const thirdImageWater = cardItem.querySelector("#alto-agua");
+ //console.log(thirdImageWater);
+
+ actualizarImagenes(water, firstImageWater, secondImageWater, thirdImageWater, "agua");
+
+ // Imagenes.luz
+ const firstImageLight = cardItem.querySelector("#minimo-luz");
+ //console.log(firstImageLight);
+ const secondImageLight = cardItem.querySelector("#medio-luz");
+ //console.log(secondImageLight);
+ const thirdImageLight = cardItem.querySelector("#alto-luz");
+ //console.log(thirdImageLight);
+
+ actualizarImagenes(light, firstImageLight, secondImageLight, thirdImageLight, "luz");
+
+ // Imagenes.cuidado
+ const firstImageCare = cardItem.querySelector("#minimo-cuidado");
+ //console.log(firstImageCare);
+ const secondImageCare = cardItem.querySelector("#medio-cuidado");
+ //console.log(secondImageCare);
+ const thirdImageCare = cardItem.querySelector("#alto-cuidado");
+ //console.log(thirdImageCare);
+
+ actualizarImagenes(care, firstImageCare, secondImageCare, thirdImageCare, "cuidado");
+
+ //------------------------------------------------------------------------------------------------------------
+
+ });
+ return cardList;
+};
\ No newline at end of file
diff --git "a/src/resources/Dise\303\261o sin t\303\255tulo.gif" "b/src/resources/Dise\303\261o sin t\303\255tulo.gif"
new file mode 100644
index 00000000..b2d503fa
Binary files /dev/null and "b/src/resources/Dise\303\261o sin t\303\255tulo.gif" differ
diff --git a/src/resources/Icons/Close.png b/src/resources/Icons/Close.png
new file mode 100644
index 00000000..6189997d
Binary files /dev/null and b/src/resources/Icons/Close.png differ
diff --git a/src/resources/Icons/Logo.png b/src/resources/Icons/Logo.png
new file mode 100644
index 00000000..9790965b
Binary files /dev/null and b/src/resources/Icons/Logo.png differ
diff --git a/src/resources/Icons/Medicinales.png b/src/resources/Icons/Medicinales.png
new file mode 100644
index 00000000..1afaa68b
Binary files /dev/null and b/src/resources/Icons/Medicinales.png differ
diff --git a/src/resources/Icons/Ornamentales.png b/src/resources/Icons/Ornamentales.png
new file mode 100644
index 00000000..50dc1329
Binary files /dev/null and b/src/resources/Icons/Ornamentales.png differ
diff --git a/src/resources/Icons/Regresar.png b/src/resources/Icons/Regresar.png
new file mode 100644
index 00000000..28783c33
Binary files /dev/null and b/src/resources/Icons/Regresar.png differ
diff --git a/src/resources/Icons/agua-activa.png b/src/resources/Icons/agua-activa.png
new file mode 100644
index 00000000..2f9566ec
Binary files /dev/null and b/src/resources/Icons/agua-activa.png differ
diff --git a/src/resources/Icons/agua-inactiva.png b/src/resources/Icons/agua-inactiva.png
new file mode 100644
index 00000000..073edebb
Binary files /dev/null and b/src/resources/Icons/agua-inactiva.png differ
diff --git a/src/resources/Icons/arboles.png b/src/resources/Icons/arboles.png
new file mode 100644
index 00000000..2d8915b8
Binary files /dev/null and b/src/resources/Icons/arboles.png differ
diff --git a/src/resources/Icons/aromaticas.png b/src/resources/Icons/aromaticas.png
new file mode 100644
index 00000000..61ddfd32
Binary files /dev/null and b/src/resources/Icons/aromaticas.png differ
diff --git a/src/resources/Icons/cuidado-activa.png b/src/resources/Icons/cuidado-activa.png
new file mode 100644
index 00000000..30551a8f
Binary files /dev/null and b/src/resources/Icons/cuidado-activa.png differ
diff --git a/src/resources/Icons/cuidado-inactiva.png b/src/resources/Icons/cuidado-inactiva.png
new file mode 100644
index 00000000..7f7b252f
Binary files /dev/null and b/src/resources/Icons/cuidado-inactiva.png differ
diff --git a/src/resources/Icons/descripcion.png b/src/resources/Icons/descripcion.png
new file mode 100644
index 00000000..596f2b6d
Binary files /dev/null and b/src/resources/Icons/descripcion.png differ
diff --git a/src/resources/Icons/deserticas.png b/src/resources/Icons/deserticas.png
new file mode 100644
index 00000000..d0eb58f1
Binary files /dev/null and b/src/resources/Icons/deserticas.png differ
diff --git a/src/resources/Icons/estadisticas.png b/src/resources/Icons/estadisticas.png
new file mode 100644
index 00000000..6b6ae67c
Binary files /dev/null and b/src/resources/Icons/estadisticas.png differ
diff --git a/src/resources/Icons/luz-activa.png b/src/resources/Icons/luz-activa.png
new file mode 100644
index 00000000..838873fa
Binary files /dev/null and b/src/resources/Icons/luz-activa.png differ
diff --git a/src/resources/Icons/luz-inactiva.png b/src/resources/Icons/luz-inactiva.png
new file mode 100644
index 00000000..12991d44
Binary files /dev/null and b/src/resources/Icons/luz-inactiva.png differ
diff --git a/src/resources/Images/agave-azul.png b/src/resources/Images/agave-azul.png
new file mode 100644
index 00000000..8cca00ce
Binary files /dev/null and b/src/resources/Images/agave-azul.png differ
diff --git a/src/resources/Images/albahaca.png b/src/resources/Images/albahaca.png
new file mode 100644
index 00000000..0eb772b2
Binary files /dev/null and b/src/resources/Images/albahaca.png differ
diff --git a/src/resources/Images/aloe-vera.png b/src/resources/Images/aloe-vera.png
new file mode 100644
index 00000000..acf14445
Binary files /dev/null and b/src/resources/Images/aloe-vera.png differ
diff --git a/src/resources/Images/arce.png b/src/resources/Images/arce.png
new file mode 100644
index 00000000..5743afe5
Binary files /dev/null and b/src/resources/Images/arce.png differ
diff --git a/src/resources/Images/azalea.png b/src/resources/Images/azalea.png
new file mode 100644
index 00000000..dcbf56c3
Binary files /dev/null and b/src/resources/Images/azalea.png differ
diff --git a/src/resources/Images/back files/agave azul.png:Zone.Identifier b/src/resources/Images/back files/agave azul.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/agave azul.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/albahaca.png:Zone.Identifier b/src/resources/Images/back files/albahaca.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/albahaca.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/aloe vera.png:Zone.Identifier b/src/resources/Images/back files/aloe vera.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/aloe vera.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/arce.png:Zone.Identifier b/src/resources/Images/back files/arce.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/arce.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/azalea.png:Zone.Identifier b/src/resources/Images/back files/azalea.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/azalea.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/baobab.png:Zone.Identifier b/src/resources/Images/back files/baobab.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/baobab.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/begonia.png:Zone.Identifier b/src/resources/Images/back files/begonia.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/begonia.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/cactus saguaro.png:Zone.Identifier b/src/resources/Images/back files/cactus saguaro.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/cactus saguaro.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/cilantro.png:Zone.Identifier b/src/resources/Images/back files/cilantro.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/cilantro.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/clivia.png:Zone.Identifier b/src/resources/Images/back files/clivia.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/clivia.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/echineacea.png:Zone.Identifier b/src/resources/Images/back files/echineacea.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/echineacea.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/ficus.png:Zone.Identifier b/src/resources/Images/back files/ficus.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/ficus.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/helecho de Boston.png:Zone.Identifier b/src/resources/Images/back files/helecho de Boston.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/helecho de Boston.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/hortencia.png:Zone.Identifier b/src/resources/Images/back files/hortencia.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/hortencia.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/lavanda.png:Zone.Identifier b/src/resources/Images/back files/lavanda.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/lavanda.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/lirio.png:Zone.Identifier b/src/resources/Images/back files/lirio.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/lirio.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/manzanilla.png:Zone.Identifier b/src/resources/Images/back files/manzanilla.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/manzanilla.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/menta.png:Zone.Identifier b/src/resources/Images/back files/menta.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/menta.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/monstera.png:Zone.Identifier b/src/resources/Images/back files/monstera.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/monstera.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/ocotillo.png:Zone.Identifier b/src/resources/Images/back files/ocotillo.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/ocotillo.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/oregano.png:Zone.Identifier b/src/resources/Images/back files/oregano.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/oregano.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/palo verde.png:Zone.Identifier b/src/resources/Images/back files/palo verde.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/palo verde.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/pothos.png:Zone.Identifier b/src/resources/Images/back files/pothos.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/pothos.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/roble.png:Zone.Identifier b/src/resources/Images/back files/roble.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/roble.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/romero.png:Zone.Identifier b/src/resources/Images/back files/romero.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/romero.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/sanseviera.png:Zone.Identifier b/src/resources/Images/back files/sanseviera.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/sanseviera.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/sauce lloron.png:Zone.Identifier b/src/resources/Images/back files/sauce lloron.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/sauce lloron.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/secuoya roja.png:Zone.Identifier b/src/resources/Images/back files/secuoya roja.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/secuoya roja.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/valeriana.png:Zone.Identifier b/src/resources/Images/back files/valeriana.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/valeriana.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/back files/yuca.png:Zone.Identifier b/src/resources/Images/back files/yuca.png:Zone.Identifier
new file mode 100644
index 00000000..27fcf989
--- /dev/null
+++ b/src/resources/Images/back files/yuca.png:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\Jkgar\OneDrive\Imgenes\Vectorizando2 plantas.zip
diff --git a/src/resources/Images/baobab.png b/src/resources/Images/baobab.png
new file mode 100644
index 00000000..e498e536
Binary files /dev/null and b/src/resources/Images/baobab.png differ
diff --git a/src/resources/Images/begonia.png b/src/resources/Images/begonia.png
new file mode 100644
index 00000000..5d01ea89
Binary files /dev/null and b/src/resources/Images/begonia.png differ
diff --git a/src/resources/Images/cactus-saguaro.png b/src/resources/Images/cactus-saguaro.png
new file mode 100644
index 00000000..5e035d2b
Binary files /dev/null and b/src/resources/Images/cactus-saguaro.png differ
diff --git a/src/resources/Images/cilantro.png b/src/resources/Images/cilantro.png
new file mode 100644
index 00000000..2f8da9f2
Binary files /dev/null and b/src/resources/Images/cilantro.png differ
diff --git a/src/resources/Images/clivia.png b/src/resources/Images/clivia.png
new file mode 100644
index 00000000..6a1059ad
Binary files /dev/null and b/src/resources/Images/clivia.png differ
diff --git a/src/resources/Images/echineacea.png b/src/resources/Images/echineacea.png
new file mode 100644
index 00000000..6a6ce384
Binary files /dev/null and b/src/resources/Images/echineacea.png differ
diff --git a/src/resources/Images/ficus.png b/src/resources/Images/ficus.png
new file mode 100644
index 00000000..26a3c86f
Binary files /dev/null and b/src/resources/Images/ficus.png differ
diff --git a/src/resources/Images/helecho de Boston.png b/src/resources/Images/helecho de Boston.png
new file mode 100644
index 00000000..6d81e60b
Binary files /dev/null and b/src/resources/Images/helecho de Boston.png differ
diff --git a/src/resources/Images/helecho-de-boston.png b/src/resources/Images/helecho-de-boston.png
new file mode 100644
index 00000000..6d81e60b
Binary files /dev/null and b/src/resources/Images/helecho-de-boston.png differ
diff --git a/src/resources/Images/hortencia.png b/src/resources/Images/hortencia.png
new file mode 100644
index 00000000..f67d2b88
Binary files /dev/null and b/src/resources/Images/hortencia.png differ
diff --git a/src/resources/Images/lavanda.png b/src/resources/Images/lavanda.png
new file mode 100644
index 00000000..5341026e
Binary files /dev/null and b/src/resources/Images/lavanda.png differ
diff --git a/src/resources/Images/lirio.png b/src/resources/Images/lirio.png
new file mode 100644
index 00000000..0b5daa01
Binary files /dev/null and b/src/resources/Images/lirio.png differ
diff --git a/src/resources/Images/manzanilla.png b/src/resources/Images/manzanilla.png
new file mode 100644
index 00000000..7f3e22e7
Binary files /dev/null and b/src/resources/Images/manzanilla.png differ
diff --git a/src/resources/Images/menta.png b/src/resources/Images/menta.png
new file mode 100644
index 00000000..5f482e20
Binary files /dev/null and b/src/resources/Images/menta.png differ
diff --git a/src/resources/Images/monstera.png b/src/resources/Images/monstera.png
new file mode 100644
index 00000000..ec971f1c
Binary files /dev/null and b/src/resources/Images/monstera.png differ
diff --git a/src/resources/Images/ocotillo.png b/src/resources/Images/ocotillo.png
new file mode 100644
index 00000000..64ddf12e
Binary files /dev/null and b/src/resources/Images/ocotillo.png differ
diff --git a/src/resources/Images/oregano.png b/src/resources/Images/oregano.png
new file mode 100644
index 00000000..8e90cbe1
Binary files /dev/null and b/src/resources/Images/oregano.png differ
diff --git a/src/resources/Images/palo-verde.png b/src/resources/Images/palo-verde.png
new file mode 100644
index 00000000..a608cd96
Binary files /dev/null and b/src/resources/Images/palo-verde.png differ
diff --git a/src/resources/Images/pothos.png b/src/resources/Images/pothos.png
new file mode 100644
index 00000000..e17e5177
Binary files /dev/null and b/src/resources/Images/pothos.png differ
diff --git a/src/resources/Images/roble.png b/src/resources/Images/roble.png
new file mode 100644
index 00000000..7585ea47
Binary files /dev/null and b/src/resources/Images/roble.png differ
diff --git a/src/resources/Images/romero.png b/src/resources/Images/romero.png
new file mode 100644
index 00000000..d479c1c1
Binary files /dev/null and b/src/resources/Images/romero.png differ
diff --git a/src/resources/Images/sanseviera.png b/src/resources/Images/sanseviera.png
new file mode 100644
index 00000000..3365f9b7
Binary files /dev/null and b/src/resources/Images/sanseviera.png differ
diff --git a/src/resources/Images/sauce-lloron.png b/src/resources/Images/sauce-lloron.png
new file mode 100644
index 00000000..2d951d3d
Binary files /dev/null and b/src/resources/Images/sauce-lloron.png differ
diff --git a/src/resources/Images/secuoya-roja.png b/src/resources/Images/secuoya-roja.png
new file mode 100644
index 00000000..247aa331
Binary files /dev/null and b/src/resources/Images/secuoya-roja.png differ
diff --git a/src/resources/Images/valeriana.png b/src/resources/Images/valeriana.png
new file mode 100644
index 00000000..4a30eed7
Binary files /dev/null and b/src/resources/Images/valeriana.png differ
diff --git a/src/resources/Images/yuca.png b/src/resources/Images/yuca.png
new file mode 100644
index 00000000..cb4ce3f0
Binary files /dev/null and b/src/resources/Images/yuca.png differ
diff --git a/src/resources/Readme-Images/alta-fidelidad.png b/src/resources/Readme-Images/alta-fidelidad.png
new file mode 100644
index 00000000..53f4fe94
Binary files /dev/null and b/src/resources/Readme-Images/alta-fidelidad.png differ
diff --git a/src/resources/Readme-Images/baja-fidelidad.png b/src/resources/Readme-Images/baja-fidelidad.png
new file mode 100644
index 00000000..3f63f4ee
Binary files /dev/null and b/src/resources/Readme-Images/baja-fidelidad.png differ
diff --git a/src/resources/Readme-Images/canva.png b/src/resources/Readme-Images/canva.png
new file mode 100644
index 00000000..e93eb6eb
Binary files /dev/null and b/src/resources/Readme-Images/canva.png differ
diff --git a/src/resources/Readme-Images/media-fidelidad.png b/src/resources/Readme-Images/media-fidelidad.png
new file mode 100644
index 00000000..f3c1e9dd
Binary files /dev/null and b/src/resources/Readme-Images/media-fidelidad.png differ
diff --git a/src/resources/Readme-Images/notion.png b/src/resources/Readme-Images/notion.png
new file mode 100644
index 00000000..205d19b1
Binary files /dev/null and b/src/resources/Readme-Images/notion.png differ
diff --git a/src/resources/Readme-Images/trello.png b/src/resources/Readme-Images/trello.png
new file mode 100644
index 00000000..d7fbb929
Binary files /dev/null and b/src/resources/Readme-Images/trello.png differ
diff --git a/src/style.css b/src/style.css
index e69de29b..42efca00 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,688 @@
+/* General Styles */
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ /* background-color: blueviolet; */
+}
+
+body {
+ /* background-color: olivedrab; */
+ font-family: 'Lato', sans-serif;
+}
+
+.unnecessary {
+ display: none;
+}
+
+/* Header styles */
+
+header {
+ /* background-color: aquamarine; */
+ padding: 5px;
+ margin: auto;
+ max-width: 90%;
+}
+
+.brand {
+ /* background-color: green; */
+ display: flex;
+ justify-content: center;
+ font-family: 'Marcellus', serif;
+ text-transform: uppercase;
+ font-size: 23px;
+ margin-top: 10px;
+}
+
+header img {
+ height: 40px;
+ width: 40px;
+ margin: 10px;
+}
+
+header h1 {
+ margin: 10px;
+}
+
+/* Search by name styles */
+
+aside.search-by-name.container {
+ display: flex;
+ align-items: center;
+ margin-top: 40px;
+ display: flex;
+ justify-content: center;
+ margin-right: 810px;
+ margin-top: 37px;
+}
+
+.search-container input {
+ /* background-color: #AF4401; */
+ width: 150px;
+ border-radius: 5px;
+ border: #8A988C solid .5px;
+ box-shadow: 1px 1px 5px gray;
+ font-size: small;
+ font-weight: bold;
+ padding: 3px 5px;
+}
+
+/* Categories menu styles */
+
+.category-menu {
+ /* background-color: blue; */
+ padding: 5px;
+ width: 610px;
+ font-family: 'Marcellus', serif;
+ position: relative;
+ margin: auto;
+ margin-top: -55px;
+ left: 27px;
+}
+
+.category-nav {
+ /* background-color: palevioletred; */
+ display: inline-flex;
+ padding: 5px;
+ width: 600px;
+}
+
+.item-aside {
+ /* background-color: antiquewhite; */
+ width: 500px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.item-aside input[type=image] {
+ /* background-color: black; */
+ width: 50px;
+ height: 50px;
+}
+
+/* Order by drop button styles */
+
+.order-by {
+ /* background-color: #AF4401; */
+ display: flex;
+ justify-content: center;
+ margin-left: 760px;
+ margin-top: -50px;
+}
+
+.order-by label {
+ background-color: #C4CBC5;
+ border-radius: 5px;
+ border: #8A988C solid 1px;
+ box-shadow: 1px 1px 5px gray;
+ text-transform: uppercase;
+ text-align: center;
+ font-weight: bold;
+ font-size: 15px;
+ width: 100px;
+ height: 20px;
+}
+
+.order-by #item-order {
+ margin: 0 -90px;
+ width: 100px;
+}
+
+ select {
+ width: 80px;
+ height: 20px;
+ border: #8A988C solid 1px;
+ text-transform: uppercase;
+ font-size: small;
+ font-weight: bold;
+}
+
+select#item-order {
+ opacity: 0;
+ margin: 5px 0 0 -140px;
+}
+
+/* Main styles */
+
+main {
+ /* background-color: plum; */
+ padding: 10px;
+ width: 90%;
+ display: flex;
+ margin: auto;
+ margin-bottom: 100px;
+}
+
+#root {
+ /* background-color: #AF4401; */
+ width: 90%;
+ display: flex;
+ margin: auto;
+ justify-content: center;
+ padding: 10px;
+}
+
+ul {
+ /* background-color: gray; */
+ list-style: none;
+ width: 90%;
+ padding: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin-top: 20px;
+}
+
+/* Card styles */
+
+.card-container {
+ background-color: #EBD0BF;
+ padding: 5px;
+ margin: 30px 40px;
+ width: 276px;
+ height: 481px;
+ border-radius: 10px;
+ box-shadow: 2px 2px 5px gray;
+}
+
+li.card-container.ornamental {
+ background-color: #C4CBC5;
+}
+
+li.card-container.medicinal {
+ background-color: #D3DBC6;
+}
+
+li.card-container.desertica {
+ background-color: #F3F2D3;
+}
+
+li.card-container.arbol {
+ background-color: #F9EDD5;
+}
+
+li.card-container.aromatica {
+ background-color: #EBD0BF;
+}
+
+.hide {
+ display: none;
+}
+
+.card-container {
+ box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
+ cursor:default;
+ transition: all 400ms ease;
+ }
+
+ .card-container:hover{
+ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
+ transform: translate(-5%);
+ }
+
+ .back-card{
+ box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
+ cursor:default;
+ transition: all 400ms ease;
+ }
+
+/* Front card styles */
+
+.front-card {
+ /* background-color: #EBD0BF; */
+ padding: 10px;
+ height: 458px;
+ margin: auto;
+ text-align: center;
+}
+
+.front-card h2 {
+ /* background-color: aqua; */
+ font-family: 'Marcellus', serif;
+ color: #AF4401;
+ padding: 10px;
+}
+
+.amounts {
+ width: 80px;
+}
+
+.front-card .top-card {
+ /* background-color: black; */
+ display: flex;
+ margin: 5px 0 10px 1px;
+}
+
+.front-card .top-card dl {
+ /* background-color: aqua; */
+ text-align: center;
+ margin-left: 25px;
+ height: 234px;
+}
+
+.front-card .top-card dt {
+ /* background-color: #AF4401; */
+ font-size: small;
+ margin: 10px 0 5px 0;
+ font-weight: bold;
+}
+
+.front-card .top-card .amounts dd {
+ padding: 5px;
+ /* background-color: blue; */
+ border-radius: 5px;
+ border: #8A988C .5px solid;
+ box-shadow: 1px 1px 5px grey;
+ height: 40px;
+}
+
+.front-card .top-card .amounts img {
+ /* background-color: white; */
+ width: 20px;
+ height: 20px;
+ margin: 4px 0;
+}
+
+.front-card .top-card .amounts img.inactive {
+ opacity: .3;
+}
+
+.front-card .bottom-card {
+ display: flex;
+ text-align: center;
+}
+.front-card p {
+ /* background-color: aliceblue; */
+ padding: 5px;
+ margin: 10px 0;
+ font-size: 15px;
+ height: 90px;
+ text-align: left;
+}
+
+.details-button {
+ /* background-color: black; */
+ justify-content: center;
+ background-color: #D7A180;
+ width: 137px;
+ height: 32px;
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 20px;
+ color: white;
+ text-align: center;
+ border-radius: 10px;
+ border: none;
+ box-shadow: 2px 2px 5px grey;
+}
+
+/* Back card styles */
+
+ #back-card {
+ /* background-color: white; */
+ padding: 5px 5px;
+ text-align: right;
+ height: 471px;
+}
+
+#back-card h2 {
+ /* background-color: aquamarine; */
+ font-size: 26px;
+ color: #AF4401;
+ font-family: 'Marcellus', serif;
+ margin-right: 5px;
+}
+
+#back-card .top-card {
+ /* background-color: #D7A180; */
+ height: 136px;
+ display: flex;
+}
+
+#back-card dt.scientific-name {
+ /* background-color: aquamarine; */
+ font-size: 16px;
+ color: #AF4401;
+ margin: 0 0 9px -6px;
+ width: 167px;
+ font-family: 'Marcellus', serif;
+}
+
+#back-card .top-card img {
+ /* background-color: #8A988C; */
+ width: 85px;
+ height: 156px;
+ margin: -20px 0 0 5px;
+}
+
+#back-card dt {
+ /* background-color: #AF4401; */
+ width: 160px;
+ font-size: 14px;
+ font-weight: bold;
+ margin: 6px 10px 0 0;
+}
+
+#back-card dd {
+ /* background-color: #FFFFFF; */
+ font-size: 14px;
+ width: 160px;
+}
+
+#back-card #description {
+ /* background-color: aqua; */
+ text-align: left;
+ margin: 10px 0 0 5px;
+ height: 235px;
+}
+
+#back-card #icons {
+ /* background-color: #AF4401; */
+ height: 35px;
+ width: 250px;
+ display: flex;
+ margin: 10px 0 0 5px;
+ justify-content: center;
+}
+
+.modal-description-button {
+ margin-right: 150px;
+}
+
+/* Modals */
+
+.statistics-modal, .description-modal {
+ margin: auto;
+ background-color: #fefefe;
+ border: 3px solid #E5B655;
+ border-radius: 10px;
+ width: 500px;
+ height: 300px;
+ justify-content: center;
+ padding: 10px;
+}
+
+.statistics-modal h3:first-letter {
+ text-transform: uppercase;
+}
+
+.statistics-modal h3 {
+ font-family: 'Marcellus SC', serif;
+ color: #4F6F1D;
+ font-size: 30px;
+ text-align: center;
+ font-weight: lighter;
+ margin: 10px 0 25px 0;
+}
+
+.statistics {
+ display: flex;
+ /* background-color: #AF4401; */
+ margin: 28px 0 00 0;
+}
+
+
+div.statistics-totals h5 {
+ /* background-color: #E5B655; */
+ font-family: 'Marcellus SC', serif;
+ font-size: 25px;
+ text-align: center;
+ margin: 0 0 20px 80px;
+ text-shadow: .5px .5px .5px gray;
+}
+
+div.statistics .legend {
+ /* background-color: #555; */
+ margin-top: 5px;
+ display: flex;
+}
+
+div.statistics .square {
+ height: 20px;
+ width: 30px;
+ margin: 0 10px 25px 3px;
+ border-radius: 5px;
+}
+
+div.statistics .square.water {
+ background-color: #D7A180;
+}
+
+div.statistics .square.light {
+ background-color: #F2DBAA;
+}
+
+div.statistics .square.care {
+ background-color: #E7E4A7;
+}
+
+h5.water {
+ color: #D7A180;
+}
+
+h5.light {
+ color: #E5B655;
+}
+
+h5.care {
+ color: #D0C950;
+}
+
+.statistics-modal h4 {
+ /* background-color: #4F6F1D; */
+ font-family: 'Marcellus SC', serif;
+ font-size: 21px;
+ text-align: center;
+ font-weight: lighter;
+ color: #4F6F1D;
+ margin: 15px 55px 0 0;
+
+}
+
+ img.close-button, img.close-button-stats {
+ width: 30px;
+ height: 30px;
+ margin: -28px 0 25px 442px;
+}
+
+.description-modal {
+ border: 3px solid #D0C950;
+}
+
+.description-modal h3 {
+ font-family: 'Marcellus', serif;
+ margin: 10px 0 20px 0;
+ color: #AF4401;
+ font-size: 23px;
+ text-align: center;
+}
+
+.description-modal p {
+ /* background-color: #AF4401; */
+ height: 214px;
+}
+
+/* Footer styles */
+
+footer {
+ bottom:0px;
+ position: fixed;
+ height: 100px;
+ width:100%;
+ background-color: #D7A180;
+ color:#FFFFFF;
+ font-weight: bold;
+ font-size: 15px;
+ text-align: center;
+}
+
+footer h3 {
+ font-family: 'Marcellus', serif;
+ font-size: 20px;
+ margin: 14px 0 7px 0;
+ /* margin-bottom: 8px; */
+}
+
+@media (max-width: 600px) {
+
+ /* Header styles */
+
+ header {
+ background-color: #fcfdfc;
+ height: 150px;
+ border-radius: 10px;
+ max-width: 100%;
+ box-shadow: 1px 1px 5px lightgrey;
+ }
+
+ .brand {
+ font-size: 10px;
+ margin-top: 40px;
+ }
+
+ header img {
+ height: 20px;
+ width: 20px;
+ }
+
+ /* Search by name styles */
+
+ aside.search-by-name.container {
+ width: 150px;
+ margin-top: -40px;
+ margin-left: 40px;
+ font-size: smaller;
+ }
+
+ .search-container input {
+ font-size: smaller;
+ height: 18px;
+ }
+
+ /* Order by drop button styles */
+
+ .order-by {
+ margin: auto;
+ width: 70px;
+ margin-top: -16px;
+ margin-right: 80px;
+ font-size: smaller;
+ }
+
+ .order-by label {
+ font-size: smaller;
+ width: 70px;
+ height: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ select {
+ font-size: smaller;
+ }
+
+ /* Modals */
+
+ .statistics-modal, .description-modal {
+ width: 400px;
+ height: 400px;
+ }
+
+ .statistics-modal h3 {
+ font-size: 25px;
+ }
+
+ .statistics {
+ display: flex;
+ margin: 28px 0 0 0;
+ }
+
+ div.statistics-totals h5 {
+ font-size: 20px;
+ width: 150px;
+ margin-left: 20px;
+ }
+
+ .legend p {
+ font-size: 13px;
+ }
+
+ div.statistics .legend {
+ margin-top: 5px;
+ display: flex;
+ height: 40px;
+ }
+
+ div.statistics .square {
+ height: 15px;
+ width: 24px;
+ }
+
+ .statistics-modal h4 {
+ font-size: 18px;
+ text-align: center;
+ width: 100%;
+ }
+
+ img.close-button, img.close-button-stats {
+ width: 25px;
+ height: 25px;
+ margin: 80px 0 0 310px;
+ }
+
+ .description-modal {
+ padding: 15px;
+ }
+
+ .description-modal h3 {
+ margin: 5px 0 18px 0;
+ }
+
+ /* Categories menu styles */
+
+ .category-menu {
+ bottom:0px;
+ position: fixed;
+ height: 110px;
+ width: 100%;
+ background-color: #f9faf9;
+ font-size: 10px;
+ padding: 5px;
+ border-radius: 10px;
+ box-shadow: 5px 5px 13px gray;;
+ left: 0;
+ }
+
+ .category-nav {
+ margin-top: 6px;
+ max-width: 100%;
+ }
+
+ .item-aside input[type=image] {
+ width: 30px;
+ height: 30px;
+ }
+
+ /* Footer styles */
+
+ footer {
+ height: 30px;
+ font-size: 9px;
+ display: flex;
+ justify-content: center;
+
+
+ }
+
+ footer h3 {
+ font-size: 10px;
+ margin: 0 5px 0 5px;
+ }
+
+ footer p {
+ margin: 0 5px 0 5px;
+ }
+}
\ No newline at end of file
diff --git a/src/view.js b/src/view.js
index 686f5ef9..3372ce8b 100644
--- a/src/view.js
+++ b/src/view.js
@@ -1,5 +1,283 @@
+//----------------------
+// /**
+// * This function receives a plant model and extract the fact information
+// * rendering depending of the value found in the model
+// *
+// * @param { card } plant - The plant model that contains the info
+// * @param { HTML element } cardItem - The card that represents UI the element inside the DOM
+// */
+const renderFactImages = (plant, cardItem) => {
+ // Create static elements
+ const waterActiveImage = document.createElement("img");
+ waterActiveImage.alt="Gota";
+ waterActiveImage.src="resources/Icons/agua-activa.png";
+
+ const waterActiveImage2 = document.createElement("img");
+ waterActiveImage2.alt="Gota";
+ waterActiveImage2.src="resources/Icons/agua-activa.png";
+
+ const waterActiveImage3 = document.createElement("img");
+ waterActiveImage3.alt="Gota";
+ waterActiveImage3.src="resources/Icons/agua-activa.png";
+
+ const lightActiveImage = document.createElement("img");
+ lightActiveImage.alt="Luz";
+ lightActiveImage.src="resources/Icons/luz-activa.png";
+
+ const lightActiveImage2 = document.createElement("img");
+ lightActiveImage2.alt="Luz";
+ lightActiveImage2.src="resources/Icons/luz-activa.png";
+
+ const lightActiveImage3 = document.createElement("img");
+ lightActiveImage3.alt="Luz";
+ lightActiveImage3.src="resources/Icons/luz-activa.png";
+
+ const careActiveImage = document.createElement("img");
+ careActiveImage.alt="Semaforo";
+ careActiveImage.src="resources/Icons/cuidado-activa.png";
+
+ const careActiveImage2 = document.createElement("img");
+ careActiveImage2.alt="Semaforo";
+ careActiveImage2.src="resources/Icons/cuidado-activa.png";
+
+ const careActiveImage3 = document.createElement("img");
+ careActiveImage3.alt="Semaforo";
+ careActiveImage3.src="resources/Icons/cuidado-activa.png";
+
+ // 1 - Iterar en data forEach
+ // 2 - Get facts by type
+ const waterAmount = plant.facts.waterAmount;
+ const sunLight = plant.facts.sunLight;
+ const careDifficulty = plant.facts.careDifficulty;
+
+ const waterArea = cardItem.querySelector(".water-icons");
+ document.querySelector('#water');
+
+ // 3 - condicionales
+ // 3.1 repetir por fact
+ // 3.2 water facts
+ if (waterAmount === 1) {
+ //4 dibujar 1 activa 2 inactivas
+ waterArea.appendChild(waterActiveImage);
+ waterArea.appendChild(waterActiveImage2); //anadir clase
+ waterActiveImage2.className="inactive";
+ waterArea.appendChild(waterActiveImage3); //anadir clase
+ waterActiveImage3.className="inactive";
+ } else if (waterAmount === 2) {
+ //4 dibujar 2 activas 1 inactiva
+ waterArea.appendChild(waterActiveImage);
+ waterArea.appendChild(waterActiveImage2);
+ waterArea.appendChild(waterActiveImage3); //anadir clase
+ waterActiveImage3.className="inactive";
+ } else if (waterAmount === 3) {
+ //4 dibujar 3 activas
+ waterArea.appendChild(waterActiveImage);
+ waterArea.appendChild(waterActiveImage2);
+ waterArea.appendChild(waterActiveImage3);
+ }
+
+ //Repeat for Light amount
+ const lightArea = cardItem.querySelector(".light-icons");
+ document.querySelector('#light');
+
+ if (sunLight === 1) {
+ lightArea.appendChild(lightActiveImage);
+ lightActiveImage2.className="inactive";
+ lightArea.appendChild(lightActiveImage2);
+ lightActiveImage3.className="inactive";
+ lightArea.appendChild(lightActiveImage3);
+ } else if (sunLight === 2) {
+ lightArea.appendChild(lightActiveImage);
+ lightArea.appendChild(lightActiveImage2);
+ lightActiveImage3.className="inactive";
+ lightArea.appendChild(lightActiveImage3);
+ } else if (sunLight === 3) {
+ lightArea.appendChild(lightActiveImage);
+ lightArea.appendChild(lightActiveImage2);
+ lightArea.appendChild(lightActiveImage3);
+ }
+
+ //Repeat for Care amount
+ const careArea = cardItem.querySelector(".care-icons");
+ document.querySelector('#care');
+
+ if (careDifficulty === 1) {
+ careArea.appendChild(careActiveImage);
+ careActiveImage2.className="inactive";
+ careArea.appendChild(careActiveImage2);
+ careActiveImage3.className="inactive";
+ careArea.appendChild(careActiveImage3);
+ } else if (careDifficulty === 2) {
+ careArea.appendChild(careActiveImage);
+ careArea.appendChild(careActiveImage2);
+ careActiveImage3.className="inactive";
+ careArea.appendChild(careActiveImage3);
+ } else if (careDifficulty === 3) {
+ careArea.appendChild(careActiveImage);
+ careArea.appendChild(careActiveImage2);
+ careArea.appendChild(careActiveImage3);
+ }
+}
+
+//----------------------
+/**
+ * This function creates card list that contains
+ * every card,
+ * icon butons area,
+ * and modals
+ *
+ * @param { [every plant] } data - From dataset
+ *
+ * @returns cardList
+ */
export const renderItems = (data) => {
- console.log(data)
- // Aquí comienza tu código y puedes retornar lo que tu necesites
- return 'example';
-};
\ No newline at end of file
+ // Creating list, container to host all the cards
+ const cardList = document.querySelector("#ul-cards");
+
+ //Iterates for each element of the object from data
+ data.forEach(element => {
+
+ //Creating all buttons
+ const statisticsButton = document.createElement('img');
+ statisticsButton.className="modal-statistics-button";
+ statisticsButton.alt="Estadísticas";
+ statisticsButton.src="resources/Icons/estadisticas.png";
+ statisticsButton.id=element.categoryPlant;
+
+ const descriptionButton = document.createElement('img');
+ descriptionButton.className="modal-description-button";
+ descriptionButton.alt="Descripcion";
+ descriptionButton.src="resources/Icons/descripcion.png";
+ descriptionButton.id=element.id;
+
+ const backButton = document.createElement("img");
+ backButton.id = "flip-button";
+ backButton.className = "flip-button";
+ backButton.alt = "Regresar";
+ backButton.src = "resources/Icons/Regresar.png";
+
+ //Creting the li element to represent the plant as UI card
+ const cardItem = document.createElement('li');
+
+ //Card item creation, every card represents a plant from the data.
+ cardItem.className="card-container " + element.categoryPlant;
+ cardItem.setAttribute("itemscope", "");
+ cardItem.setAttribute("itemtype", "https://schema.org");
+ cardItem.innerHTML +=`
+
+
+ ${element.name}
+
+
+
+
+
Agua
+
+
+
+
+
+
Luz
+
+
+
+
+
+
Cuidado
+
+
+
+
+
+
+
${element.shortDescription}
+
Detalles
+
+
+
+ ${element.name}
+
+
+
+ ${element.scientificName}
+ Familia botánica ${element.botanicalFamily}
+ Lugar de origen ${element.birthPlace}
+
+
+
+ Usos ${element.applicationsPlant}
+ Datos climáticos ${element.climaticData}
+ Mantenimiento ${element.maintenanceNeeds}
+
+
+
+ `
+
+ //Plant card UI respresentation is ready to add to the list
+ cardList.appendChild(cardItem);
+ //Creates the images for facts representation
+ renderFactImages(element, cardItem);
+
+ //Add icons area to the reverse card that contains
+ //stats, description and reverse buttons
+ const icons = cardItem.querySelector("#icons");
+ document.querySelector('#icons');
+ icons.appendChild(statisticsButton);
+ icons.appendChild(descriptionButton);
+ icons.appendChild(backButton);
+ });
+
+ // Modal containers creation
+ const modalsContainer = document.createElement('div');
+ modalsContainer.className="modal-boxes";
+
+ // Creating description modal
+ const descriptionModal = document.createElement('dialog');
+ descriptionModal.id="description-modal";
+ descriptionModal.className="description-modal";
+ descriptionModal.innerHTML+= `
+
+
+
`
+
+ // Creating stats Modal
+ const statsModal= document.createElement('dialog');
+ statsModal.id="statistics-modal";
+ statsModal.className="statistics-modal";
+ statsModal.innerHTML+=`
+
Plant Category
+
+
Qué cuidados necesita este tipo de plantas?
+
`
+
+ //Adding the modals to the card
+ modalsContainer.appendChild(descriptionModal);
+ modalsContainer.appendChild(statsModal);
+
+ //Modals are added outside the UI card representation
+ cardList.insertAdjacentElement("afterend", modalsContainer);
+
+ //Returns all created elements
+ return cardList;
+}
\ No newline at end of file
diff --git a/test/data.js b/test/data.js
index 077a202a..7b0e5b66 100644
--- a/test/data.js
+++ b/test/data.js
@@ -1,52 +1,117 @@
// Aqui puedes agregar los datos que necesites para tus pruebas
// al menos debe tener uno que se llame "data"
-export const data = [{
- "id": "ada-lovelace",
- "name": "Ada Lovelace",
- "shortDescription": "Pionera en la programación, primera programadora de la historia.",
- "description": "Una visionaria matemática británica del siglo XIX, es aclamada como la primera programadora de la historia. Su colaboración con Charles Babbage en la creación de la Máquina Analítica la llevó a desarrollar algoritmos, incluyendo el famoso \"algoritmo de Bernoulli\", destinados a ser procesados por una máquina. Su visión pionera la convirtió en una figura fundamental en la informática y la inteligencia artificial. Lovelace demostró que las computadoras podían ir más allá de simples cálculos matemáticos, anticipando un mundo donde la programación sería esencial en la resolución de problemas complejos, dejando una huella imborrable en la ciencia y la tecnología.",
- "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/ada-lovelace.jpg",
- "facts": {
- "yearOfBirth": "1815",
- "yearOfDeath": "1852",
- "birthPlace": "Londres, Reino Unido",
- "mainField": "Ciencia de la Computación"
- },
- "extraInfo": {
- "imageSource": "https://www.bing.com/images/create/genera-una-imagen-de-ada-lovelace2c-la-primera-prog/650a1eff8ff04b88833d5cdef0309441"
- }
-},
-{
- "id": "emmy-noether",
- "name": "Emmy Noether",
- "shortDescription": "Matemática destacada, teorema fundamental en álgebra abstracta.",
- "description": "Una brillante matemática alemana, revolucionó la física teórica con sus contribuciones al teorema de conservación de la energía y el teorema de Noether, fundamentales en la teoría de la relatividad y la mecánica cuántica. A pesar de los obstáculos que enfrentó como mujer en la academia, sus investigaciones en álgebra abstracta y teoría de grupos son fundamentales en la física moderna. Su capacidad para unificar conceptos matemáticos y físicos marcó un hito en la historia de la ciencia, allanando el camino para futuras generaciones de científicas.",
- "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/emmy-noether.jpg",
- "facts": {
- "yearOfBirth": "1882",
- "yearOfDeath": "1935",
- "birthPlace": "Erlangen, Alemania",
- "mainField": "Matemáticas"
- },
- "extraInfo": {
- "imageSource": "https://www.bing.com/images/create/create-an-image-of-of-a-german-woman2c-a-pioneering/6510ddb1e8254b928b8f8f1d5e95fea4"
- }
-},
-{
- "id": "hypatia-de-alejandria",
- "name": "Hypatia de Alejandría",
- "shortDescription": "Matemática y filósofa en la antigua Alejandría.",
- "description": "Filósofa y matemática en la antigua Alejandría, desafió las normas de género de su época al destacar en una sociedad dominada por hombres. Su legado incluye importantes contribuciones a la geometría y la astronomía, así como su destacado papel como maestra y defensora del conocimiento en una época de agitación política. Hypatia demostró que las mujeres podían sobresalir en campos intelectuales y su valentía al mantener sus creencias filosóficas la convierte en un símbolo de resistencia y sabiduría en la historia de la ciencia.",
- "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/hypatia-de-alejandria.jpg",
- "facts": {
- "yearOfBirth": "circa 360",
- "yearOfDeath": "415",
- "birthPlace": "Alejandría, Egipto",
- "mainField": "Matemáticas, Filosofía"
- },
- "extraInfo": {
- "imageSource": "https://www.bing.com/images/create/create-a-vivid-digital-artwork-or-painting-that-de/6510df0ebe1a4807af22175452761e1a"
- }
-},];
-
+export const data = [
+ {
+ "id": "begonia",
+ "categoryPlant":"ornamental",
+ "name": "Begonia",
+ "maintenanceNeeds": "Necesita riego regular y evitar la luz solar directa.",
+ "scientificName": "Begonia",
+ "applicationsPlant": "Jardinería decorativa, colecciones botánicas.",
+ "climaticData": "Prefiere ambientes húmedos y sombreados.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 1,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "aloevera",
+ "categoryPlant":"medicinal",
+ "name": "Aloe Vera",
+ "maintenanceNeeds": "Riego escaso y exposición a pleno sol o sombra parcial.",
+ "scientificName": "Aloe barbadensis miller",
+ "applicationsPlant": "Productos medicinales y cosméticos, jardinería.",
+ "climaticData": "Resistente a la sequía, prefiere climas cálidos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":1,
+ },
+ },
+ {
+ "id": "menta",
+ "categoryPlant":"aromatica",
+ "name": "Menta",
+ "maintenanceNeeds": "Controlar su crecimiento invasivo y proporcionar suficiente agua.",
+ "scientificName": "Mentha",
+ "applicationsPlant": "Cocina, bebidas, productos de higiene, remedios naturales.",
+ "climaticData": "Prefiere suelos húmedos y lugares con sombra parcial.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "manzanilla",
+ "categoryPlant":"medicinal",
+ "name": "Manzanilla",
+ "maintenanceNeeds": "Necesita sol pleno y suelo bien drenado.",
+ "scientificName": "Matricaria chamomilla",
+ "applicationsPlant": "Infusiones, remedios naturales, cosmética.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "albahaca",
+ "categoryPlant":"aromatica",
+ "name": "Albahaca",
+ "maintenanceNeeds": "Requiere sol pleno y riego regular, evitar exceso de humedad.",
+ "scientificName": "Ocimum basilicum",
+ "applicationsPlant": "Cocina, jardinería ornamental, aceites esenciales.",
+ "climaticData": "Prefiere climas cálidos y suelo bien drenado.",
+ "facts": {
+ "waterAmount":3,
+ "sunLight": 2,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "azalea",
+ "categoryPlant":"ornamental",
+ "name": "Azalea",
+ "maintenanceNeeds": "Requiere suelo ácido y poda después de la floración.",
+ "scientificName": "Rhododendron",
+ "applicationsPlant": "Jardinería ornamental, cultivo en macetas.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 1,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "roble",
+ "categoryPlant":"arbol",
+ "name": "Roble",
+ "maintenanceNeeds": "Requiere espacio para crecer, poco mantenimiento una vez establecido.",
+ "scientificName": "Quercus",
+ "applicationsPlant": "Construcción, muebles, barriles para vino.",
+ "climaticData": "Adaptable a diversos climas, prefiere suelos profundos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "ocotillo",
+ "categoryPlant":"desertica",
+ "name": "Ocotillo",
+ "maintenanceNeeds": "Requiere poca agua y suelo bien drenado.",
+ "scientificName": "Fouquieria splendens",
+ "applicationsPlant": "Jardinería xerófila, ornamentación, cercas vivas.",
+ "climaticData": "Adaptable a condiciones áridas, prefiere suelo bien drenado.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+]
\ No newline at end of file
diff --git a/test/dataFunctions.spec.js b/test/dataFunctions.spec.js
index 72c5eb9d..6833ed8a 100644
--- a/test/dataFunctions.spec.js
+++ b/test/dataFunctions.spec.js
@@ -1,18 +1,401 @@
-import { example, anotherExample } from '../src/dataFunctions.js';
+import { filterData, sortData, computeStats } from '../src/dataFunctions.js';
import { data as fakeData } from './data.js';
-console.log(fakeData);
-
-describe('example', () => {
-
- it('returns `example`', () => {
- expect(example()).toBe('example');
+describe('filterData', () => {
+ it('returns an array with filtered data by category', () => {
+ const result = filterData(fakeData, "categoryPlant", "ornamental");
+ expect(result).toEqual([
+ {
+ "id": "begonia",
+ "categoryPlant":"ornamental",
+ "name": "Begonia",
+ "maintenanceNeeds": "Necesita riego regular y evitar la luz solar directa.",
+ "scientificName": "Begonia",
+ "applicationsPlant": "Jardinería decorativa, colecciones botánicas.",
+ "climaticData": "Prefiere ambientes húmedos y sombreados.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 1,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "azalea",
+ "categoryPlant":"ornamental",
+ "name": "Azalea",
+ "maintenanceNeeds": "Requiere suelo ácido y poda después de la floración.",
+ "scientificName": "Rhododendron",
+ "applicationsPlant": "Jardinería ornamental, cultivo en macetas.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 1,
+ "careDifficulty":2,
+ }
+ }
+ ]);
+ expect(result).toHaveLength(2);
});
+
+ it ('returns an array with filtered data by id', () => {
+ const result = filterData(fakeData, "id", "roble");
+ expect(result).toEqual([
+ {
+ "id": "roble",
+ "categoryPlant":"arbol",
+ "name": "Roble",
+ "maintenanceNeeds": "Requiere espacio para crecer, poco mantenimiento una vez establecido.",
+ "scientificName": "Quercus",
+ "applicationsPlant": "Construcción, muebles, barriles para vino.",
+ "climaticData": "Adaptable a diversos climas, prefiere suelos profundos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+ ]);
+ expect(result).toHaveLength(1);
+ })
});
-describe('anotherExample', () => {
- it('returns `anotherExample`', () => {
- expect(anotherExample()).toBe('OMG');
+describe('sortData', () => {
+ it('returns the array in ascendant sorting', () => {
+ sortData(fakeData, "id", 1);
+ expect(fakeData).toEqual([
+ {
+ "id": "albahaca",
+ "categoryPlant":"aromatica",
+ "name": "Albahaca",
+ "maintenanceNeeds": "Requiere sol pleno y riego regular, evitar exceso de humedad.",
+ "scientificName": "Ocimum basilicum",
+ "applicationsPlant": "Cocina, jardinería ornamental, aceites esenciales.",
+ "climaticData": "Prefiere climas cálidos y suelo bien drenado.",
+ "facts": {
+ "waterAmount":3,
+ "sunLight": 2,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "aloevera",
+ "categoryPlant":"medicinal",
+ "name": "Aloe Vera",
+ "maintenanceNeeds": "Riego escaso y exposición a pleno sol o sombra parcial.",
+ "scientificName": "Aloe barbadensis miller",
+ "applicationsPlant": "Productos medicinales y cosméticos, jardinería.",
+ "climaticData": "Resistente a la sequía, prefiere climas cálidos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":1,
+ },
+ },
+ {
+ "id": "azalea",
+ "categoryPlant":"ornamental",
+ "name": "Azalea",
+ "maintenanceNeeds": "Requiere suelo ácido y poda después de la floración.",
+ "scientificName": "Rhododendron",
+ "applicationsPlant": "Jardinería ornamental, cultivo en macetas.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 1,
+ "careDifficulty":2,
+ }
+ },
+ {
+ "id": "begonia",
+ "categoryPlant":"ornamental",
+ "name": "Begonia",
+ "maintenanceNeeds": "Necesita riego regular y evitar la luz solar directa.",
+ "scientificName": "Begonia",
+ "applicationsPlant": "Jardinería decorativa, colecciones botánicas.",
+ "climaticData": "Prefiere ambientes húmedos y sombreados.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 1,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "manzanilla",
+ "categoryPlant":"medicinal",
+ "name": "Manzanilla",
+ "maintenanceNeeds": "Necesita sol pleno y suelo bien drenado.",
+ "scientificName": "Matricaria chamomilla",
+ "applicationsPlant": "Infusiones, remedios naturales, cosmética.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "menta",
+ "categoryPlant":"aromatica",
+ "name": "Menta",
+ "maintenanceNeeds": "Controlar su crecimiento invasivo y proporcionar suficiente agua.",
+ "scientificName": "Mentha",
+ "applicationsPlant": "Cocina, bebidas, productos de higiene, remedios naturales.",
+ "climaticData": "Prefiere suelos húmedos y lugares con sombra parcial.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "ocotillo",
+ "categoryPlant":"desertica",
+ "name": "Ocotillo",
+ "maintenanceNeeds": "Requiere poca agua y suelo bien drenado.",
+ "scientificName": "Fouquieria splendens",
+ "applicationsPlant": "Jardinería xerófila, ornamentación, cercas vivas.",
+ "climaticData": "Adaptable a condiciones áridas, prefiere suelo bien drenado.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "roble",
+ "categoryPlant":"arbol",
+ "name": "Roble",
+ "maintenanceNeeds": "Requiere espacio para crecer, poco mantenimiento una vez establecido.",
+ "scientificName": "Quercus",
+ "applicationsPlant": "Construcción, muebles, barriles para vino.",
+ "climaticData": "Adaptable a diversos climas, prefiere suelos profundos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+ ]);
+ });
+ it('returns the array in descendant sorting', () => {
+ sortData(fakeData, "id", 2);
+ expect(fakeData).toEqual([
+ {
+ "id": "roble",
+ "categoryPlant":"arbol",
+ "name": "Roble",
+ "maintenanceNeeds": "Requiere espacio para crecer, poco mantenimiento una vez establecido.",
+ "scientificName": "Quercus",
+ "applicationsPlant": "Construcción, muebles, barriles para vino.",
+ "climaticData": "Adaptable a diversos climas, prefiere suelos profundos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "ocotillo",
+ "categoryPlant":"desertica",
+ "name": "Ocotillo",
+ "maintenanceNeeds": "Requiere poca agua y suelo bien drenado.",
+ "scientificName": "Fouquieria splendens",
+ "applicationsPlant": "Jardinería xerófila, ornamentación, cercas vivas.",
+ "climaticData": "Adaptable a condiciones áridas, prefiere suelo bien drenado.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 3,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "menta",
+ "categoryPlant":"aromatica",
+ "name": "Menta",
+ "maintenanceNeeds": "Controlar su crecimiento invasivo y proporcionar suficiente agua.",
+ "scientificName": "Mentha",
+ "applicationsPlant": "Cocina, bebidas, productos de higiene, remedios naturales.",
+ "climaticData": "Prefiere suelos húmedos y lugares con sombra parcial.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":2,
+ },
+ },
+ {
+ "id": "manzanilla",
+ "categoryPlant":"medicinal",
+ "name": "Manzanilla",
+ "maintenanceNeeds": "Necesita sol pleno y suelo bien drenado.",
+ "scientificName": "Matricaria chamomilla",
+ "applicationsPlant": "Infusiones, remedios naturales, cosmética.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "begonia",
+ "categoryPlant":"ornamental",
+ "name": "Begonia",
+ "maintenanceNeeds": "Necesita riego regular y evitar la luz solar directa.",
+ "scientificName": "Begonia",
+ "applicationsPlant": "Jardinería decorativa, colecciones botánicas.",
+ "climaticData": "Prefiere ambientes húmedos y sombreados.",
+ "facts": {
+ "waterAmount":1,
+ "sunLight": 1,
+ "careDifficulty":3,
+ },
+ },
+ {
+ "id": "azalea",
+ "categoryPlant":"ornamental",
+ "name": "Azalea",
+ "maintenanceNeeds": "Requiere suelo ácido y poda después de la floración.",
+ "scientificName": "Rhododendron",
+ "applicationsPlant": "Jardinería ornamental, cultivo en macetas.",
+ "climaticData": "Prefiere climas templados y suelo bien drenado.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 1,
+ "careDifficulty":2,
+ }
+ },
+ {
+ "id": "aloevera",
+ "categoryPlant":"medicinal",
+ "name": "Aloe Vera",
+ "maintenanceNeeds": "Riego escaso y exposición a pleno sol o sombra parcial.",
+ "scientificName": "Aloe barbadensis miller",
+ "applicationsPlant": "Productos medicinales y cosméticos, jardinería.",
+ "climaticData": "Resistente a la sequía, prefiere climas cálidos.",
+ "facts": {
+ "waterAmount":2,
+ "sunLight": 2,
+ "careDifficulty":1,
+ },
+ },
+ {
+ "id": "albahaca",
+ "categoryPlant":"aromatica",
+ "name": "Albahaca",
+ "maintenanceNeeds": "Requiere sol pleno y riego regular, evitar exceso de humedad.",
+ "scientificName": "Ocimum basilicum",
+ "applicationsPlant": "Cocina, jardinería ornamental, aceites esenciales.",
+ "climaticData": "Prefiere climas cálidos y suelo bien drenado.",
+ "facts": {
+ "waterAmount":3,
+ "sunLight": 2,
+ "careDifficulty":3,
+ },
+ },
+ ]);
+ });
+ it('returns the same length', () => {
+ sortData(fakeData, "id", 2);
+ expect(fakeData).toHaveLength(8);
+ });
+ it('returns the same length', () => {
+ sortData(fakeData, "id", 0);
+ expect(fakeData).toHaveLength(8);
});
});
+
+describe('computeStats', () => {
+ it('returns the average', () => {
+ const result = computeStats(fakeData);
+ expect(result).toEqual(
+ {
+ "aromatica":{
+ average:{
+ waterAverage:2,
+ lightAverage:2,
+ careAverage:2
+ },
+ factsByPlants:[
+ {
+ waterAmount: 2,
+ sunLight: 2,
+ careDifficulty:2
+ },
+ {
+ waterAmount:3,
+ sunLight: 2,
+ careDifficulty:3
+ },
+ ],
+ },
+ "medicinal":{
+ average:{
+ waterAverage:2,
+ lightAverage:2,
+ careAverage:2
+ },
+ factsByPlants:[
+ {
+ waterAmount:2,
+ sunLight: 2,
+ careDifficulty:3
+ },
+ {
+ waterAmount: 2,
+ sunLight: 2,
+ careDifficulty:1
+ },
+ ],
+ },
+ "ornamental":{
+ average:{
+ waterAverage:1,
+ lightAverage:1,
+ careAverage:2
+ },
+ factsByPlants:[
+ {
+ waterAmount: 1,
+ sunLight: 1,
+ careDifficulty: 3
+ },
+ {
+ waterAmount:2,
+ sunLight: 1,
+ careDifficulty:2
+ },
+ ],
+ },
+ "arbol":{
+ average:{
+ waterAverage:2,
+ lightAverage:3,
+ careAverage:2
+ },
+ factsByPlants:[
+ {
+ waterAmount: 2,
+ sunLight: 3,
+ careDifficulty: 2
+ },
+ ],
+ },
+ "desertica":{
+ average:{
+ waterAverage:1,
+ lightAverage:3,
+ careAverage:2
+ },
+ factsByPlants:[
+ {
+ waterAmount: 1,
+ sunLight: 3,
+ careDifficulty: 2
+ }
+ ]
+ },
+ }
+ );
+ });
+});
\ No newline at end of file
+