Fusión del menú en desktop

Like si te habías dado cuenta primero del error que estaba pasando…Muy buena clase

Rubén Ernesto Aragón Gil

Solo agregué un hover al poner el puntero en el email:

Gabriel Rodríguez Sánchez

Un grande, con este bro si se entienden las cosas y no se te hace nada tedioso, por el contrario, su carisma se comparte y te da una mejor experiencia a la hora de aprender.
Cabe resaltar que quisiera ver más cursos como este, que vayan más enfocados a una buena práctica, algo así como Código con Juan, sería una locura

Julian David Molina Vargas

Tip

Para no tener que escribir siempre (document.querySelector) podemos usar esta simplificación con una arrow function

const $ = (selector) => document.querySelector(selector);

const menuEmail = $('.navbar-email');
const desktopMenu = $('.desktop-menu');

Francisco Narbona

Un pequeño tip de CSS con JS. Si la clase .inactive que hemos creado, en vez del display, ya que con top y right hemos indicado dónde queremos que se posicione nuestro menú, le añadimos opacity: 0. Y a la clase .desktop-menu le agregamos la propiedad transition: 4.s (acá pueden agregar el valor que más les guste), obtendremos una interacción más personalizada. Ya que así podemos jugar con la forma de aparecer y desaparecer que va a tener nuestro menú. Ah y algo que puede quedar bien también es jugar con los border-radius. Podemos agregarle el border-radius sólo a la parte inferior del menú y quitárselo a la parte de arriba para que coincida con el navbar. Como aporte final, podríamos añadirle una pequeña sombra al menú. De esta forma personalizamos aún más la interacción que acabamos de crear con CSS y JS para nuestro menú. Acá les dejo el código:

.inactive {
    opacity: 0;
}

.desktop-menu {
    position: absolute;
    top: 60px;
    right: 60px;
    width: 100px;
    height: auto;
    border: 1px solid var(--very-light-pink);
    border-radius: 6px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 20px 20px 0 20px;
    background-color: var(--white);
    transition: .4s;
    box-shadow: 5px 5px 10px var(--very-light-pink);
}

Y acá la imagen para que vean el menú con los border-radius modificados. Prueben con el Opacity y transition para modificar el compartamiento de cómo aparece y desaparece el menú.

Captura de Pantalla 2022-08-07 a las 18.34.21.png

Espero que les sirva 💃🏽

Josue CT

Una forma “más avanzada” de realizar el evento es colocando una función flecha directamente. Así:

const menuDesktop = document.querySelector('.inactive')
const navEmail = document.querySelector('.navbar-email');

navEmail.addEventListener('click', () => {
    menuDesktop.classList.toggle('inactive');
});

Diego Vanegas

momentos antes de descubrir el error:

Despues de haberlo solucionado:

Fui capaz de saberlo antes de seguir viendo la clase y dije lo mismo que juandc “Que verguenza de error” 😂😂😂

Jonathan Jesús Martínez Rodríguez

Me ha encantado esta clase al igual que todas las del curso. Igualmente le agregué una propiedad de css a la clase del navbar-email para que no pudiera seleccionarse el texto al momento de dar clic sobre el correo, ya que es bastante molesto a la hora de mostrar el menú. Les dejo la propiedad por si quieren implementarlo en sus proyectos:

user-select: none;

Xiomara Arzola

Además del cursos:pointer le agregué un :hover para que cambie el color del texto y se ve re bonito :3

Hacer vivir a una página me hace re feli :3

Luis Felipe Granada Patiño

Esta fue mi solucion antes de que Juan mostrara la manera en que funciona ‘Toggle’:

Captura de Pantalla 2022-09-13 a la(s) 8.52.07 p.m..png

Luis Magallanes

espero no ser el unico hablando solo diciendome… “eu vos te olvidaste de linkear el archivo js”

uriel66

Quien dijo miedo. Aqui empieza lo bueno, si lo digo yo a mis 56 años, no se desanimen los demás.

Juan Pablo Ospina Restrepo

