diff --git a/README.md b/README.md index e9b59c4c..8f9b4a67 100644 --- a/README.md +++ b/README.md @@ -6,20 +6,37 @@ *** -## Flujo de trabajo - -1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) - de este repositorio. - -2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar - es `git clone` y su estructura normalmente se ve así: - - ```bash - git clone https://github.com//freelancer.git - ``` - -3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio - (puedes solicitar apoyo de tus profes para este paso). - -> Nota: No olvides que es una buena práctica describir tu proyecto en este -> archivo `README.md` y también desplegar tu web a Github Pages :smiley:. +## Objetivo +Elaborar una pagina web con los siguientes requerimientos: +En Laboratoria, las Training Managers (TMs) hacen un gran trabajo al analizar la mayor cantidad de datos posibles respecto al desempeño de las estudiantes para apoyarlas en su aprendizaje. Para revisar esta data, las TMs, normalmente, tienen que revisar muchos documentos de excel (Google Spreadsheets) que están localizados en distintas carpetas y ubicaciones. Muchas veces pierden tiempo localizando estos documentos y ejecutando fórmulas para obtener los datos que necesitan. + +Para poder optimizar su tiempo, las TMs han solicitado que construyamos una herramienta web donde puedan ver estos datos fácil y rápidamente. Y nos comentaron que estos son los datos que revisan normalmente: + +El total de estudiantes presentes por sede y generación. +El porcentaje de deserción de estudiantes. +La cantidad de estudiantes que superan la meta de puntos en promedio de todos los sprints cursados. La meta de puntos es 70% del total de puntos en HSE y en tech. +El porcentaje que representa el dato anterior en relación al total de estudiantes. +El Net Promoter Score (NPS) promedio de los sprints cursados. El NPS se calcula en base a la encuesta que las estudiantes responden al respecto de la recomendación que darían de Laboratoria, bajo la siguiente fórmula: +```bash +[Promoters] = [Respuestas 9 o 10] / [Total respuestas] * 100 +[Passive] = [Respuestas 7 u 8] / [Total respuestas] * 100 +[Detractors] = [Respuestas entre 1 y 6] / [Total respuestas] * 100 +[NPS] = [Promoters] - [Detractors] + ``` +La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos técnicos en promedio y por sprint. +La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos de HSE en promedio y por sprint. +El porcentaje de estudiantes satisfechas con la experiencia de Laboratoria. +La puntuación promedio de l@s profesores. +La puntuación promedio de l@s jedi masters. +Con esa información y con la base de datos que nos facilitaron pudimos crear este diseño. Sin embargo, creemos que tú podrías proponer algún cambio a este diseño que pueda mejorar la experiencia de las TMs. + +#### ¿Qué se requiere? + +Trabajar en parejas +Tener una planificación +La definición del diseño +Implementación del data dashboard usando html, css y js +Desplegar el producto en Github Pages + +## Resultado: +![](assets/images/dashboard.png) diff --git a/assets/icons/icomoon/fonts/icomoon.eot b/assets/icons/icomoon/fonts/icomoon.eot new file mode 100644 index 00000000..ee034eb2 Binary files /dev/null and b/assets/icons/icomoon/fonts/icomoon.eot differ diff --git a/assets/icons/icomoon/fonts/icomoon.svg b/assets/icons/icomoon/fonts/icomoon.svg new file mode 100644 index 00000000..b080ecf6 --- /dev/null +++ b/assets/icons/icomoon/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/icomoon/fonts/icomoon.ttf b/assets/icons/icomoon/fonts/icomoon.ttf new file mode 100644 index 00000000..300d02f3 Binary files /dev/null and b/assets/icons/icomoon/fonts/icomoon.ttf differ diff --git a/assets/icons/icomoon/fonts/icomoon.woff b/assets/icons/icomoon/fonts/icomoon.woff new file mode 100644 index 00000000..dd17abab Binary files /dev/null and b/assets/icons/icomoon/fonts/icomoon.woff differ diff --git a/assets/icons/icomoon/style.css b/assets/icons/icomoon/style.css new file mode 100644 index 00000000..2f74bf11 --- /dev/null +++ b/assets/icons/icomoon/style.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?jyiamj'); + src: url('fonts/icomoon.eot?jyiamj#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?jyiamj') format('truetype'), + url('fonts/icomoon.woff?jyiamj') format('woff'), + url('fonts/icomoon.svg?jyiamj#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-triangle-right:before { + content: "\e902"; +} +.icon-search:before { + content: "\e986"; +} +.icon-triangle-down:before { + content: "\e901"; +} +.icon-square:before { + content: "\e900"; +} diff --git a/assets/images/ale.png b/assets/images/ale.png new file mode 100644 index 00000000..64ab5b69 Binary files /dev/null and b/assets/images/ale.png differ diff --git a/assets/images/coder.png b/assets/images/coder.png new file mode 100644 index 00000000..0db9be90 Binary files /dev/null and b/assets/images/coder.png differ diff --git a/assets/images/dashboard.png b/assets/images/dashboard.png new file mode 100644 index 00000000..db29e04c Binary files /dev/null and b/assets/images/dashboard.png differ diff --git a/assets/images/icon-document.png b/assets/images/icon-document.png new file mode 100644 index 00000000..97b31547 Binary files /dev/null and b/assets/images/icon-document.png differ diff --git a/assets/images/nothing.png b/assets/images/nothing.png new file mode 100644 index 00000000..c1d16ba4 Binary files /dev/null and b/assets/images/nothing.png differ diff --git a/assets/images/woman.jpg b/assets/images/woman.jpg new file mode 100644 index 00000000..954e01ce Binary files /dev/null and b/assets/images/woman.jpg differ diff --git a/css/main.css b/css/main.css index 6355c827..befd9483 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,395 @@ /* * Estilos de tu proyecto */ + *{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Montserrat'; +} +header{ + width: auto; + border-width: 0; + border-top-width: 0px; + border-bottom-width: 0px; + height: 89px; +} +nav{ + width: 100%;; + margin: 0 auto; + position: relative; + height: 100%; +} +.logo{ + + width: auto; + margin: 0 auto; + height: 89px; +} +.a-logo img{ + width: 100%; + height: 100%; +} +.bar-lab{ + padding: 8px 20px 10px 0; + z-index: 101; + /* border: 2px solid #f7b617; */ + position: absolute; + right: 0; + top:25%; + text-align: center; + +} +.bar-lab a{ + color:#333333; + text-align: center; +} +.bar{ + background-color: #e1e1e1; +} +section{ + width: 100%; + margin: auto; + background-color: #F7F7F7; +} +section .higher{ + width: 80%; + /*outline: 1px solid orange;*/ + position: relative; + left: 50%; + transform: translateX(-50%); + padding-top: 20px; + +} +.slc-transp { + background-color: transparent; + height: 30px; +} +.btn-higher{ + background-color: transparent; + border-radius: 5px; + border:1px solid #3333; + height: 30px; + cursor: pointer; + padding-left: 10px; + padding-right: 10px; +} +section .principal{ + width: 80%; + /*outline: 1px solid orange;*/ + position: relative; + left: 50%; + transform: translateX(-50%); + + +} +/*PRIMER DIV DEL SECTION BAR-CONTAINER*/ +.principal:nth-child(1){ + padding: 20px; + outline: 1px solid orange; +} +.principal .lista{ + /*outline: 1px solid red;*/ +} +/*SEGUNDO DIV DEL SECTION BAR-CONTAINER*/ +.lista li{ + /*outline: 1PX solid aqua;*/ + display: inline-block; + padding: 10px; + margin-left: 10px; + list-style: none; +} +.lista li a{ + display: block; + text-transform: uppercase; + font-weight: 800; + font-size: 1em; + color: black; + text-decoration: none; +} +.lista li:hover{ + border-bottom: 5px solid #EFB415; +} + +/*Estilos para la seccion overview*/ +.overview-one,.overview-two,.overview-three,.overview-for{ + padding-bottom: 10px; + padding-top: 10px; + padding-left: 50px; + padding-right: 50px; +} +.container .title-overview{ + background-color: white; + /* display: inline-block;*/ + padding-bottom: 10px; + padding-top: 10px; + padding-left: 10px; + padding-right: 10px; + font-weight: bold; + font-size: 20px; +} +.data-overview{ + background-color: white; + /* border: 2px solid red; */ + display: inline-block; +} +.description{ + background-color: #e1e1e1; + display: block; + font-size: 10px; + text-align: center; + +} +.data-style { + font-weight: bold; + font-size: 24px; +} +.display-inline-block{ + display: inline-block; +} +.c-plomo{ + background-color: #e1e1e1; + +} +.text-align-center{ + text-align: center; + border-radius: 5px; +} +.display-none{ + display: none; +} +.show { + display: block; +} +/*students and teachers section styles*/ +a { + text-decoration: none; +} +.icon-square { + color: #ffc107; + display: inline-block; + font-size: 20px; +} +.skills-menu { + display: inline-block; + margin-left: 10px; +} +.topic { + padding: 6px; + margin: 4px 5px; +} +.dropdown { + margin-left: 95px; + + margin-top: 30px; + background-color: #fff; + outline: 1px purple solid; + cursor: pointer; + z-index: 50; +} +.space { + padding-left: 20px; +padding-right: 15px; +} +.hide { + display: none; +} + +.dropbtn { + width: auto; + font-size: 30px; + outline: 1px solid red; + background-color: #e1e1e1; + z-index: 50; +} +.option-menu { + display: inline-block; +} +.laboratoria-place { + border-bottom: 2px solid #ffc107; + width: 180px; + outline: 1px solid green; +} +.block { + display: block; +} +.place { + border-bottom: 2px solid #ffc107; + margin-bottom: 18px; + padding-bottom: 10px; + margin-top: 20px; +} +.generation { + margin-left: 6px; +} +.specialization { + background-color: #fff; + display: inline-block; + padding: 20px 180px 20px 20px; + margin: 40px; + position: absolute; +} +.profile { + + display: inline-block; + margin: 40px 20px 20px 480px; + padding: 20px; + height: auto; +} +.icon-search { + background-color: #fff; + outline: none; + border-radius: 5px; + border: none; + font-size: 20px; + color: grey; + padding: 8px; +} +.profile-input { + background-color: #fff; + outline: none; + border-radius: 5px; + border: none; + width: 700px; + height: 30px; + font-size: 20px; + color: grey; +} +.profile-form { + background-color: #fff; + outline: none; + border-radius: 5px; + border: none; + height: 33px; +} +.student-profile { + padding-top: 30px; + +} +.photo { + position: absolute; +} +.photo-profile { + width: 180px; + height: 180px; + display: inline-block; +} +.lab-student { + background-color: #fff; + padding: 20px; + height: 220px; +} +.content-profile, .content-number, .photo { + display: inline-block; +} +.content-number { + position: absolute; + padding: 6px 6px 6px 25px; + height: auto; + /*outline: 1px solid blue;*/ +} +.content-profile { + margin-left: 190px; +} +.skills-menu { + text-transform: capitalize; +} +.tech-skills, .life-skills, .english-skills { + display: inline-block; + background-color: #e1e1e1; + padding: 6px; + margin: 3px; + position: relative; + text-align: center; +} +.career { + margin-bottom: 50px; + text-transform: capitalize; +} +.specialization-title { + text-transform: uppercase; +} +.skills { + background-color: #f1f1f1; + display: inline-block; + margin: 5px; + font-size: 14px; + text-transform: capitalize; + padding: 4px; +} +.name { + text-transform: uppercase; +} +.icon-triangle-right { + margin-left: 8px; +} +.skills-points { + font-size: 8px; + text-transform: uppercase; +} +.description { + font-size: 13px; + font-weight: 600; + text-transform: uppercase; +} +.topic { + cursor: pointer; +} +.go { + margin-top: 115px; + margin-left: 130px; + +} +.background-color { + background-color: #ffc107; + border-radius: 5px; +} +#teachers-section { + text-align: center; +} +/*menu hamburguesa*/ + +.user-config { + color: #fff; + opacity: 0.9; + cursor: pointer; + border-bottom: 1px solid #6f7072; + +} +.user-photo { + width: 80px; + height: 80px; + display: inline-block; + margin: 12px 15px; +} +.name-manager { + display: inline-block; + padding: 30px 10px; + position: absolute; + text-transform: uppercase; + font-weight: 600; + font-size: 20px; + cursor: pointer; +} +#user-c { + width: 350px; + background-color: #333; + right: 0; + cursor: pointer; + position: absolute; + z-index: 1000; + float: right; +} +.config { + padding: 15px; + text-transform: capitalize; +} +.config:hover { + color: #ffc107; +} +#empty-menu { + padding: 150px 70px; +} +header { + position: relative; +} diff --git a/index.html b/index.html index 8930fa03..84fc43c9 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,223 @@ Data Dashboard + + + + - +
+ + +
+
+
+
+ + + +
+
+
+ +
+
+ + + - + + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 895ae2dd..4588b773 100644 --- a/js/app.js +++ b/js/app.js @@ -3,4 +3,305 @@ */ // Puedes hacer uso de la base de datos a través de la variable `data` -console.log(data); +// console.log(data); +window.addEventListener('load', function() { + var sede = ''; + var generacion = ''; + var places = document.getElementById('place'); + var generations = document.getElementById('generation'); + var sectionMain= document.getElementById('container-main'); + places.addEventListener('change', function(event) { + var listGenerations = {AQP: ['2016-2', '2017-1'], + CDMX: ['2017-1', ' 2017-2 '], + LIM: ['2016-2', '2017-1', '2017-2'], + SCL: ['2016-2', '2017-1', '2017-2']}; + + var placeSelect = places.value; + sede = placeSelect; + // Limpiamos el select generation + generations.innerHTML = ''; + if (placeSelect !== '') { + // Seleccionamos Sede y se ordena + placeSelect = listGenerations[placeSelect]; + placeSelect.sort(); + placeSelect.forEach(function(generation) { + var opt = document.createElement('option'); + opt.value = generation; + opt.text = generation; + generations.add(opt); + }); + } + // fin de 1er lista + generations.addEventListener('change', function() { + generacion = generations.value; + }); + }); + /* Fin de los Selects */ + // obteniendo el elemento button por medio del metodo getElementId + + /*realizamos el tab*/ +var overview = document.getElementById('overview'); +var students = document.getElementById('students'); +var teachers = document.getElementById('teachers'); + +function showOverview(event) { + var containerMain = document.getElementById('container-main'); + var studentsSection = document.getElementById('students-section'); + var teachersSection = document.getElementById('teachers-section'); + if(containerMain.classList.contains('display-none')){ + containerMain.setAttribute('class', 'container show'); + studentsSection.setAttribute('class', 'display-none'); + teachersSection.setAttribute('class', 'display-none'); + } +} + +function showStudents(event) { + var containerMain = document.getElementById('container-main'); + var studentsSection = document.getElementById('students-section'); + var teachersSection = document.getElementById('teachers-section'); + if(studentsSection.classList.contains('display-none')){ + studentsSection.setAttribute('class', 'container show'); + containerMain.setAttribute('class', 'display-none'); + teachersSection.setAttribute('class', 'display-none'); + } +} + +function showTeachers(event) { + var containerMain = document.getElementById('container-main'); + var studentsSection = document.getElementById('students-section'); + var teachersSection = document.getElementById('teachers-section'); + if(teachersSection.classList.contains('display-none')){ + teachersSection.setAttribute('class', 'container show'); + studentsSection.setAttribute('class', 'display-none'); + containerMain.setAttribute('class', 'display-none'); + } +} + + var btndash = document.getElementById('btndash'); + btndash.addEventListener('click', function() { + + overview.addEventListener('click', showOverview); + students.addEventListener('click', showStudents); + teachers.addEventListener('click', showTeachers); + + // aplicando clase a la seccion principal + sectionMain.classList.remove('display-none'); + sectionMain.classList.add('display-inline-block'); + /* Enrollment Static*/ + enrollment(sede, generacion); + achievement(sede, generacion); + /* Promedio de puntuacion Teacher */ + ratingTeachers(sede, generacion); + ratingJedi(sede, generacion); + studentSatisfation(sede, generacion); + achievement(sede, generacion); + nps(sede, generacion); + techSkills(sede, generacion); + hseSkills(sede, generacion); + }); +}); +/* Funciones */ +function enrollment(sede, generacion) { + var quantity = data[sede][generacion].students.length; + var acum = 0; + var acumtrue = 0; + for (var i = 0; i < quantity;i++) { + if (data[sede][generacion].students[i].active == false) { + acum++; + } else { + acumtrue++; + } + } + var dropout = (acum / quantity) * 100; + var dropoutPercentaje = (Math.round(dropout) + '%'); + // inserta data de cantidad a los elementos + var spanCount = document.getElementById('count-overview'); + spanCount.textContent = quantity; + // inserta data de desercion a los elementos + var spanPercentaje = document.getElementById('percentaje-overview'); + spanPercentaje.textContent = dropoutPercentaje; + +} +// Funcion que obtiene el promedio de la puntuacion de los teachers +function ratingTeachers(sede, generacion) { + var ratingTeacher = 0; + var countRatingT = data[sede][generacion].ratings.length; + for (var i = 0;i < data[sede][generacion].ratings.length;i++) { + ratingTeacher += data[sede][generacion].ratings[i].teacher; + } + var averageTeacher = (ratingTeacher / countRatingT).toFixed(1); + // inserta data a los elementos + var spanRatingT = document.getElementById('t-rating-overview'); + spanRatingT.textContent = averageTeacher; + +} +// Funcion que obtiene el promedio de la puntuacion de los jedis +function ratingJedi(sede, generacion) { + var ratingJedi = 0; + var countRatingJ = data[sede][generacion].ratings.length; + // Recorremos el array ratings + for (var j = 0;j < data[sede][generacion].ratings.length;j++) { + // Acumula los puntajes de los jedis + ratingJedi += data[sede][generacion].ratings[j].jedi; + } + // Declaro variable que almacene el promedio y con función toFixed() poder limitar el número de decimales a través de su parámetr + var averageJedi = (ratingJedi / countRatingJ).toFixed(1); + // inserta data a los elementos + var spanRatingJ = document.getElementById('j-rating-overview'); + spanRatingJ.textContent = averageJedi; + +} +function studentSatisfation(sede, generacion) { + var count = data[sede][generacion].ratings.length; + var sum = 0; + for (var i = 0;i < data[sede][generacion].ratings.length;i++) { + // Acumula los puntajes de los jedis + sum += data[sede][generacion].ratings[i].nps.promoters; + } + + var satisfationPercentaje = (sum / count).toFixed(0); + // inserta data a los elementos + var spanNpsS = document.getElementById('s-nps-overview'); + spanNpsS.textContent = satisfationPercentaje ; +} +function achievement(sede, generacion) { + var quantityStudents = data[sede][generacion].students.length; + var countAim = 0; + for (var i = 0; i < quantityStudents;i++) { + var quantitySprints = data[sede][generacion].students[i].sprints.length; + for (var j = 0; j < quantitySprints; j++) { + if ((data[sede][generacion].students[i].sprints[j].score.tech > 1260) && (data[sede][generacion].students[i].sprints[j].score.hse > 840)) { + countAim++; + } + } + } + var averageAim = (countAim * 100) / quantityStudents; + // inserta data a los elementos + var spanAim = document.getElementById('achi-overview'); + spanAim.textContent = countAim; + var spanPercAim = document.getElementById('achi-percentaje-overview'); + spanPercAim.textContent = averageAim.toFixed(0); +} +function nps(sede, generacion) { + var countRatings = data[sede][generacion].ratings.length; + var accumulatorNPS = 0; + var accumulatorPro = 0; + var accumulatorDet = 0; + var accumulatorPas = 0; + for (var i = 0; i < countRatings;i++) { + accumulatorPro += data[sede][generacion].ratings[i].nps.promoters; + accumulatorPas += data[sede][generacion].ratings[i].nps.passive; + accumulatorDet += data[sede][generacion].ratings[i].nps.detractors; + accumulatorNPS += data[sede][generacion].ratings[i].nps.promoters - data[sede][generacion].ratings[i].nps.detractors; + } + var averagePro = (accumulatorPro / countRatings).toFixed(0); + var averagePas = (accumulatorPas / countRatings).toFixed(0); + var averageDet = (accumulatorDet / countRatings).toFixed(0); + var averageNPS = (accumulatorNPS / countRatings).toFixed(0) + '%'; + // inserta data a los elementos + var spanNPS = document.getElementById('nps-overview'); + spanNPS.textContent = averageNPS; + var spanNPSPr = document.getElementById('npsp-overview'); + spanNPSPr.textContent = averagePro + '% Promoters'; + var spanNPSPa = document.getElementById('npspa-overview'); + spanNPSPa.textContent = averagePas + '% Passive'; + var spanNPSDe = document.getElementById('npsde-overview'); + spanNPSDe.textContent = accumulatorDet + '% Detractors'; +} +function techSkills(sede, generacion) { + var accumulatorTechS = 0; + var quantityStu = data[sede][generacion].students.length; + + for (var i = 0; i < data[sede][generacion].students.length;i++) { + var countSprints = data[sede][generacion].students[i].sprints.length; + for (var j = 0; j < countSprints;j++) { + if (data[sede][generacion].students[i].sprints[j].score.tech > 1260) { + accumulatorTechS++; + } + } + } + var percentaje = ((accumulatorTechS * 100)/quantityStu).toFixed(0); + // insertamos los datos a los elementos html + var spanSkillT = document.getElementById('tskills-overview'); + spanSkillT.textContent = accumulatorTechS; + var spanSkillTPer = document.getElementById('ts-percentaje-overview'); + spanSkillTPer.textContent = percentaje; + var spanDescSkill = document.getElementById('ts-overview'); + spanDescSkill.textContent = '% OF TOTAL (' + quantityStu + ')'; +} +function hseSkills(sede, generacion) { + var accumulatorHseS = 0; + var quantityStu = data[sede][generacion].students.length; + + for (var i = 0; i < data[sede][generacion].students.length;i++) { + var countSprints = data[sede][generacion].students[i].sprints.length; + for (var j = 0; j < countSprints;j++) { + if (data[sede][generacion].students[i].sprints[j].score.hse > 840) { + accumulatorHseS++; + } + } + } + var percentaje = ((accumulatorHseS * 100) / quantityStu).toFixed(0); + // insertamos los datos a los elementos html + var spanSkillH = document.getElementById('hse-skills-overview'); + spanSkillH.textContent = accumulatorHseS; + var spanSkillHPer = document.getElementById('hse-percentaje-overview'); + spanSkillHPer.textContent = percentaje; + var spanDescSkill = document.getElementById('hse-overview'); + spanDescSkill.textContent = '% OF TOTAL (' + quantityStu + ')'; +} + +/* styles change-icon-square*/ + +var specialization_1 = document.getElementById("topic-1"); +var squareMarked_1 = document.getElementById("square-1"); +var specialization_2 = document.getElementById("topic-2"); +var squareMarked_2 = document.getElementById("square-2"); +var specialization_3 = document.getElementById("topic-3"); +var squareMarked_3 = document.getElementById("square-3"); + + +specialization_1.addEventListener("click", function(event) { + squareMarked_1.setAttribute("class", "icon-square background-color"); + squareMarked_2.setAttribute("class", "icon-square"); + squareMarked_3.setAttribute("class", "icon-square"); +}) + + +specialization_2.addEventListener("click", function(event) { + squareMarked_2.setAttribute("class", "icon-square background-color"); + squareMarked_1.setAttribute("class", "icon-square"); + squareMarked_3.setAttribute("class", "icon-square"); +}) + + + +specialization_3.addEventListener("click", function(event) { + squareMarked_3.setAttribute("class", "icon-square background-color"); + squareMarked_1.setAttribute("class", "icon-square"); + squareMarked_2.setAttribute("class", "icon-square"); +}) +/*menu hamburguesa*/ + +var menuBurguer= document.getElementById('menu-burguer'); +function showSMenu(event) { + var userC = document.getElementById('user-c'); + if(userC.className='nav-div display-none'){ + userC.setAttribute('class','nav-div show'); + } +} + +var userConfig = document.getElementsByClassName("user-config"); + +function hideMenu(event) { + var userC = document.getElementById('user-c'); + if(userC.className='nav-div show'){ + userC.setAttribute('class','nav-div display-none'); + } +} + +for(var x=0; x