diff --git a/src/data/dataset.js b/src/data/dataset.js index 0ebafb6f..304cedb1 100644 --- a/src/data/dataset.js +++ b/src/data/dataset.js @@ -9,7 +9,7 @@ export default [ "yearOfBirth": "1815", "yearOfDeath": "1852", "birthPlace": "Londres, Reino Unido", - "mainField": "Ciencia de la Computación" + "mainField": "Ciencias de la Computación" }, "extraInfo": { "imageSource": "https://www.bing.com/images/create/genera-una-imagen-de-ada-lovelace2c-la-primera-prog/650a1eff8ff04b88833d5cdef0309441" @@ -66,7 +66,7 @@ export default [ { "id": "shakuntala-devi", "name": "Shakuntala Devi", - "shortDescription": "Matemática prodigio, conocida como la 'Calculadora Humana'.", + "shortDescription": "Matemática prodígio, conocida como la 'Calculadora Humana'.", "description": "Conocida como \"la bruja de las matemáticas\" de la India, dejó una marca indeleble en el mundo de los números. Su capacidad mental asombrosa la llevó a resolver complejos cálculos matemáticos mentalmente en cuestión de segundos, estableciendo récords mundiales. Además de su talento innato, Devi promovió activamente la educación matemática y luchó por la igualdad de género en un país donde las mujeres enfrentaban desafíos en la ciencia y la educación. Su legado destaca el poder de la mente humana y la importancia de la igualdad de oportunidades en la ciencia.", "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/shakuntala-devi.jpg", "facts": { diff --git a/src/dataFunctions.js b/src/dataFunctions.js index 5de554af..57a62073 100644 --- a/src/dataFunctions.js +++ b/src/dataFunctions.js @@ -1,9 +1,36 @@ // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones. +// quiero filtrar la data +// quiero realizar una función para filtrar los datos que necesito -export const example = () => { - return 'example'; +export const filtrerData = (data, filterBy, value) => { + // Utiliza el método filter() para filtrar los datos + return data.filter((data) => { + // Verifica si el campo filterBy existe en el objeto de datos + if (data.facts[filterBy]) { + // Si existe, compara el valor del campo con el valor deseado + return data.facts[filterBy] === value; + } + // Si el campo filterBy no existe, devuelve false para excluir este dato del resultado + return false; + }); }; -export const anotherExample = () => { - return []; -}; +// Función para ordenar los datos + +function sortData(data, sortBy, sortOrder) { + const sortedData = [...data]; + sortedData.sort((a, b) => { + if (sortOrder === 'asc') { + return a[sortBy] > b[sortBy] ? 1 : -1; + } else { + return a[sortBy] < b[sortBy] ? 1 : -1; + } + }); + return sortedData; +} + + + + + + diff --git a/src/index.html b/src/index.html index 0151e7de..e653fd12 100644 --- a/src/index.html +++ b/src/index.html @@ -1,11 +1,59 @@ - + - Data Lovers + Mujeres en la Ciencia + + + +
+

CAMBIOSGI

+
+ +
+

Ellas fueron las primeras científicas

+
+ + + + +
+ + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index c943ecdd..c30aa4a6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,21 @@ -import { example } from './dataFunctions.js'; +import { filtrerData } from './dataFunctions.js'; import { renderItems } from './view.js'; import data from './data/dataset.js'; -console.log(example, renderItems(data), data); \ No newline at end of file +const contenedor = document.querySelector('#root') + +console.log(filtrerData(data,"Matemática")); +console.log(contenedor, renderItems(data), data); + +const elementos = document.querySelector('#tercera'); + +contenedor.addEventListener('change', ()=>{ + elementos.especialidad + +}); + + + + + diff --git a/src/style.css b/src/style.css index e69de29b..afd18e63 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,102 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + background-image: url(./Imagenes/final.jpg); + background-repeat: no-repeat; + background-position: center center; + background-attachment: fixed; + background-size: cover; + +} +header { + height: 200px; + background-size: cover; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + +} + +h1{ + + text-align: center; + font-family: bold; + position: sticky; + color: white; +} +h2 { + color: white; +} + +ul { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.card { + + list-style-type: none; + gap: 5px; + text-align: justify; + padding: 15px; + position: relative; + background-color: #8fcaca; + font-family: 'Times New Roman', Times, serif; + width: 350px; + border-radius: 5px; + margin: 15px; + +} + +.card img { + width: 80%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 10px; + border-radius: 2%; +} + + +/*.opción-back, .opción-front, .opción{ + + text-align: auto; + color: rgb(52, 41, 15); + font-size: 15px; + font: 'bold'; + position: relative; + left: 20%; + top: 40%; + height: 20px; +} + + +.card { + + list-style-type: none; //para sacar los puntos o viñetas + gap: 5px; + margin: 2%; + text-align: justify; + margin:3%; + background-color: #85b4aa; + font-family: 'Times New Roman', Times, serif; + box-shadow: 0px 5px 8px rgba(216, 214, 214, 0.1); + width: calc(35% - 5%); + border-radius: 2%; + +.card img { + width: 80%; + display: flex; + justify-content: center; + align-items: center; + margin: 10px; + box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1); + border-radius: 2%;*/ + diff --git a/src/view.js b/src/view.js index 686f5ef9..3a1bba65 100644 --- a/src/view.js +++ b/src/view.js @@ -1,5 +1,33 @@ export const renderItems = (data) => { - console.log(data) + //console.log(data) // Aquí comienza tu código y puedes retornar lo que tu necesites - return 'example'; + //Debe tener las funciones para rederizar los elementos dinamicamente + //función renderItems(data): recibe los datos renderizarlos y devolver 1 elemento DOM o cadena de datos + + const list = document.createElement ("ul"); + // iterar sobre cada objeto de dataset + data.forEach(data=> { + const itemList = document.createElement('li'); + const itemContainer = document.createElement('dl'); + itemList.classList.add("card"); + itemContainer.innerHTML = ` +
${data.name}
+
Nombre:
${data.name}
+
Descripción:
${data.shortDescription}
+
Fecha de nacimiento:
${data.facts.yearOfBirth}
+
Fecha de muerte:
${data.facts.yearOfDeath}
+
Nacionalidad:
${data.facts.birthPlace}
+
Descripción:
${data.description}
+ + ` + itemContainer.setAttribute("itemscope", ""); + itemContainer.setAttribute("itemtype", "Científicas"); + itemList.appendChild(itemContainer); + list.appendChild(itemList); + + }); + const divContenedorTarjetas = document.querySelector('#root'); + divContenedorTarjetas.appendChild(list); + return list; + }; \ No newline at end of file