Ya que vi que el profe utilizo un atajo de teclado para copiar una de las líneas me puse a investigar un poco y encontré este repositorio Atajos globales y personalizados de vscode, el cual me parece interesante y útil para que podamos agilizar un poco a la hora de trabajar con nuestro código.

Sharon Guiselle Corpas Avendaño

Que emocionada me tiene este curso, en especial esta claseee.
me encanta todo lo que estoy aprendiendo

JUAN CAMILO CAMPO TANGARIFE

Si se dan cuenta, al momento de darle muchos clicks al toggle, o al botón email, se selecciona nuestro texto. para evitar que esto pase y se comporte como un buen botón se le aplica esta propiedad:

#emailLink{
    cursor: pointer;
    user-select: none;
}

Jesus Aldana

El profe al ver el error

Anderson Eduardo Arévalo Ramírez

jajajaja el Juan hace las clases muy severas jejeje nice

Cristian Rodríguez Barba

Juan literalmente tu actittud de profesor me pareció muy peculiar, pero déjame felicitarte porque a lo largo del curso me has divertido pero sobretodo me has aportado mucho en el desarrollo, continúa así

Jhonatan Estiven Becerra Pedrozo

Toggle es la evolución de classList.add y classList.remove 🤣

Antonio Mora

Agregue el componente de una forma diferente. El menú se muestra al colocar el ratón sobre el correo electrónico y utilicé las propiedades de CSS

visibility

transition-delay

Captura de pantalla de 2022-07-28 20-06-45.png

Este es mi código JavaScript utilizado

milton coronado

me quedo con esa frase “dioses del internet” jajaaaaaaa

PD: aprendiendo con platzi ya he llevado cursos similares y ahora retomando lo que ya aprendi lo comprendo mejor…
fredy por fa regalame un polo del granada que platzi auspicia jejjeej

Emerson David Cabrera Salas

Me está gustando mucho este curso!

Julián David Reales de la Ossa

Yo: pauso el video cuando el dice que lo haga para intentar hacerlo por mi cuenta. Investigo en google por unos minutos y ensayo. Aprendo a usar un nuevo método solo para solucionar el problema. Este es mi resultado:

function toggleDesktopMenu() {
    if (desktopMenu.classList.contains('inactive')) {
        desktopMenu.classList.remove('inactive');
    } else {
        desktopMenu.classList.add('inactive');
    }
}

…el resultado, un exito.

El profesor demostrando su poder escribiendo una sola linea de código:

desktopMenu.classList.toggle('inactive');

Link del recurso

Diego Twaska

Una implementación que agregué en la clase “navbar-email” fué un

user-select: none;

porque al clickear rápido en el email, me seleccionaba parte de él, debido a que es texto
y eso me resultaba muy molesto.

Angel Garcia

Hago mi aporte con algunas modificaciones al css y al JS para el elemento a mostrar

//Menu
.desktop-menu {
  position: absolute;
  top: 60px;
  right: 60px;
  width: 150px;
  height: 0;
  overflow: hidden;
  box-shadow: 3px 4px 10px rgba(0 0 0 / .5);
  border-radius: 6px;
  cursor: pointer;
  transition: all .4s ease-in-out;
}

/*Clase para mostrar*/
.active {
  height: auto;
  transform: translateY(5%);
}

.desktop-menu ul {
  list-style: none;
/*Le ponemos el padding del contenedor mejor al ul */
  padding: 20px 20px 0;
  margin: 0;
}

El JS queda mas compacto con un arrow function

const navMail = document.querySelector(".navbar-email");
const menu = document.querySelector(".desktop-menu");

navMail.addEventListener("click", () => {
  menu.classList.toggle("active");
});

Samuel Morales Jerez

Vengo desde el futuro para decirles que amé lo de la clase inactive, en el curso de consumo de API REST

Ines Valeria Foglino

hace 5 meses

Les recuerdo cómo actualizar el repositorio github o más bien cómo añadir nuestros cambios al repositorio:

-Ingresan a su carpeta curso-frontend-developer…
-Revisan que los 3 nuevos archivos estén allí con “ls”
-git add -A( con A(all) se aseguran que se guarden todos los archivos.

git commit -m “mensaje de mi commit”
git push
Y listo!! recargan página de GitHub y allí verán añadidos los tres nuevos archivos: index.html, styles.css y main.js

OAranda

Pequeña ayuda para VSCode
Mover linea - Alt + ↑ / ↓
Copiar linea - Shift + Alt + ↑ / ↓
Seleccionar todas las apariciones - Ctrl + Shift + L.
Crear múltiples cursores - Ctrl + Alt+ ↑ / ↓
Selección multiple - Alt + Click.
Mover bloque - Seleccionar . Alt + ↑ / ↓
Copiar bloque - Seleccionar . …
Comentar linea - Ctrl + \ || esp(Ctrl + ç)

Orlando Rodriguez

Empecé a darle js a mi proyecto YardSale. Que hermoso ver esto :’)

Juan Esteban Sierra Agudelo

Yo había realizado este ejercicio de esta manera:

let menuCambiado = "mostrado";
let menu = document.getElementById('desktop-menu');

function mostrarMenu() {
    
    if(menuCambiado == "mostrado") {
        menu.style.display = 'block';
        menuCambiado = "noMostrado";
    }
    else {
        menu.style.display = 'none';
        menuCambiado = "mostrado";
    } 
}

Pero la verdad que esta buenísimo el evento .toggle

Raúl Adolfo Sánchez Rodríguez

Elaboración de la función que permita mediante el evento click, aparecer y desaparecer el MENÚ DESKTOP

_

_

_

_

_

Carlos Augusto Rodríguez Miranda

Pude resolver el reto de esta clase, se que es un poco mas larga, ahora que conozco la propiedad toogle. Aun así quiero compartir mi solución

Gustavo Gonzalez Montero

Yo en lugar de agregar el cursor: pointer; a la clase de <navbar-email>, se lo agregaría a los elementos <li> que estén dentro de <nav>

nav li {
  cursor: pointer;
}

Así de una sola vez todos los elementos del menú ya tendrían el puntero correcto

Esteban Chica

Toda mi admiración para el profe, disfrutar lo que hace contagia a quienes aprendemos.

Stefano Zevallos

❤️

Ricardo Alfonso Chavez Vilcapoma

PD: No vi el error del prof 😦

Ricardo Alfonso Chavez Vilcapoma

Eta fue mi solución antes de ver la del prof…me siento orgulloso porque recorde lo aprendido en clases anteriores 😃. Por cierto…por cada clase me demoro como 1 hora masomenos entre apuntar en mi cuadernito y practicar antes de ver la solución del prof y leyendo los aportes de los compañeros…demora pero sirve para recordar todo

Eric Aguirrez Andraca

hace 5 meses

Les dejo como lo hice, le agregue una pequeña animacion. Les dejo el codigo tanto de Js como de CSS con la animacion.

Rolando Maycol Rodriguez Mallqui

import './style.css'

const email = document.querySelector<HTMLLIElement>(".navbar-email");
email?.addEventListener('click', showHideMenu);

function showHideMenu() {
  const menu = document.querySelector<HTMLDivElement>(".desktop-menu");
  menu?.classList.toggle('inactive')
}

Delany Lopez

hace 5 meses

Asi pense en resolverlo y funciono, usare los if y else necesario para salvar esta compañia

function toggleDesktopMenu() {
    if (desktopMenu.style.display == 'block') {
        desktopMenu.style.display = 'none'
    }
    else {
        desktopMenu.style.display = 'block'
    }

}

Samuel Alvarez

hace 4 meses

Así lo hice yo, me tocó investigar el .inlcudes, el .remove y el .add, pero al final me dió:

function toggleDesktopMenu() {
    let checkView = desktopMenu.classList;
    let strCheckView = desktopMenu.classList.value;
    if (strCheckView.includes('inactive')) {
        var toggle = checkView.remove('inactive');
        console.log(strCheckView.includes('inactive'));
    }else if (strCheckView.includes('inactive') == false)  {
        toggle = checkView.add('inactive');
        console.log(strCheckView.includes('inactive'));
    }
}

Mariano Gobea Alcoba

Yo encontré una solución alternativa para mostrar y dejar de mostrar el menú que consiste en.
Cuando hago click en el navEmail aparezca el menú. Y luego al hacer click en el cualquier otra sección de la web que no sea el nav bar, la misma desaparece. Para ello primero generé una nueva <div> abajo del menú a la que le dí el id de vacio. A esa sección le dí 100vh luego de agrandar el body al 100% de la pantalla. y finalmente sume este codigo en JavaScript:

const navEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const vacio = document.getElementById('vacio');

navEmail.addEventListener('click', mostrarMenu)
vacio.addEventListener('click', noMostrarMenu)

function mostrarMenu() {
    desktopMenu.style.display = 'block';
}

function noMostrarMenu() {
    desktopMenu.style.display = 'none'
}

Se agradece feedback.

Katherin Guerrero

function toggleDesktopMenu(){
  if (desktopMenu.classList.contains('inactive')){
    desktopMenu.classList.remove('inactive')
  }
  else {
    desktopMenu.classList.add('inactive')
  }
}

function toggleDesktopMenu(){
  desktopMenu.classList.contains('inactive') ? desktopMenu.classList.remove('inactive') :  desktopMenu.classList.add('inactive')
}

function toggleDesktopMenu(){
  desktopMenu.classList.toggle('inactive')
}

Ultisaer Revternae

Tuve el mismo error
min 21:02
en ese min se ve el corte y es chistoso me tuvo un rato tratando de ver que pasaba, que si se estaban llamando bien los elementos y asi XD

Ultisaer Revternae

Si quieres hacer este grandioso efecto te invito a que leas este Tutorial…

Transiciones condicionadas //JS CSS//

Cesar Sosa

Y también se puede agregar un archivo README para la descripción del ejercicio realizado.

willy jaramillo

hace 4 meses

yo le coloque un :hover con propiedades de width 200px y use el hospitalgreen para darle mas vida al email

Cesar Sosa

Al ojo 👀 de perfect pixer designer jajaja… me da 59.9px a la propiedad Top 🤣…

Interesantes toda las propiedad del Cursor: ocupe la no-drop ❌

Vicki Norma Ramírez Fraga

hace 4 meses

Yo no sabía que toggle existía, así que se me ocurrió esto:

let contadorDesktopMenu = 0;
function toggleProfileDesktopMenu(){
    if (contadorDesktopMenu == 0) {
        desktopMenu.classList.remove('inactive');
        contadorDesktopMenu = 1;
    }
    else {
        desktopMenu.classList.add('inactive');
        contadorDesktopMenu = 0
    }
}

Sí funcionó pero definitivamente mucho menos elegante.

Abelino Suarez

la propiedad .classList se usa para manipular las clases del html , esta propiedad tiene diferentes métodos para usar algunas son:

.classList.length // nos da la cantidad de clases que tiene un elemento html.
.classList.item(#) // da la clase de la posición dada en el #
.classList.add( a,b,c, …) // agrega las clases a,b,c …
.classList.remove(a,b,c,…) // quita las clases a,b,c,…
.classList.toggle(‘clase’) // si esta la quita si no esta la coloca
.classList.replace(clas1,clas2) //remplaza la clas1 por la clas2

Hector Alejandro Ramirez Huertas

Juan Esteban Valdés Ospina

La funcion la hice algo diferente pero igual funciona 😄

function toggleDesktopMenu(){
 if (desktopMenu.className == 'desktop-menu inactive'){
    desktopMenu.className = 'desktop-menu'; 
 }
 else if (desktopMenu.className == 'desktop-menu'){
    desktopMenu.className = 'desktop-menu inactive';
 }

Miguel Silva

yo desarrolle la lógica de esta manera!. no conocía la función toggle, ahorra todo este código.

const email = document.querySelector(".navbar-email");
let menu = document.querySelector(".desktop-menu");
console.log(menu);

email.addEventListener(“click”, function(){
console.log(“click”);
if(menu.style.display == “none”){
menu.style.display = “block”;
}else{
menu.style.display = “none”;
}

});

Gualberto Montiel

Nada mejor que romper el codigo en vivo para aprender a debugear!

Ivan de jesus Romero leal

Esta fue mi solucion, un poco mas de codigo, pero es que no conocia esa funcion, esta permite abrir o cerrar por cada click.

const menuEmail = document.querySelector('.navbar-email')
const menuDesplegable = document.querySelector('.desktop-menu')
menuEmail.addEventListener('click', sacaElMenu)
let menuSwitcher = 0


function sacaElMenu(){
    if(menuSwitcher == 0){
        menuDesplegable.style.display = "block"
        menuSwitcher++
    }else if(menuSwitcher == 1){
        menuDesplegable.style.display = "none"
        menuSwitcher--
    }
    
}

JoaoGarduno

CSS:

:root {
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
  }
  body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
  }
  /* IN-ACTIVE */
  .inactive{
    display: none;
  }

  /* NAV */
  nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
  }
  .menu {
    display: none;
  }
  .logo {
    width: 100px;
  }
  .navbar-left ul,
  .navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
  }
  /* contenedores del nav */
  .navbar-left {
    display: flex;
    outline: 1px solid red;
  }
  .navbar-right{
    outline: 1px solid red;
    /* cursor: pointer; */
    padding: 5px;
    /* width: 100%; */
  }

  /*  */
  .navbar-left ul {
    margin-left: 12px;
  }
  .navbar-left ul li a,
  .navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
  }
  .navbar-left ul li a:hover,
  .navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
  }
  .navbar-email {
    cursor: pointer;
    color: var(--very-light-pink);
    font-size: var(--sm);
    margin-right: 12px;
  }
  .navbar-email:hover{
    background-color: var(--hospital-green);
    border-radius: 20px;
    color: var(--white);
    padding: 5px;

  }
  .navbar-shopping-cart {
    position: relative;
  }
  .navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* DESKTOP MENU */
  .desktop-menu {
    position: absolute;
    top: 60px;
    right: 60px;
    background-color: var(--white);
    width: 100px;
    height: auto;
    border: 1px solid var(--very-light-pink);
    border-radius: 6px;
    padding: 20px 20px 0 20px;
  }
  .desktop-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .desktop-menu ul li {
    text-align: end;
  }
  .desktop-menu ul li:nth-child(1),
  .desktop-menu ul li:nth-child(2) {
    font-weight: bold;
  }
  .desktop-menu ul li:last-child {
    padding-top: 20px;
    border-top: 1px solid var(--very-light-pink);
  }
  .desktop-menu ul li:last-child a {
    color: var(--hospital-green);
    font-size: var(--sm);
  }
  .desktop-menu ul li a {
    color: var(--back);
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
  }
  
  /* MEDIA QUERIES */
  @media (max-width: 640px) {
    .menu {
      display: block;
    }
    .navbar-left ul {
      display: none;
    }
    .navbar-email {
      display: none;
    }
  }

Dario Izurdiaga

Con .classList.add podemos agregar más de una clase de la siguiente forma:

[](
div.classList.add(“clase1”, “clase2”, “clase3”);
)

Pienso que puede server a la hora de agregar alguna clase extra que le sume una micro animación o interacción

Juan Pablo Vargas Ramirez

Me parece genial ver las medidas del nav para situar el menú y que quede súper exacto!!, aunque personalmente lo hice como enseñó la profe Estefany Aguilar, que básicamente es moviendo el menú desde las propiedades top y right en el inspector del navegador y cuando esté en una posición cómoda o donde lo quiera, copio y pego en mi archivo css

Jason Steven Méndez Balambá

el “juuusto lo que aprendimos en este curso, terrible, TERRIBLE, dioss meoo… ¡Qué vergüenza!” del profe fue un final inesperado jajaja

Roxidi Oronoz

tengo un pequeño error, comence el proyecto con mobile-first, entonces cuando despliego el menu-desktop en la vista de pc, me funciona perfecto, pero si lo dejo abierto y me cambio a la vista mobile, se mantiene ahi ![](

ya probe colocandole display: none en los estilos, pero al hacerlo, no se despliega el menu al hacer click en el email en la vista de pc

Fernando de Jesus Basurto Villegas

al estar probando el clic me di cuenta de que el email no cambia de color al pasar el cursor como en los otros elementos del navbar

si bien esto se puede solucionar con css yo hice el experimento a resolverlo desde js haciendo honor al curso respectivo

así me quedo mi solución

'use strict'

const navEmail=document.querySelector(".navbar-email");
const desktopMenu=document.querySelector(".desktop-menu");

navEmail.addEventListener("click",execute=>
{
    desktopMenu.classList.toggle("inactive")
});

navEmail.addEventListener("mouseover",exec=>{
    navEmail.style.color ="var(--HospitalGreen)"
});

navEmail.addEventListener("mouseout",exe=>{
    navEmail.style.color ="var(--veryLightPink)"  
});

kevin Antonio Quispe Arias

Reto completado del menu

gabriel gramajo

Le agregé dos pseudo clases: hover y active ☺💚💚

Hugo Gómez

Me salió así y luego vi que era más simple, de todos modos supongo que la función toggle de classList hace algo parecido a esto

function toggleDesktopMenu() {
  if (desktopMenu.classList.contains('inactive')){
    desktopMenu.classList.remove('inactive')
  } else {
    desktopMenu.classList.add('inactive')
  }
}

Alejandrina Pérez Lugo

Jejeje según yo quise meter en una condicional
dropdownMenu.classList.remove(“inactive”);
dropdownMenu.classList.add(“inactive”); pero no me salía, no sabía que existría una propiedad toogle jajajaj 😄 que buen aporte 😃

Chema Ferrández

min 21:50 merece la clase por como se emociona el profe. Like si paraste la clase y te reíste también.😂

un.vato.roto

Serían como yo que no me acordaba que existía el .toggle y terminé haciendo más chamba?

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');

menuEmail.addEventListener('click', toggleDesktopMenu);

function toggleDesktopMenu(){
    if ((desktopMenu.getAttribute('class'))=='desktop-menu inactive'){
        desktopMenu.classList.remove('inactive');
    }else{
        desktopMenu.classList.add('inactive');
    }
}

odpinerosh

Yo definí una clase llamada visible que toma el atributo “visibility” y lo cambia (toglle) así:

.visible {
    visibility: visible;
  }

Y en el JavaScript hice esto:

const deskTopMenu = document.getElementById('desktop-menu');
const navBarMail = document.getElementById('nv-email');

navBarMail.addEventListener('click', () => {
    deskTopMenu.classList.toggle('visible');
})

Fernando Molano Castrillón

Pueden agregar los siguientes estilos a la clase .navbar-email para que puedan darle click al email cuantas veces quieran rápido sin que se les seleccione el texto.

.navbar-email {
  color: var(--very-light-pink);
  font-size: var(--sm);
  margin-right: 12px;
  cursor: pointer;
**  user-select: none;**
}

Además con el cursor: pointer; es un buen indicador para el usuario de que ahí puede hacer click y algo va a pasar.

Quetzal Mendoza

Mi primera solución:

function toggleDesktopMenu() {
    // desktopMenu.classList.toggle("inactive");
    if(inactive == 1) {
        desktopMenu.setAttribute("class", "desktop-menu");
        inactive = 0;
    } else {
        desktopMenu.setAttribute("class", "desktop-menu inactive");
        inactive = 1;
    }
}

Kevin Salazar

Los dioses del internet jeje.

mateozaratefw

Pequeno detalle, al inactive de la function NO le pongan el .

sebastian ramos

tuve que usar un window.onload=function(){} por que no me funcionaba la parte del js , parece ser que mi script se ejecutaba demasiado rapido ,antes del dom…y por eso me retornaba null los query selector y no jalaba nada xd pero bueno lo resolvi

Eduardo Reyes

🤓 Yo encontré una función en JavaScript precisamente para poner y quitar una clase de CSS.

const menuEmail = document.querySelector(".navbar-email");
const desktopMenu = document.querySelector(".desktop-menu");

menuEmail.addEventListener("click", toggleDesktopMenu);

function toggleDesktopMenu() {
	desktopMenu.classList.toggle("inactive");
}

Rody Josue Ccoyllo Cule

#CSS

.desktop-menu--inactive{
    display: none;
  }

#JS

const desktopMenu = document.querySelector(".desktop-menu");

const toggleDesktopMenu = () => {
  desktopMenu.classList.toggle("desktop-menu--inactive");
};

menuEmail.addEventListener("click", toggleDesktopMenu);

jhonatan89

Cristhian Camilo Rodriguez Correa

Yo lo hice así, pero me gusta más el del profe más limpio

<code> 
function toggleDesktopMenu() {
  const menuUser = desktopMenu.style.display;
  if (menuUser === 'none') {
    desktopMenu.style.display = 'block';
  } else {
    desktopMenu.style.display = 'none';
  }
}

Misael Gomez

Para copiar y pegar rápidamente el contenido de la clase11.html al index.html use este comando

 cp clase11.html index.html

Joserph Camacho

Muy buena la clase, ya voy entendiendo más el manejo del Dom y los eventos y hasta tuve el msmo error de profesor, en este mundo a todos nos puede ocurrir errore, pero lo importante en solucionarlo aunquesea algo pequeño.

Cecilio Cauich

CSS GRID LAYOUT
CSS FLEX BOX

Si ya tomaron css y quieren repasar o si no lo han tomado aquí les dejo dos videos que les juro que cada es mas que un curso resumido.

Espero les sirva

JESUS IVAN MENDOZA CONTRERAS

Yo lo había logrado como lo tengo en las líneas comentadas, pero a través de toggle es mucho más limpio.

Duvan Zapata

Toggle will take out the class or put the class

Orlando Rodriguez

Yo primeramente para el reto solo había colocado
.classList.add y no sabia como quitar la clase luego haciendo la interacción nuevamente, no conocía esa maravilla de .toggle
Este curso va espectacular.

Luis Felipe Marin Buitrago

Por mi parte si me aventure a meter el desktop-menu dentro del navbar-right y no fue tan tragico menos mal 😆
El script js lo hice de esta forma:

const navbarRmenu = document.getElementsByClassName("desktop-menu inactive")
const navbarR = document.querySelector(".navbar-email")

navbarR.addEventListener('click',toggleDesktopMenu)
function toggleDesktopMenu(event){
    if(navbarRmenu[0].style.display == ""){
        navbarRmenu[0].style.display = "block"
    }
    else{
        navbarRmenu[0].style.display = "";
    }
}

Mauricio Rubio Haro

Diego Alejandro Jaime Baron

La verdad me enrrede pero al final quedo algo asi

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
let validador = menuEmail.classList.contains("inactive");


menuEmail.addEventListener('click',toggleDesktopMenu);

function toggleDesktopMenu(){ 
    var toggle = desktopMenu.classList.contains("inactive");
   if (toggle){
    desktopMenu.classList.remove("inactive");
   }else if(!toggle){
    desktopMenu.classList.add("inactive");
   }  
}

Juan David Reyes

Para copiar todo el texto de un archivo usamos
ctrl + a
Para copiar
ctrl + c
Para pegar
ctrl + v
Para cortar
ctrl + x

Ulises Rodríguez Candela

Mi solución:

const navbarMail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');

navbarMail.addEventListener('click', toggleDesktopMenu);

function toggleDesktopMenu() {
    let isNone = desktopMenu.style.display == "none";
    isNone ? desktopMenu.style.display = "block" : desktopMenu.style.display = "none";
}

Este curso emociona 🤓

Alejandro Jaramillo Merino

Deje mi desktop-menu de esta forma para que el borde que se une al navbar no se redonde

.desktop-menu {
  width: 100px;
  height: auto;
  border: 1px solid var(--very-light-pink);
  border-end-end-radius: 6px;
  border-end-start-radius: 6px;
  padding: 20px 20px 0 20px;
  position: absolute;
  background: var(--white);
  top: 60px;
  right: 60px;
}

Juan Pablo Ospina Restrepo